Code-first design exploration workflow. Product Planning → Section Design → Brand (optional) → Explore (HTML variants) → Refine → Decide (extract tokens) → Ship (Next.js components). Covers section screen design, brand discovery, variant generation, iterative refinement, token management, and production conversion.
Generates design variants, extracts tokens, and converts chosen designs into production-ready Next.js components.
npx claudepluginhub dlabs/claude-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/brand-guide-spec.mdreferences/brand-questionnaire.mdreferences/brand-schema.mdreferences/nextjs-patterns.mdreferences/screen-design-spec.mdreferences/token-schema.mdreferences/variant-spec.mdThis skill provides the complete lifecycle for code-first design exploration. Variants are standalone HTML files — not mockups or prototypes — that open directly in any browser. Tokens extracted from chosen variants persist across sessions, creating a consistent design language. An optional brand discovery phase builds a coherent visual identity before exploration begins.
PRODUCT PLANNING (/ds:product, /ds:data-shape, /ds:shell, /ds:section)
→ SECTION DESIGN (per section) (/ds:section design, /ds:section pick)
→ BRAND (optional) (/ds:brand)
→ EXPLORE (/ds:design)
→ refine loop (/ds:design-refine)
→ DECIDE (/ds:design-pick)
→ SHIP (/ds:design-ship)
Define what you're building before exploring how it looks. See skills/product-planning/SKILL.md for the full product planning lifecycle.
Commands: /ds:product → /ds:data-shape → /ds:shell → /ds:section
Outputs:
.design/product/product-overview.md — Product name, description, problems, features.design/product/product-roadmap.md — Ordered section list.design/product/data-shape/data-shape.md — Data entities and relationships.design/product/shell/spec.md — App shell, navigation, layout.design/product/sections/{id}/spec.md — Feature section specsAfter product planning defines section specs, design each section's screens. This bridges specs (what to build) with visual design (how it looks).
/design-studio:ds:section design "Section" "screen" uses the screen-designer agent to create 3 HTML screen variants:
/design-studio:ds:section pick "Section" "screen" <letter> selects a variant:
screen-designs/{screen-name}.html.drafts/{screen-name}/rejected/Section design outputs:
.design/product/sections/{id}/screen-designs/{screen}.html — picked screen designs.design/product/sections/{id}/screen-designs/.drafts/{screen}/ — variant drafts with manifestSee references/screen-design-spec.md for the screen design HTML boilerplate, manifest schema, and quality rules.
/design-studio:ds:brand uses the brand-builder agent to create a Minimum Viable Brand through interactive Q&A:
brand.json — full identity including personality, voice, visual principles, and visual tokenstokens.json from brand (locked with source_brand: true)brand-guide.html — standalone style reference using the brand's own tokensAfter brand discovery, the brand-showcase-generator agent creates 2-3 HTML showcase pages demonstrating the brand in real page contexts (landing page, pricing, features, etc.).
Brand outputs:
.design/brand.json — full brand identity (source of truth).design/tokens.json — derived visual tokens (auto-locked).design/brand-guide.html — visual style guide.design/brand-showcase/ — showcase pages with manifest/design-studio:ds:design uses the variant-generator agent to create 3-4 standalone HTML files. Each variant:
.html file with Tailwind CDN — no build stepAfter picking a variant, iterate on it with feedback. /design-studio:ds:design-refine "feedback" uses the variant-generator agent in refinement mode:
chosen.html as the base designRefinement loop:
EXPLORE (/ds:design) → pick → REFINE (/ds:design-refine) → pick → REFINE → ... → DECIDE
The refinement manifest includes parent_session, parent_variant, and refinement_prompt fields for chain tracking.
/design-studio:ds:design-pick uses the token-extractor agent to:
:root {} CSS custom propertiestokens.json to .design/tokens.jsonchosen.html/design-studio:ds:design-ship uses the nextjs-converter agent to:
chosen.html + tokens.jsoncn(), cva)<Button>, <Card>, <Tabs> from shadcn/ui) with proper TypeScript typestailwind.config.ts with design tokens if needed:root {}. This is what makes token extraction work./ds:design-pick, future /ds:design runs use them as constraints. Variants share the visual language but explore different structures..design/
├── config.json # Plugin configuration (gitignore mode, etc.)
├── tokens.json # Design tokens (from brand or variant pick)
├── DESIGN_NOTES.md # Auto-generated design decision log
├── product/ # Product planning (from /ds:product, /ds:data-shape, etc.)
│ ├── product-overview.md # Product name, description, problems, features
│ ├── product-roadmap.md # Ordered section list
│ ├── data-shape/
│ │ └── data-shape.md # Data entities and relationships
│ ├── shell/
│ │ └── spec.md # App shell, navigation, layout
│ └── sections/
│ ├── user-auth/
│ │ ├── spec.md # Section spec
│ │ ├── data.json # Optional sample data
│ │ └── screen-designs/
│ │ ├── login.html # Picked screen design
│ │ ├── signup.html # Picked screen design
│ │ └── .drafts/
│ │ ├── login/
│ │ │ ├── manifest.json
│ │ │ ├── chosen.html
│ │ │ └── rejected/
│ │ └── signup/
│ │ ├── manifest.json
│ │ ├── variant-a.html
│ │ ├── variant-b.html
│ │ └── variant-c.html
│ └── dashboard/
│ └── spec.md
├── brand.json # Full brand identity (optional, from /ds:brand)
├── brand-guide.html # Visual brand style guide (derived from brand.json)
├── brand-showcase/ # Brand showcase pages (derived from brand.json)
│ ├── manifest.json
│ ├── landing-page.html
│ ├── pricing-page.html
│ └── features-page.html
└── sessions/
├── 2026-02-14-001/
│ ├── manifest.json
│ ├── variant-a.html
│ ├── variant-b.html
│ ├── variant-c.html
│ ├── chosen.html # (after pick)
│ └── rejected/ # (after pick)
│ ├── variant-a.html
│ └── variant-c.html
└── 2026-02-14-002/
└── ...
references/brand-schema.md — brand.json schema, field definitions, token derivation mappingreferences/brand-questionnaire.md — Q&A question bank, batching rules, branching logicreferences/brand-guide-spec.md — Brand guide HTML template, showcase page template, quality rulesreferences/variant-spec.md — HTML boilerplate, CSS naming convention, quality rules, manifest schema (includes refinement fields)references/screen-design-spec.md — Screen design HTML boilerplate with app shell chrome, manifest schema, quality rulesreferences/token-schema.md — tokens.json schema, category definitions, merge strategyreferences/nextjs-patterns.md — Component splitting, Tailwind config, conversion patternsskills/product-planning/)references/product-overview-schema.md — product-overview.md format and parser behaviorreferences/product-roadmap-schema.md — product-roadmap.md format and slugification rulesreferences/data-shape-schema.md — data-shape.md entity/relationship formatreferences/shell-spec-schema.md — shell spec.md navigation and layout formatreferences/section-spec-schema.md — section spec.md format and directory structureYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.