DrFirst
Get Started Foundation Components Display Patterns Pages Workflows Builder Actions Behaviors Design Agent

What is the Design Agent?

The Design Agent is a tool for product, design, and engineering to converge on what to build, before any code gets written.

One intake

  • Describe: type what you need in plain English. The agent surfaces matching patterns from our design system and asks a few clarifying questions.
  • PRD markdown: paste a PRD or upload a .md file. Structured screen sections generate directly from the spec.
  • Page library: browse existing pages and send selected pages or components back into the same project description.

What you get back

  • An end-to-end clickable prototype where key buttons, tabs, modals, save/cancel, filters, pagination, and validation states are wired for PM/QA review.
  • A structured PRD markdown file you can download. Drop it into JIRA, Notion, or your spec doc.
  • A standalone .html download. Share with stakeholders or hand to engineering as the visual reference.

What's next (Phase 2)

  • Plain-English refinement after generation ("move Status to the second column")
  • Export-to-admin: a folder with TS components, SCSS, and design tokens ready to drop into the admin codebase

Every output is constrained by the design contract. The agent can only compose patterns that already exist in our design system. It can't invent new components or break the visual standard.

Delete Submission

Are you sure you want to delete this submission?

This action cannot be undone.

Remove Contract

Are you sure you want to remove this contract from the campaign?

This action cannot be undone.