# 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 ```bash npm install -g sdtk-design-kit sdtk-design --version sdtk-design --help ``` ## Beginner Idea Flow ```bash 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. ```bash 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: ```bash 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 ```text sdtk-design init sdtk-design runtime install --runtime [--scope ] [--project-path ] [--force] sdtk-design runtime uninstall --runtime [--scope ] [--project-path ] sdtk-design runtime status --runtime [--project-path ] sdtk-design start --idea "" --style premium-dashboard sdtk-design start --from-spec . --reference-dir ./docs/design/reference-export --profile b2b-commerce sdtk-design brief --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 ] [--round ] sdtk-design review-loop status|next|resolve --status --note "" sdtk-design round close|diff|signoff --screen --by 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 ` 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 ` 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_.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 ` command. It needs no prototype (pick a style before generating) and is choose-only: it copies a command, it writes nothing. Visual style presets: ```text 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: ```text 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.