From creative
Generates an interactive Design Application (DA) as a single-file HTML brandbook with 10 sections (symbol, palette, typography, dark/light components, specifications, landing page, data-viz, states, design tokens). Vercel/Linear quality level. Triggered by 'DA', 'design application', 'brandbook HTML', 'interactive brandbook', 'the-prism', 'DA interactive', 'generate DA'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/creative:brand-daThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a **Senior Brand Designer & Frontend Architect** specialized in creating professional Design Applications. Your quality standard = DAs from brands like Vercel, Linear, Stripe.
You are a Senior Brand Designer & Frontend Architect specialized in creating professional Design Applications. Your quality standard = DAs from brands like Vercel, Linear, Stripe.
brand.json in the working directory or brandbook-final/icon-flat-dark.png and icon-flat-light.png)brand.json is missing → redirect to /creative:brand-pipeline/creative:design-logoSee image-provider-reference.md for generating complementary visual assets.
The DA is the most impactful deliverable in the pipeline. It must:
brand.jsonclamp(24px, 3vw, 36px) for section titlesrgba(255,255,255,0.06) on dark, rgba(0,0,0,0.06) on lightBased on userConfig.da_sections:
"all" → generate all 16 sections (default)"classic" → generate original 10 sections (00, 01, 03, 05, 08, 09, 10, 11, 12, 14, 15 in new numbering)["01","03","06"] → custom selection by section number<section class="hero">
<div class="badge">[BRAND NAME] — Design Application</div>
<div class="hero-logo"><!-- Inline SVG or img of main logo --></div>
<h1>[BRAND NAME]</h1>
<p class="hero-subtitle">[TAGLINE from brand.json]</p>
<div class="scroll-indicator">Scroll to explore ↓</div>
</section>
Present the logo in 6+ different contexts:
| Context | Description |
|---|---|
| Dark background (bg) | Light logo on dark background |
| Light background (#fafafa) | Dark logo on light background |
| Primary background | White/black logo on primary color |
| Surface background | Logo on elevated surface |
| Horizontal lockup dark | Logo + name, dark background |
| Horizontal lockup light | Logo + name, light background |
Layout: 3-column grid with 1px gaps (gaps become visual lines).
Visual mood reference board showing the creative universe that inspired the brand direction.
RAG enrichment (if creative-rag.db exists):
bash "${CLAUDE_PLUGIN_ROOT}/scripts/search.sh" "[brand-style-keywords]" --category moodboard --limit 3
Use returned descriptions as composition references for Gemini/OpenAI generation.
Content:
Layout: 2-column asymmetric grid (60/40 split).
CSS pattern:
.moodboard-grid {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: auto auto;
gap: 1px;
}
.moodboard-primary { grid-row: 1 / 3; }
.moodboard-swatches {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1px;
}
Generation: use brand.json.style.keywords and style.mood as prompt seeds. Generate via the configured image provider (see image-provider-reference.md).
Color chips organized by category:
Each chip:
<div class="color-chip">
<div class="color-swatch" style="background: [HEX]"></div>
<span class="color-name mono">[NAME]</span>
<span class="color-hex mono">[HEX]</span>
</div>
Layout: CSS Grid auto-fill, minmax(160px, 1fr).
Typographic pairing exploration showing why the chosen fonts work together.
Content:
Layout: full-width cards, one per font family. Each card has the font name in mono header, then specimens below.
.font-exploration-card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.font-card-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.font-card-body { padding: 32px 24px; }
.weight-ramp { display: flex; gap: 24px; flex-wrap: wrap; }
.weight-ramp span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.weight-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.charset { font-size: 18px; line-height: 1.8; letter-spacing: 0.02em; word-break: break-all; }
Type showcase — one row per size/weight with:
<div class="type-row">
<span class="type-sample" style="font-family: [FONT]; font-weight: [WEIGHT]; font-size: [SIZE]">
[SAMPLE TEXT]
</span>
<span class="type-meta mono">[FONT] · [WEIGHT] · [SIZE] / [LINE-HEIGHT]</span>
</div>
Show: Display (all sizes from brand.json.typography.scale), Body, Mono.
Parametric SVG construction grid showing the geometric foundation of the logo.
Implementation:
branding/logos/construction-grid.svg exists → embed it inline as <svg> in the HTMLnode "${CLAUDE_PLUGIN_ROOT}/scripts/construction-grid.mjs" \
--width 512 --height 512 \
--ratios "1,1.4,1.5,2.36" \
--primary-color "[brand.json.colors.primary.hex]" \
--output branding/logos/construction-grid.svg
creative-rag.db exists):
bash "${CLAUDE_PLUGIN_ROOT}/scripts/search.sh" "[brand-name]" --category grid --limit 3
Use returned descriptions for ratio calibration and layout reference.SVG embedding: the full SVG is inlined in the HTML (not as <img src>). This ensures the grid scales with the page and layers are inspectable.
Layout: full-width card with dark background (#09090b), SVG centered at max 600px width, mono annotation showing grid dimensions and ratios used.
.construction-grid-card {
background: #09090b;
border: 1px solid var(--border);
border-radius: 12px;
padding: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.construction-grid-card svg { max-width: 600px; width: 100%; height: auto; }
.grid-annotation {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
display: flex;
gap: 24px;
}
Logo protection zone visualization as inline SVG.
Content:
brand.json.logo.safeZone (default: 20% of logo height)Layout: 2-column grid.
.clear-zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.clear-zone-diagram {
background: #09090b;
border: 1px solid var(--border);
border-radius: 12px;
padding: 48px;
display: flex;
justify-content: center;
}
.clear-zone-rules { display: flex; flex-direction: column; gap: 16px; }
.rule-do { border-left: 3px solid var(--emerald, #10b981); padding-left: 16px; }
.rule-dont { border-left: 3px solid var(--rose, #f43f5e); padding-left: 16px; }
SVG structure (simpler than construction grid):
<svg viewBox="0 0 300 300">
<!-- Protection zone (dashed) -->
<rect x="30" y="30" width="240" height="240" fill="none" stroke="[PRIMARY]" stroke-dasharray="6,3" opacity="0.4" />
<!-- Logo area -->
<rect x="60" y="60" width="180" height="180" fill="none" stroke="[PRIMARY]" stroke-width="1.5" />
<!-- Dimension arrows -->
<text x="150" y="22" text-anchor="middle" font-size="10" fill="[MUTED]" font-family="monospace">[SAFE_ZONE]%</text>
</svg>
Real UI mockups (not abstract boxes):
Each mockup = a .card with border, padding, pure CSS code (no images).
The same components as Section 08 but in light mode.
#fafafa or brand.json.colors.surface if lightrgba(0,0,0,0.06)Logo usage rules:
[brand.json.spacing.min_logo_size] (e.g., 16px digital, 10mm print)[brand.json.spacing.protection_zone] (e.g., 25% of height)Layout: 4-column grid with specification cards.
Embedded mockup of a complete landing page using the DA:
A single HTML/CSS block showing the DA applied to a real page.
Include only if brand.json.style.keywords contains "data-driven", "analytics", "dashboard" or similar.
Otherwise, replace with an Imagery & Photography section showing the recommended visual style.
If data-viz:
Contextual mockups showing the brand identity applied to real-world contexts.
RAG enrichment (if creative-rag.db exists):
bash "${CLAUDE_PLUGIN_ROOT}/scripts/search.sh" "[brand-name]" --category mockup --limit 5
Use returned descriptions for layout inspiration and mockup variety.
Mockup types (generate 4-6 as pure CSS/HTML):
| Mockup | Implementation |
|---|---|
| Business card (front + back) | CSS card with logo, name, contact details, brand colors |
| Social media avatar | Circle-cropped logo preview at 64px, 128px, 256px |
| Email signature | HTML table layout with logo + name + title + brand colors |
| App icon on device | Rounded square icon on a dark phone-like frame |
| Browser tab favicon | 16x16 / 32x32 previews in a tab-bar mockup |
| Billboard / signage | Large-scale mockup with logo on dark gradient |
Layout: 3-column masonry-style grid. Each mockup in a .card with dark background.
.applications-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
}
.application-card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.application-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
Buttons: default, hover, active, disabled, loading Inputs: default, focus (primary border), error, disabled Badges: all semantic variants (success, warning, error, info, neutral) Navigation items: default, hover, active (with accent indicator)
Each state must be visible side by side for comparison.
Technical reference for developers:
| Category | Tokens |
|---|---|
| Spacing | Full scale (4, 8, 12, 16, 24, 32, 48, 64, 96, 128) |
| Border Radius | sm, md, lg, xl, 2xl, full |
| Shadows | sm, md, lg, xl |
| Motion | fast (150ms), normal (200ms), slow (300ms) + easing curves |
Each token displayed in a card with visual example + value in mono.
1. Read brand.json from the working directory
2. Extract: name, tagline, colors, typography, spacing, borderRadius, shadows, motion, style
3. If fields are missing → use defaults (documented in brand-json-schema.md)
Convert brand.json.colors to CSS custom properties:
:root {
/* Primary */
--primary-900: [brand.json.colors.primary.violet_900 || brand.json.colors.primary.hex];
--primary-700: [brand.json.colors.primary.violet_700 || adjust(primary, -20%)];
/* ... all shades */
/* Neutral */
--bg: [brand.json.colors.neutral.bg];
--surface: [brand.json.colors.neutral.surface];
--surface-raised: [brand.json.colors.neutral.surface_raised];
--text: [brand.json.colors.neutral.foreground];
--text-secondary: [brand.json.colors.neutral.secondary];
--text-muted: [brand.json.colors.neutral.muted];
/* Accent */
--emerald: [brand.json.colors.accent.emerald || #10b981];
--rose: [brand.json.colors.accent.rose || #f43f5e];
--amber: [brand.json.colors.accent.amber || #f59e0b];
--blue: [brand.json.colors.accent.blue || #3b82f6];
/* Border */
--border: [brand.json.colors.border.default || rgba(255,255,255,0.06)];
--border-hover: [brand.json.colors.border.hover || rgba(255,255,255,0.12)];
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[PRIMARY_FONT]:wght@[WEIGHTS]&family=[MONO_FONT]:wght@[WEIGHTS]&display=swap" rel="stylesheet">
Write a the-[brand-name-slug].html file at the project root or in branding/.
Generation rules:
<style> tag inside <head><img> with relative path to branding/logos/ or base64Based on userConfig.da_sections:
"all" → generate all 16 sections + hero (default)"classic" → generate original 10 sections (00, 01, 03, 05, 08, 09, 10, 11, 12, 14, 15)"01,03,06") → generate only the requested sectionsBased on brand context:
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-primary), system-ui, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.grid-bg {
position: fixed; inset: 0; z-index: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
section { position: relative; z-index: 1; padding: 120px 0; }
.section-number {
font-family: var(--font-mono), monospace;
font-size: 13px;
color: var(--text-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 8px;
}
.section-title {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
margin-bottom: 12px;
}
.section-desc {
color: var(--text-secondary);
font-size: 15px;
max-width: 560px;
}
.card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s;
}
.card:hover { border-color: var(--border-hover); }
.card-header {
padding: 16px 24px;
border-bottom: 1px solid var(--border);
font-family: var(--font-mono), monospace;
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card-body { padding: 24px; }
.palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
}
.color-chip { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.color-swatch { height: 80px; }
.color-info { padding: 12px; }
.color-name { font-size: 13px; display: block; }
.color-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.mono { font-family: var(--font-mono), monospace; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
Before presenting the DA, verify:
brand.json.typographyOutput: the-[brand-name].html with:
This DA is generated in Phase 2.5 of the brand-pipeline, after brand.json validation (Phase 2) and before the React landing page (Phase 3).
The file is saved to branding/the-[name].html.
npx claudepluginhub buldee/claude-creative-studio --plugin claude-creative-studioOffers UI/UX design guidance for web and mobile with 50+ styles, 161 color palettes, 57 font pairings, and 99 UX guidelines across 10 stacks. Use for designing pages, components, color systems, or reviewing UI code.
Mines projects and conversations into a searchable memory palace. Activates on queries about MemPalace, memory palace, mining, searching, palace setup, wings, rooms, drawers, or recalling past work.