document
Record your visual system so future work can follow it.
On this page 3 sections
Use document when your project has a visual style you want to keep. Impeccable reads the existing interface and records its colors, typography, layout, and component rules in DESIGN.md.
Run it after the design has taken shape, when an older record has become stale, or before a redesign to capture what exists today.
Try it
/impeccable documentIf DESIGN.md already exists, Impeccable shows it and asks how you want to update it before overwriting anything.
How it works
- Find the system: inspect tokens, styles, components, and the rendered page when a browser is available.
- Explain the choices: confirm the design’s character and the intended role of its colors, type, and components.
- Write the record: put reusable values in structured form and explain how to use them in readable prose.
- Prepare the design panel: generate the additional metadata and component previews used by Live Mode.
colors.action: "#263c32"Use the dark green primary button for the main action. Keep secondary actions quieter.
Keep the button’s focus outline visible for keyboard use.
You get two files in a normal scan. DESIGN.md holds the visual system and its design tokens: named values for things such as colors and spacing. .impeccable/design.json adds metadata and component previews that the Markdown format cannot hold. You do not need to edit that generated file by hand.
What is the DESIGN.md format?
The file follows the DESIGN.md format. Its YAML frontmatter stores the token values; its Markdown explains their use.
The body supports eight sections, in order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, and Do’s and Don’ts. Irrelevant sections can be omitted. Keep the generated headings when editing so tools can recognize them.
Extra metadata, such as motion settings and full component previews, goes in .impeccable/design.json. The token values remain in DESIGN.md.
No visual system yet? Start with a seed.
/impeccable document --seedSeed mode helps you choose a visual direction before implementation. It needs product context and a first surface to design, then takes you through the direction workshop. If you already chose a direction in this session, it reuses that choice.
The result is a clearly marked starting record, with unresolved implementation details left open. It does not invent a finished token library or generate the extra metadata file yet. Run document again after there is code to capture the actual system.
An existing, coherent interface should be documented in normal scan mode. Request a redesign explicitly if you want to replace its visual identity.
Check the result
Compare the record with the interface. Are the colors and fonts right? Do the component rules describe intentional patterns? Remove rules that came from a one-off screen, and correct anything that no longer reflects the design.
Use extract if the repeated styles also need to become shared code. Document records the system; extract consolidates its implementation.