OpenDesign design-system prototype loop with coding agents

What they did

The team started from a written brief in OpenDesign's workspace, then handed the build to a coding agent (Cline and Codex) pointed at the project's design system, templates, and skills. Instead of one-shot generation, they kept everything in a single project: the agent produced a first prototype, the team reviewed it in the shared workspace, and feedback was fed back to the same agent session so refinements landed against the existing design tokens and components rather than a fresh, inconsistent draft. They used the Plugins page to launch official skills with 'Try it' for specific tasks (brand asset inspection, layout passes), and revisited the All projects view to compare design systems, media, and prototypes side by side. The design system page was used to inspect brand identity, logo, and typography before each iteration so the agent had concrete constraints to follow.

How it went

Produced a coherent, design-system-aligned prototype that could be refined across multiple rounds without losing consistency, and the workflow stayed inspectable because skills, templates, and design systems are open and adaptable. Polish level was good enough for internal review and stakeholder feedback; the loop still needed human judgment on brand nuance and final visual QA.

Worth knowing

Requires a real design system and brief to be useful; without them the agent drifts toward generic output. Agent quality depends on the underlying model and API access, and the README leans on promotional plan details rather than setup specifics. Expect to tune skills and templates to your own process, and budget time for review passes.

Wiring

Install OpenDesign (Apache 2.0) and open the workspace. Create or import a design system so brand assets, logo, and typography are available to the agent. Add the brief as a project file, then connect a coding agent (Cline or Codex) with API access to the project. Launch relevant skills from the Plugins page via 'Try it' to seed tasks. The agent writes prototype files into the same project directory; review in the shared workspace, capture feedback in a file, and re-prompt the same agent session so refinements apply to existing components. Use All projects to compare iterations and keep design systems, media, and prototypes grouped.

Try it yourself

Read this repo's design system, templates, and skills. Take the brief in docs/brief.md and build a clickable prototype that follows our tokens (color, type, spacing) exactly. Keep all work in one project folder, list which skill or template you used for each screen, and after the first pass produce a short changelog of what you'd refine next based on the review notes in docs/feedback.md.