SDTK-DESIGN — Design & Prototype Shipped

SDTK-DESIGN is a local-first MVP design planner and reviewer. It turns either a rough idea or explicit SDTK-SPEC design artifacts into reviewable design docs, a static prototype, visual review evidence, and an SDTK-CODE handoff.

• CLI: sdtk-design (package sdtk-design-kit)
• Full command list: sdtk-design reference

It is deliberately not a Figma clone, app builder, production code generator, or network service.

Two entry flows

From an idea

sdtk-design init
sdtk-design start --idea "A lightweight CRM for solo consultants to track leads." --style premium-dashboard
sdtk-design prototype
sdtk-design review --artifact docs/design/prototype/index.html
sdtk-design handoff
sdtk-design status

From SDTK-SPEC artifacts

When the spec pipeline (or an agent) has produced explicit screen/design artifacts:

sdtk-design init
sdtk-design start --from-spec . --profile b2b-commerce
sdtk-design prototype --force
sdtk-design review --artifact docs/design/prototype/index.html
sdtk-design handoff

start --from-spec consumes explicit design artifacts — it does not parse raw requirement prose or invent missing screens. An optional --reference-dir maps a read-only reference export.

Preview Studio

sdtk-design preview   # strict: expects a prototype
sdtk-design open      # always-open: empty-state + Style Gallery if no prototype yet
sdtk-design styles    # Style Gallery only — pick a preset before generating

The studio renders prototype screens in your browser, lets you click/shift-click elements to annotate them, and live-preview design-token tweaks. "Send to agent" writes docs/design/feedback/DESIGN_FEEDBACK_<timestamp>.md plus a copy-ready instruction — the studio itself is read-only over the prototype and never runs the agent.

Style presets

Seven unbranded, category-oriented presets (pick the closest to your product):

minimal-saas        SaaS & Productivity
premium-dashboard   Dashboard & Data
bold-founder        Marketing & Launch
warm-editorial      Editorial & Content
ecommerce-retail    E-Commerce & Retail
fintech-trust       Fintech & Data
editorial-content   Editorial & Content

Outputs

Human-facing artifacts under docs/design/:

DESIGN_BRIEF.md
SCREEN_MAP.md
DESIGN_SYSTEM.md
DESIGN_HANDOFF.md
prototype/index.html
reviews/DESIGN_REVIEW_YYYYMMDD.md
feedback/DESIGN_FEEDBACK_YYYYMMDDThhmmss.md
wireframes/

DESIGN_HANDOFF.md is the contract SDTK-CODE picks up.

Boundaries

• No production app code generation.
• No URL/browser/screenshot/vision review in the CLI.
• No network calls by default.
• No SDTK-WIKI or .sdtk/atlas mutation.
• No overwrites unless a command explicitly supports --force.

Where to go next

Command referenceEvery sdtk-design command with options.

Next phase: SDTK-CODEPick up the handoff and implement under governance.

Idea to ShipWhere design sits in the full pipeline.