Skip to content
Motir
Start free

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped
Follow  — continues on app.motir.co
Request a featureAtom feed

← Motir · Work items

MOTIR-10Done

1.0.5 Design system & brand

Define Motir's visual language before any design Subtask runs. Without this, every design prompt would produce a different look — buttons that disagree, spacing that fights, typography that varies per page. The output of this Story is the reference every later "design" Subtask prompt is expected to honor.

Prerequisites: Prerequisite for every design Subtask in v1. Story 1.1 (auth pages), Story 1.2 (workspace switcher), Story 1.3 (project creation modal), Story 1.5 (app shell), and all of Epic 2/3 UI work depend on this. Epic 4's prompt-generation agent must inject the design-system reference into every design-type prompt.

Verification

  • Open a terminal and run:

     git checkout story/PROD-1.0.5-design-system
 pnpm dev

  • Open http://localhost:3000/_tokens in your browser. You should see:

    • The color palette as labeled swatches (12 colors).
    • The type scale (xs/sm/base/lg/xl).
    • Every primitive component (Button, Input, Textarea, Card, Modal, Pill, Tooltip, Toast, Spinner) rendered with every variant.
    • The Empty-state and Error-state sample components.

  • Open /docs/design-system.md and skim the table of contents. The doc should cover: Tokens, Primitives, Patterns, Voice & tone, Don'ts. You don't need to read every word — just confirm the structure is complete and the screenshots are present.

  • Confirm CI is green on the Story PR.

  • Confirm the designed starter exists (1.0.5.6 output):

    • Visit https://github.com/moooon-B-V/nextjs-prisma-vercel-starter-with-design
    • Confirm the "Use this template" button is visible (marks it as a GitHub Template).
    • Click "Use this template" to create a throwaway test repo; clone it; run pnpm install && ./scripts/db-up.sh && pnpm dev; confirm http://localhost:3000/tokens renders the full design system specimen page; delete the throwaway repo.

  • If all five checks pass, approve and merge the PR. If anything is missing or off, add a comment and Motir will produce a follow-up Subtask to fix it.