{{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-builderreports 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
- Collect the brand input. From flags, or via
AskUserQuestionfor 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).
- primary (required) - the brand color (hex / rgb /
- Delegate to
ds-generator(viaTask): it resolves the primary to OKLCH, runstoken-scale.cjsfor 3 variants (conservative / balanced / bold), and presents them. - Pick a variant. Surface the 3 variants (primary
500, type ratio, spacing baseline, radius, feel); the user picks ONE. - Emit + scaffold (proposal → confirm).
ds-generatoremits the chosen token set (role-named CSS custom properties + the framework mapping) and scaffolds button / input / card as a coherence proof. Nothing is written tosrc/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.cjsemits native CSSoklch().
Output
End with:
## BOOTSTRAP-DS COMPLETE


