Skip to content

The Agentic Dev Starter Template

Sweet Work

Sweet Work gives your project a proper build order. Instead of jumping straight from a Figma file to pages, you go step by step: write the spec, pull the design system, name the components, then build. Each step feeds the next, so whoever picks up the project — you, a teammate, or a coding agent — builds it the same consistent way.

View style guide

The build order

Seven steps, in this order. Don’t skip ahead — each one exists because the step after it depends on it.

  1. PRD PRD.md

    Turn the brief, meeting notes, and scope into one written spec that lives in the repo. Every later decision is checked against it.

  2. Design tokens tokens.css

    Pull every color, type style, and spacing step straight from Figma’s variables — not from screenshots. From here on, nothing gets styled with a raw value.

  3. Component inventory COMPONENT_INVENTORY.md

    Name every repeated pattern in the design before writing component code. Duplicate frames and near-identical colors get flagged here, while they’re still cheap to fix.

  4. Content modeling sanity.example.ts

    If any content is dynamic or CMS-driven, draft its schema now. Retrofitting a content model after pages are built is how projects stall.

  5. Style guide /style-guide

    Render the real tokens and first components on one living page. It becomes the visual QA surface for everything built after it.

  6. Pages src/pages/

    Build one section at a time, using only the tokens, utility classes, and inventoried components. Container widths and section padding come from Figma, not guesses.

  7. Visual QA Figma ↔ browser

    Diff each section against its real Figma frame before calling it done. Also check contrast, keyboard focus, reduced motion, and overflow at every breakpoint.

Also built in