This skill should be used when the user asks to "create a brand", "bootstrap a brand", "define a design system", "build a visual identity", "start brand design", "brandy bootstrap", or invokes /brandy:bootstrap. Orchestrates the full brand creation workflow — from understanding to strategy to visual identity to design system export.
Create a complete brand identity and design system through an interactive, phased workflow.
Bootstrap orchestrates 6 specialized agents in sequence, with a visual companion (browser-based preview) for interactive feedback. Each agent asks the user questions and shows work in the browser before passing to the next phase.
Complete these steps in order:
Check if the user provided a path to an existing codebase or project directory.
If a codebase exists, run the analysis script:
bash ${CLAUDE_PLUGIN_ROOT}/scripts/analyze-codebase.sh <project-dir>
This detects: CSS variables, Tailwind config, design token files, UI frameworks (MUI, Chakra, etc.), component directories, brand assets (logos, icons, fonts), and iOS xcassets.
Pass the analysis results to the clarifier as context.
If no codebase exists, proceed with a blank slate.
Dispatch the brandy-clarifier agent with:
bootstrapThe clarifier will ask the user targeted questions (max 3 rounds) and produce a structured context summary covering: product purpose, audience, platforms, personality, and constraints.
Launch the visual companion:
bash ${CLAUDE_PLUGIN_ROOT}/scripts/start-server.sh --project-dir <project-dir>
Save screen_dir and state_dir from the JSON response. Tell the user to open the URL in their browser.
Server management:
$STATE_DIR/server-info exists. If missing, restart.strategy.html, visual-directions.html, mockups.htmlvisual-directions-v2.html$STATE_DIR/events after each user response to capture browser interactionsDispatch the brandy-strategist agent with the clarified context.
The strategist will:
No browser content needed for this phase unless the strategist wants to show tone examples.
Dispatch the brandy-creative-director agent with the approved brand strategy.
The creative director will:
screen_dir showing color palettes, typography specimens, and mockup elementsUse the frame template's CSS classes for rich previews:
.swatches + .swatch for color palettes.type-specimen for typography samples.cards + .card for side-by-side comparison.options + .option for A/B/C selectionDispatch the brandy-designer agent with the approved visual identity.
The designer will:
Dispatch the brandy-architect agent with the approved designs.
The architect will:
Dispatch the brandy-integrator agent to produce final deliverables.
Determine output directory — default is brand/ at the project root, or user-specified path.
The integrator writes:
brand-guide.md — brand documentationdesign-system.md — design system specificationtokens/ — design tokens via ${CLAUDE_PLUGIN_ROOT}/scripts/generate-tokens.shassets/ — SVG logo variantsREADME.md — quick referenceShow a final summary in the browser.
Stop the preview server:
bash ${CLAUDE_PLUGIN_ROOT}/scripts/stop-server.sh <session-dir>
Present the user with a summary of all files created and next steps.
The preview server watches screen_dir for HTML files and serves the newest one. Write content fragments (no <!DOCTYPE> or <html> wrapper) — the server wraps them in the frame template automatically.
Available CSS classes: .options, .option, .cards, .card, .mockup, .split, .pros-cons, .swatches, .swatch, .type-specimen, .logo-preview, .token-grid, .token-item, .placeholder, .mock-nav, .mock-button, .mock-input
User interactions are recorded to $STATE_DIR/events as JSON lines. Read this file after each user response.
Waiting screen: When returning to terminal-only questions, push a waiting screen:
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>