| name | inspo-brand-builder |
| description | Turn design inspiration images + app context into a custom brand identity and polished HTML sections via an iterative loop. Trigger whenever a user uploads reference images alongside an app description and wants a hero, landing page section, or brand guidelines — even casual phrasing like "here are some inspo images", "design my hero based on these", "match this aesthetic", or "create brand guidelines from these images" qualifies. Analyzes images for visual DNA, generates custom brand guidelines, builds production-quality HTML, then iterates until the user approves and locks in a DESIGN.md. Trigger proactively any time images are uploaded with any hint of designing an app — do not wait for an explicit request.
|
Inspo Brand Builder
Turn inspiration images + app context into a custom brand identity and production-quality HTML sections. Iterate until the user loves the result, then lock in a complete DESIGN.md.
Phase 0 — Gather Context
Confirm you have all three before proceeding:
- Inspiration images — at least one uploaded image (mood boards, UI screenshots, color palettes, photography, anything visually inspiring)
- App context — what the app does, who it's for, what tone is desired
- Sections requested — which section(s) to build (default: hero)
If any are missing, ask one targeted question at a time:
- No images → "Could you upload some inspiration images? Anything works — UI screenshots, color palettes, photography, or designs you admire."
- No app context → "Tell me about your app — what does it do, who uses it, and what feeling should it have?"
- No sections specified → assume hero section; confirm after presenting
Do not proceed until images and app context are confirmed.
Phase 1 — Full Inspiration Extraction
Analyze the inspiration image(s) across two parallel layers: Visual DNA (how it feels) and Layout DNA (how it's structured). Both layers directly shape Phase 3. Do not skip layout analysis even for mood boards or photography — infer structural intent from what's present.
1A — Visual DNA
Color Signals
- Background tone: dark / light / midtone
- 3–6 specific hex colors visible or implied
- Accent / highlight color(s)
- Temperature: warm / cool / neutral
- Saturation: muted / vibrant / pastel / neon
Typography Signals
- Dominant feeling: serif / sans-serif / display / mixed
- Display personality: editorial, geometric, humanist, slab, experimental
- Weight character: thin/light vs bold/heavy dominant
- Letter-spacing vibe: tight / open
Mood & Personality
- 3–5 adjectives describing the images (minimal, editorial, cinematic, raw, playful, clinical, luxe, etc.)
- Design era / influence: Swiss/International, Bauhaus, Y2K, brutalist, Material, Fluent, Apple HIG
- Energy level: calm / energetic / intense
- Premium vs. approachable
Visual Language
- Key motifs or shapes: geometric, organic, grid-heavy, diagonal, overlapping, flowing
- Texture: grainy, glossy, flat, glassmorphic, noise-layered
- Spatial rhythm: dense vs. airy
1B — Layout & Structure DNA
Extract the structural skeleton from the images. If an image is a UI screenshot, read it literally. If it is a mood board, photography, or abstract reference, infer the structural intent (e.g. a wide landscape photo with subject on the left implies a split composition).
Navigation Anatomy
- Position: top bar / side nav / floating / hidden / bottom / none visible
- Style: transparent / solid / sticky / blurred backdrop
- Content: logo placement, link alignment, CTA in nav, avatar/profile
Compositional Structure
- Dominant layout type: centered mass / left-anchored / right-anchored / split-screen / full-bleed / diagonal flow / asymmetric / grid-first
- Visual gravity: where does the eye land first, second, third?
- Balance: symmetric / asymmetric / radial
- Negative space use: generous breathing room vs. controlled density
Content Hierarchy
- How many levels of visual hierarchy are visible (headline / sub / body / meta)?
- What carries the most visual weight (type, image, color block, white space)?
- Is text overlaid on imagery, separated from it, or used as the visual element itself?
Section Patterns (for each section visible in the images)
- Hero: eyebrow + headline + sub + CTA stack? Split text/image? Full-bleed image with text overlay? Centered? Offset?
- Features: card grid / icon list / alternating rows / horizontal scroll / tabbed?
- General: how are sections separated (whitespace, color, divider, overlap)?
Grid Signals
- Estimated columns: 1 / 2 / 3 / 4 / 12-col grid
- Gutter character: tight (8-12px) / standard (16-24px) / generous (32-48px)
- Max-width feel: full-bleed / contained (1200px range) / narrow editorial (800px range)
- Alignment: strict grid / grid-breaking / freeform
Spacing Character
- Overall density: tight and dense / balanced / airy and spacious
- Section padding: compact / standard / generous
- Internal component spacing: tight / comfortable
Component Placement Patterns
- Where do CTAs live? (inline in hero / floating / sticky / end of sections)
- How does imagery relate to text? (beside / behind / below / overlapping)
- Are there layered / overlapping elements or strict separation?
- Any decorative elements? (floating blobs, geometric shapes, lines, gradients, illustrations)
Wireframe Sketch
Produce a rough ASCII wireframe of the primary layout observed across the images. If multiple images show different sections, combine them into one unified sketch:
+--------------------------------------+
| NAV: Logo Links CTA |
+--------------------------------------+
| |
| [describe hero composition here] |
| |
+--------------------------------------+
| [describe next section if visible] |
+--------------------------------------+
This wireframe becomes the structural blueprint Phase 3 builds from.
Phase 2 — Custom Brand Guidelines
Using Visual DNA from Phase 1 and the app context, generate a custom brand identity for the user's app — not a generic template, but a system that could only belong to this specific product.
Present the brand guidelines in this format:
╔══════════════════════════════════════════════════════════╗
║ [APP NAME] — BRAND GUIDELINES ║
║ Direction: [Aesthetic Archetype Name] ║
╠══════════════════════════════════════════════════════════╣
║ PERSONALITY ║
║ [3–5 brand traits derived from images + app context] ║
╠══════════════════════════════════════════════════════════╣
║ COLOR PALETTE ║
║ Primary: #XXXXXX — [role: base bg or dominant text] ║
║ Secondary: #XXXXXX — [role: surfaces, subtle bg] ║
║ Accent: #XXXXXX — [role: CTAs, highlights, focus] ║
║ Text: #XXXXXX — [role: primary body copy] ║
║ Muted: #XXXXXX — [role: secondary text, icons] ║
║ Border: #XXXXXX — [role: dividers, strokes] ║
╠══════════════════════════════════════════════════════════╣
║ TYPOGRAPHY ║
║ Display: [Font Name] — [weight used for headlines] ║
║ Body: [Font Name] — [weight used for body text] ║
║ Mono: [Font Name, if applicable] ║
╠══════════════════════════════════════════════════════════╣
║ VISUAL LANGUAGE ║
║ [2–3 sentences: what makes this design distinctive, ║
║ how it reflects the images, and what sets it apart] ║
╠══════════════════════════════════════════════════════════╣
║ DESIGN RULES ║
║ • [rule 1 — e.g. "Corners: sharp 0px radius"] ║
║ • [rule 2 — e.g. "Motion: fast, no bounce"] ║
║ • [rule 3 — e.g. "Never mix more than 2 type families"]║
╠══════════════════════════════════════════════════════════╣
║ LAYOUT BLUEPRINT ║
║ Composition: [centered / split / asymmetric / etc.] ║
║ Nav: [top bar / transparent / sticky / etc.] ║
║ Grid: [e.g. 12-col, 24px gutter, 1200px max] ║
║ Spacing: [tight / balanced / airy] ║
║ Key pattern: [e.g. "headline left, image overlaps ║
║ right edge; CTA floats below fold"] ║
╚══════════════════════════════════════════════════════════╝
Choose font names that are available on Google Fonts. Avoid Inter, Roboto, Arial, system-ui, and other overused defaults.
Phase 3 — HTML Section Generation
Using the brand guidelines from Phase 2 and the Layout DNA from Phase 1B, generate production-quality HTML for each requested section.
Layout-First Principle
Before writing any code, map the structural blueprint:
- Start from the wireframe sketch produced in Phase 1B
- Identify the compositional structure (split-screen? centered? asymmetric?)
- Apply the grid signals (columns, gutter, max-width) as the CSS layout foundation
- Replicate the navigation anatomy observed (position, style, content arrangement)
- Honor the spacing character (dense vs. airy) in section padding and component gaps
- Place CTAs where the inspiration images placed emphasis — not just "below the fold"
- Carry over any distinctive placement patterns (overlapping elements, diagonal breaks, text-over-image)
The HTML layout structure should feel like it was directly inspired by the images, not just sharing their color palette.
Code Standards
- Single self-contained HTML file —
<style> and <script> embedded inline
- Google Fonts imported via
<link> in <head>
- All brand tokens defined as CSS custom properties in
:root
- At least one well-orchestrated entrance animation (staggered
animation-delay)
- No external dependencies except Google Fonts
Responsive Design Mandate
Reference: reference/responsive-design.md — read it before writing any layout code.
Production-grade responsive design uses three layers simultaneously — never only breakpoints:
| Layer | Tool | Purpose |
|---|
| Intrinsic | clamp(), fr, minmax() | Fluid text, spacing, and grids — zero breakpoints needed |
| Device-Agnostic | Container Queries | Components adapt to their container, not the global viewport |
| Mobile-First Fallback | min-width media queries | Structural overrides only when intrinsic sizing can't do the job |
Required in every section generated:
1. Fluid sizing with clamp() for all font sizes and spacing:
:root {
--fs-display: clamp(2.5rem, 7vw, 6rem);
--fs-headline: clamp(1.75rem, 4vw, 3.5rem);
--fs-body: clamp(1rem, 1.25vw, 1.125rem);
--space-section: clamp(4rem, 10vw, 8rem);
--space-gap: clamp(1rem, 3vw, 2.5rem);
--max-width: min(1200px, 90vw);
}
2. Intrinsic fluid grids (no breakpoints for column count):
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: var(--space-gap);
}
3. Container query on any reusable component:
.component-wrapper { container-type: inline-size; }
@container (min-width: 600px) {
.hero-content { display: grid; grid-template-columns: 1fr 1fr; }
}
@supports not (container-type: inline-size) {
@media (min-width: 600px) {
.hero-content { display: grid; grid-template-columns: 1fr 1fr; }
}
}
4. CLS prevention on all images:
.image-wrapper { aspect-ratio: 16/9; overflow: hidden; width: 100%; }
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
5. User preference queries — mandatory in every file:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-color-scheme: dark) { :root { } }
@media (pointer: coarse) {
.btn, nav a, button { min-height: 44px; padding: 12px 20px; }
}
@media (hover: hover) {
.card:hover { transform: translateY(-4px); }
}
6. Anti-Mix Law for CSS variables:
Never hardcode a hex, rem, or px value that is also declared as a CSS variable. All color and spacing usage must go through var(--token-name).
7. Images — LCP vs. below-fold rules:
- LCP/hero image →
loading="eager" + fetchpriority="high" + explicit width/height
- All other images →
loading="lazy" + decoding="async" + explicit width/height
- Art direction (different crop per screen) → use
<picture> with <source media="...">
8. Logical properties for internationalisation:
Use margin-inline, margin-block, padding-inline, padding-block, border-block-end over their physical equivalents.
Design Quality Bar
Before writing a line of code, commit to a bold aesthetic direction and execute it with precision.
Must-haves:
- Typography: Distinctive, characterful font pairing that matches the brand guidelines
- Color: Dominant palette from Phase 2 — clear hierarchy, not evenly distributed
- Motion: Staggered load animation + purposeful hover states on interactive elements
- Layout: Unexpected composition — asymmetry, overlap, diagonal accents, or dramatic negative space
- Background: Atmosphere over flat color — gradient mesh, noise overlay, geometric decoration, or layered depth
- Detail: Custom CTA button style, precise spacing, micro-interactions that feel designed
Hard avoids:
- Purple gradients on white backgrounds
- Generic card grids with shadows and rounded corners
- Standard SaaS "hero with mockup on the right" layout
- Inter, Roboto, Arial, system fonts
- Predictable layouts that lack visual identity
The HTML should look like it could appear on Awwwards or Mobbin.
Section Templates (build whichever are requested)
Hero (default):
- Full viewport height (
100svh)
- Headline + sub-headline + CTA(s)
- Background treatment matching brand visual language
- Decorative element reflecting brand motifs
- Optional: animated element, subtle particle field, or typographic decoration
Features:
- 3–6 feature items with icon/illustration and description
- Grid or alternating-row layout with visual rhythm
- Section eyebrow + headline
Pricing:
- 2–3 tiers, highlighted recommended tier
- Feature list per tier, clear CTA per tier
Testimonials / Social Proof:
- Quote cards or marquee strip
- Avatar + name + title attribution
CTA / Conversion:
- Bold full-width section
- Single sharp CTA button
- Supporting copy — minimal
Footer:
- Logo, navigation, social links
- Newsletter input (optional)
- Legal / copyright line
Phase 4 — Review Prompt
After presenting brand guidelines + HTML, always end with:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Design Direction: [Aesthetic Archetype Name]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
What would you like to do?
"I like it" or "that's the one"
→ I'll generate your complete DESIGN.md
Tell me what to change (colors, fonts, layout, mood...)
→ I'll revise this direction
"Try something different" or "start over"
→ I'll explore a completely new aesthetic archetype
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Phase 5 — Iteration Loop
Partial revision (user wants specific changes):
- Keep the same Visual DNA extraction
- Adjust only what the user specified
- Note what changed at the top: "Updated: [what changed and why]"
- Regenerate brand guidelines + HTML
Full aesthetic reset (user wants something different):
- Return to Phase 1 and pick a new aesthetic archetype — nothing should carry over except app context
- Explicitly contrast old vs. new at the top:
── Iteration [N] ─────────────────────────────
Previously: [Old Archetype] — [brief descriptor]
Now trying: [New Archetype] — [brief descriptor]
What's different: [2–3 sentences]
──────────────────────────────────────────────
Never repeat an aesthetic archetype within the same session.
Phase 6 — DESIGN.md (on approval only)
When the user says "I like it", "looks good", "that's it", "approved", "yes", "perfect", or any clear affirmation:
Apply the design-md-from-image skill's full 16-layer extraction protocol to the approved brand guidelines and HTML code as the design source.
Extract all layers:
- Brand Impression →
## Overview
- Color System →
## Colors + YAML colors:
- Gradients →
## Gradients + YAML gradients:
- Typography System →
## Typography + YAML typography:
- Spacing Scale →
## Layout + YAML spacing:
- Grid System →
## Grid + YAML grid:
- Shadows & Elevation →
## Elevation & Depth + YAML shadows:
- Border System →
## Borders + YAML borders:
- Opacity Scale →
## Opacity + YAML opacity:
- Z-Index Scale → YAML
z-index:
- Border Radius →
## Shapes + YAML rounded:
- Motion Tokens →
## Motion + YAML motion:
- Icon System →
## Icons (prose)
- Layout Structure →
## Layout Structure + ASCII wireframe
- Component Deep Extraction →
## Components + YAML components:
- Dark/Light Mode →
## Color Schemes + YAML (if both modes exist)
Save as DESIGN.md and present to the user via present_files.
Aesthetic Archetype Library
Draw from these when choosing a direction. Never repeat within a session. Feel free to invent new archetypes that better fit the images.
| Archetype | Feeling | Type Character | Color Character |
|---|
| Dark Editorial | Cinematic, serious | Display serif + light sans | Near-black bg, off-white text, warm accent |
| Warm Brutalism | Raw, honest, bold | Heavy grotesque + mono | Sand, terracotta, ink black |
| Neon Clarity | Electric, sharp | Geometric sans | Deep navy/black bg, neon accent |
| Soft Systems | Calm, trustworthy | Rounded sans | Pale blue, cloud gray, soft teal |
| Cold Precision | Surgical, premium | Condensed sans + mono | White/platinum, steel, cold blue accent |
| Organic Flow | Human, creative | Humanist serif | Earth, botanical green, warm beige |
| Retro Futurism | Nostalgic + forward | Display slab + mono | Aged cream, muted gold, space black |
| Glass Noir | Luxe, dark, layered | Thin serif + geometric | Black, charcoal, chrome, jewel accent |
| Playful Dense | Energetic, fun | Display rounded + bold | Saturated multi-color, bold contrast |
| Swiss Minimal | Rational, austere | Grotesque (not Inter) | Pure white, black, single strong accent |
| Ink & Paper | Editorial, literary | Classic serif | Cream, deep ink, muted sepia |
| Cyber Industrial | Techy, raw | Mono + stencil | Dark steel, electric, safety orange |
Self-Review Checklist (run before presenting HTML)
Visual fidelity
Layout fidelity
Responsive — Intrinsic Sizing
Responsive — Layout
Responsive — Images
Responsive — Preferences & Accessibility
Responsive — Maintainability
Overall quality
