sdtk-design-kit

sdtk-design-kit is the public CLI package for SDTK-DESIGN.

Package version in this source snapshot: 0.14.1 CLI command: sdtk-design

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

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

Install

npm install -g sdtk-design-kit
sdtk-design --version
sdtk-design --help

Beginner Idea Flow

sdtk-design init
sdtk-design start --idea "I want to build 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

SPEC-Driven Multi-Screen Flow

Use this when SDTK-SPEC 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
sdtk-design status

Optional read-only reference export mapping:

sdtk-design start --from-spec . --reference-dir ./docs/design/reference-export --profile b2b-commerce

start --from-spec consumes explicit design artifacts. It does not parse raw requirement prose or invent missing screens.

Commands

sdtk-design init
sdtk-design runtime install --runtime <claude|codex> [--scope <project|user>] [--project-path <path>] [--force]
sdtk-design runtime uninstall --runtime <claude|codex> [--scope <project|user>] [--project-path <path>]
sdtk-design runtime status --runtime <claude|codex> [--project-path <path>]
sdtk-design start --idea "<idea>" --style premium-dashboard
sdtk-design start --from-spec . --reference-dir ./docs/design/reference-export --profile b2b-commerce
sdtk-design brief --idea "<idea>"
sdtk-design screens
sdtk-design wireframe --screen landing
sdtk-design system --style minimal-saas
sdtk-design prototype
sdtk-design preview
sdtk-design open
sdtk-design styles
sdtk-design review --artifact docs/design/prototype/index.html
sdtk-design handoff
sdtk-design status

# Client Loop (SDTK-DESIGN Pro — BK-358)
sdtk-design room start [--pin <code>] [--round <n>]
sdtk-design review-loop status|next|resolve <id> --status <s> --note "<note>"
sdtk-design round close|diff|signoff --screen <id> --by <name>
sdtk-design direction start|lint|status|lock

Client Loop (Pro). The room/review-loop/round/direction families turn a generated prototype into a client delivery workflow: a shareable Review Room where the client pins comments onto the live screens (375/768/1440), a git-tracked review ledger the design agent works through, per-round visual snapshots + a pixel-diff "what changed" report, per-screen sign-off that lands in the handoff, and a Direction Round (2–4 divergent art-direction candidates, one recorded pick, locked into DESIGN_TOKENS.json). Requires an SDTK Pro entitlement with the design.client.loop capability; every command fails closed without one. The Preview Studio (sdtk-design preview) shows a read-only Client reviews panel — rounds, comment counts, submitted/sign-off state, and links to each round's "what changed" diff report — bridging the prototype → review → apply flow.

Brand-Match (Pro, BK-359). sdtk-design brand ingest <url> deterministically extracts a client's colour candidates (ranked by usage × saturation), type stacks, and a logo pointer from one page's CSS into a raw extraction with an explicit confidence: ok|low; the design agent curates it into a brand-profile.json (brand-hue anchor + curated complements, not six shades), sdtk-design brand check is a WCAG AA contrast guard over that profile, and direction start --brand <profile> seeds the Direction Round so candidates open already in the client's brand. Best-effort + human-reviewed (BR-03) — a starting point from the real brand, not a perfect automatic match. Same design.client.loop Pro entitlement as the Client Loop.

preview starts a local Preview Studio (browser): it renders the prototype screens, lets you click/shift-click elements to annotate them with a note, and (via the Tokens panel) live-preview design-token tweaks on the :root CSS variables a screen declares. On "Send to agent" it shows a confirm summary, writes docs/design/feedback/DESIGN_FEEDBACK_<timestamp>.md (schema sdtk.design.feedback.v1), then a copy-ready instruction to apply it. Run the design-prototype skill afterward to apply that scoped feedback. The studio serves the prototype read-only, writes only under docs/design/feedback/, and never runs the agent itself.

open is the always-open entry to the same Preview Studio: unlike a strict preview it never hard-fails on a missing prototype — if none exists yet it opens an empty-state with the Style Gallery and "run sdtk-design prototype first" guidance; once a prototype is present it renders the screens for annotation. (preview is now equally graceful about a missing manifest.)

runtime install|uninstall|status manages only the design-prototype skill in the resolved skills directory (.claude/skills or .codex/skills, project or user scope) — it never creates docs/design or .sdtk/design. Use it for skills-only bootstrap in repos where init is unwanted; --runtime is required, matching the sdtk-spec/ops/code runtime command family.

styles opens the same studio focused on the Style Gallery — a visual menu of the category-oriented style presets (swatches + type sample + summary). Click a card to copy its start --style <preset> command. It needs no prototype (pick a style before generating) and is choose-only: it copies a command, it writes nothing.

Visual style presets:

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

Presets are category-oriented: pick the one closest to the product you are designing (for example ecommerce-retail for a storefront). They are unbranded SDTK-original style directions, not copies of any third-party brand.

Outputs

Human-facing artifacts are written under docs/design/, including:

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/

SPEC-driven/high-fidelity flows may also create per-screen briefs, component contracts, visual token contracts, reference maps, fidelity reviews, and internal state under .sdtk/design/.

Boundaries

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

See products/sdtk-design/governance/SDTK_DESIGN_USAGE_GUIDE.md for the full usage guide.