Skip to main content
Design guidelines let you set standing rules — colors, typography, spacing, component conventions — that Flowstep applies to every AI generation and edit in a file. Instead of repeating “use our blue theme” in every prompt, write it down once and the AI follows it from then on.

​
Edit your design guidelines

1

Open the Design guidelines modal

In the chat panel header, click the Edit design guidelines button. The Design guidelines modal opens with a DESIGN.md text editor.
2

Write or import your guidelines

Type your guidelines directly, or drag and drop a .md file into the editor to import it. The format follows Google’s open design.md standard — optional YAML front matter (recognized keys: version, name, description, colors, typography, rounded, spacing, components) followed by Markdown sections.
3

Save

Click Save changes. From now on, every generation and edit in this file uses your guidelines as mandatory context.
Guidelines apply to future output only — existing designs stay as they are. They are scoped to the current file and don’t carry over to other files.

​
Good to know

  • Length limit — guidelines can be up to 50,000 characters. Imported files beyond that are truncated.
  • Validation — structural errors (unclosed YAML front matter, duplicate ## section headings) block saving. Softer issues, like unrecognized YAML keys or colors that aren’t valid hex codes, show warnings but still save.
  • Export — use the Copy raw file and Download buttons in the modal to copy or download your DESIGN.md.
  • Removing guidelines — clear the text field and save to remove the guidelines for that file.

​
Flowstep updates guidelines for you

When you give a standing style instruction in a prompt — for example, “from now on, use a blue theme” — Flowstep detects it and updates your design guidelines automatically, confirming in the chat: “Updated your design guidelines to use [style] for future generations.” One-off requests like “make it blue” don’t change the guidelines; they only affect that generation.

​
Design guidelines over MCP

If you work through the MCP server, the get-design-guidelines, update-design-guidelines, and delete-design-guidelines tools read and write the same guidelines — so your IDE workflow and the web app stay in sync. See the Tools reference.