Create and reuse a design system

Gather the references that define your brand

Open Design systems in the Home sidebar, then choose Create. Add source material before generating: a website or GitHub link, a brand reference, files, or a written description. The create screen accepts files up to 12 MB each. Use references that you are allowed to provide to the selected service.

Paste DESIGN.md when you already have written design rules. You can also copy an existing design system as a starting point. State what must remain unchanged, such as brand colors, typography, logo spacing or component behavior.

Use code or Figma as a reference

Expand Advanced for a GitHub repository, local code, a .fig file or a Figma file URL. Select the relevant source rather than uploading an unrelated project folder. Keep assets and the files that explain the components together.

A Figma URL is a source reference, not a promise that every private file can be read. If access fails, provide an authorized .fig local copy or clear screenshots. Importing a Figma reference does not enable direct export back to a native Figma file.

Generate, inspect and refine the system

1. Check the supplied references and choose Generate. Wait for the extraction or generation to finish before treating the system as ready.
2. Review the generated previews and DESIGN.md. Compare colors, type sizes, spacing and components with your references; correct omissions or conflicting rules.
3. Save the edited DESIGN.md. If you ask the agent to revise the system, review the result again before publishing it.

Write requirements that another project can follow: where each color belongs, which font to use for headings and body text, and how buttons, forms and states should behave. A collection of attractive screenshots alone does not define these rules.

Publish and choose it for a project

1. Once the system is checked, use its Published control. A draft stays available for your review; publish it before expecting other projects to use it.
2. Return to Home or the project’s design-system picker. Select the intended system and confirm its preview.
3. Describe the work to create and the rules that matter. Check the generated artifact against the system, then use focused revisions for any differences.

Saving rules, publishing a system and applying it to a project are separate actions. Changing a design system does not prove that existing outputs have been regenerated. Reopen the relevant project and check its result.

For an interface workflow, continue with prototypes. For small changes to an existing HTML artifact, see canvas editing.

If a system is missing or read-only

Check the active workspace and whether the system is published. Team resources and personal resources can differ. A teammate’s synchronized copy may be read-only; use the owner or an account with the required workspace permissions to change its source or publishing state.

If extraction fails, verify the source URL, file size and access. Remove an inaccessible source or replace it with a permitted local reference, then retry. If saving fails, retain a copy of your edited rules before leaving the screen. Publishing in OpenDesign does not push changes back to GitHub.