design-studio

Model your data entities and relationships through interactive conversation. Produces data-shape.md with entities and relationship descriptions.

Build a Minimum Viable Brand through interactive discovery. Produces brand identity, design tokens, and a visual brand guide.

Initialize the design-studio workspace and configure gitignore preferences

Pick a design variant, extract tokens, and archive rejected variants

Refine a picked design variant with feedback. Creates a new session with 3-4 variants that iterate on the chosen design.

Convert a chosen HTML variant into production Next.js components using detected project conventions and component libraries

Show the current state of the design-studio workspace

Launch the Design Studio viewer app in your browser

Generate 3-4 standalone HTML design variants from a text description. Opens in any browser for comparison.

Define your product through interactive conversation. Produces product overview (name, description, problems, features) and roadmap (ordered section list).

Manage product sections — create specs, design screen variants, pick screen designs, or list all sections with their status.

Define your app shell, navigation, and layout through interactive conversation. Produces shell/spec.md with overview, navigation items, and layout pattern.

Builds a Minimum Viable Brand through interactive Q&A, URL/image analysis, and synthesis. Produces brand.json, tokens.json, and brand-guide.html.

Generates 2-3 standalone HTML showcase pages that demonstrate a brand identity in real page contexts. Reads brand.json and produces industry-appropriate pages using the brand's tokens, voice, and visual principles.

Models data entities and relationships through interactive Q&A. Reads product context to suggest entities, then writes data-shape.md.

Converts a chosen HTML variant into production Next.js components. Scans project conventions including component libraries (shadcn/ui, Radix), splits components, converts vanilla JS to React hooks, and extends Tailwind config with design tokens.

Defines a product through interactive Q&A. Produces product-overview.md (name, description, problems, features) and product-roadmap.md (ordered section list).

Generates 3 standalone HTML screen design variants scoped to a product section. Creates app screens that live within the shell, reading section spec for functional requirements, shell spec for layout context, and brand/tokens for visual constraints.

Defines a product section spec through interactive Q&A. Reads product context and writes sections/{id}/spec.md with title, overview, user flows, and UI requirements.

Defines the app shell, navigation, and layout through interactive Q&A. Reads product context to suggest navigation, then writes shell/spec.md.

Extracts design tokens from a chosen HTML variant's CSS custom properties and writes a structured tokens.json file. Handles merge conflicts with existing locked tokens.

Generates 3-4 standalone HTML design variants from a text description, or refines an existing design based on feedback. Each variant is a self-contained file with Tailwind CDN that opens in any browser. Variants differ in meaningful UX dimensions.

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.

Guided product planning workflow. Define your product (overview + roadmap), model data entities, specify the app shell, and create feature sections — all through interactive conversation that produces viewer-compatible structured markdown.

1 hook across 1 event