Build a Reusable AI Design System With Open Design

Open Design is the visual workspace. You still need to connect the AI agent that will do the design work.

During onboarding, choose the local agent option, then select the command-line agent Open Design finds on your computer. In the recording, that was Codex CLI. For the local-agent route shown here, install and authenticate the agent's CLI first; Open Design can then detect it.

Once the workspace opens, use the design-system selector near the top of the project. This is where you will create a new system or choose one you have already made.

Agent support and intake options change, so check the current Open Design site (https://open-design.ai/) and project README (https://github.com/nexu-io/open-design) before choosing a source or workflow.

Choose Create New Design System. Paste in your website under GitHub or website, click Add, then choose Continue to generation. Open Design uses the source material to assemble a system you can use in later jobs.

When the extraction finishes, inspect the result before you generate anything. The website pass in this demo missed the logo, so the presenter reviewed an already-extracted system with the logo, typography, colors, voice and tone, plus light and dark styling and button treatments.

Pro tip: Treat the first extraction as a draft. The website pass in the recording did not find the logo. If something important is missing, use the AI optimization option or add the logo, images, or DESIGN.md yourself. Correct the system before asking it to create assets.

You can also start from a description, a local code repository, a Figma file, or an existing DESIGN.md. The useful rule is simple: give the tool the clearest approved source material you have, then review what it inferred.

Select the new design system before starting a new generation. Then choose the output type and describe the actual job clearly. The demo used Hyperframes for a short motion asset and created a separate countdown landing-page prototype using the same design system.

In the demo, the first prompt was:

Build an animation showing the growth that a Rundown University member will have over six months.

For your own project, make the output, subject, audience, and constraint explicit:

Build a [format] for [audience] that explains [specific outcome].
Use the active [brand] design system. Include [required brand element],
and keep the result to [length or scope].

For example, the second demo prompt was a prototype for a countdown until a new Rundown University event. Open Design showed a task list as it worked, including applying brand tokens, composing landing sections, and adding the countdown interaction.

Keep the brief specific. A vague request for a Hyperframe in the recording returned something closer to a landing-page demo. Naming the format and desired behavior gives the agent much better direction.

Open the finished result and check the parts that make it recognizably yours: logo use, typography, colors, layout, motion, and the actual job the asset needs to do. The prototype in the demo included the event countdown, a reserve-a-seat action, and a mobile view to inspect.

Use normal feedback when something is off. The first motion asset ran too quickly and did not use the brand logo. The correction was direct: ask it to double the animation length and use the logo from the design system. The revised result addressed those two requested changes.

Pro tip: Feedback is part of the system, not a failure of it. When a result misses the mark, name the visible problem and the exact correction. Where Open Design offers to save a rule, a concrete instruction such as “use the logo from the design system” gives the next request better context.

If the result is a prototype, review it as a prototype. You can preview it, inspect the mobile version, and download its code to continue work in an editor such as Cursor. Do not mistake the generated page for a finished production website without your usual content, accessibility, technical, and brand review.