gdd-bootstrap-ds

name: gdd-bootstrap-ds description: "Bootstraps a design system for a GREENFIELD project that has none - no Figma, no tokens, no component library. Takes a brand input (primary color + optional secondary + tone tags + target framework) and emits a coherent OKLCH token system (color tints, modular type scale, 4pt/8pt spacing, radius + motion defaults) in 3 variants to pick from, then scaffolds proof components (button/input/card). Use at the start of a brand-new project, or when {{command_prefix}}explore finds no existing design system. Never invents a brand; never overwrites an existing DS." argument-hint: "[--primary ] [--secondary ] [--tone ] [--framework web|native-ios|native-android|flutter]" user-invocable: true tools: Read, Write, Bash, Glob, Grep, AskUserQuestion, Task

{{command_prefix}}bootstrap-ds

Greenfield design-system bootstrap. Closes the gap that GDD's design-context-builder assumes a design system already exists (in code or Figma) - a brand-new project has none. This skill is the front door: it collects a brand input and hands it to agents/ds-generator.md, which emits the token system + proof components per reference/ds-bootstrap-rubric.md (deterministic math in scripts/lib/ds/token-scale.cjs).

When to use

• At the start of a brand-new project (no tailwind.config, no token file, no DS).
• When {{command_prefix}}discover / design-context-builder reports no existing design system and the user opts to bootstrap one.

If a design system already exists, do NOT run this - defer to design-context-builder (it maps the existing one). State that and stop.

Steps

1. Collect the brand input. From flags, or via AskUserQuestion for anything missing:
   • primary (required) - the brand color (hex / rgb / oklch()).
   • secondary (optional) - a second brand color (emitted only if supplied - the rubric's ≤2-brand-colors rule).
   • tone tags (optional) - calm / corporate / editorial / playful / bold (maps to the type ratio + chroma treatment).
   • target framework (optional) - web (default) / native-ios / native-android / flutter. Detect from the project if absent (Phase 34 routing).
2. Delegate to ds-generator (via Task): it resolves the primary to OKLCH, runs token-scale.cjs for 3 variants (conservative / balanced / bold), and presents them.
3. Pick a variant. Surface the 3 variants (primary 500, type ratio, spacing baseline, radius, feel); the user picks ONE.
4. Emit + scaffold (proposal → confirm). ds-generator emits the chosen token set (role-named CSS custom properties + the framework mapping) and scaffolds button / input / card as a coherence proof. Nothing is written to src/ without confirmation.

Do Not

• Do not invent a brand (no logomark, no typeface choice, no third brand color) - emit a token system, not an identity.
• Do not overwrite an existing design system - defer to design-context-builder.
• Do not add a color-conversion dependency - token-scale.cjs emits native CSS oklch().

Output

End with:

## BOOTSTRAP-DS COMPLETE