Use the editor as a review loop
The editor is for making explicit design decisions, then checking their effects before delivery. It is not a one-way document form: the same validated configuration is resolved into the preview and the Markdown export.
A practical sequence
1. Configure the visual system
Set the project identity and visual choices in the editor. The validated DesignConfig is the source for every later step.
2. Review both themes
Open the isolated preview and switch between Light and Dark. Confirm common application components, feedback states, and responsive widths before exporting.
3. Read the generated document
Open the Document tab to inspect the current Google-format DESIGN.md. The same resolved values feed the preview and Markdown.
4. Download and hand off
Download DESIGN.md and include it in the instructions or repository context that your coding agent can read.
5. Keep the editable backup
Export JSON when you need to return to the project later. Import that JSON to restore the configuration and create a new DESIGN.md.
What the handoff contains
Give the downloaded DESIGN.md to an agent as visual guidance for the web app. It contains structured values and explanatory prose, not a deployed interface or a replacement for the rest of a product brief.
If you need to change the visual system, return to the editor with the JSON backup, review both themes again, and download a fresh DESIGN.md. The tool deliberately does not reconstruct an editable project from arbitrary Markdown.