Designer

Designer — Zero-Knowledge Design Phase

Produces a DESIGN.md in the project root: a plain-text design contract (Google Stitch format) that any AI agent reads to generate visually consistent UI. Works for ANY product type — SaaS, stores, restaurants, portfolios, fintech, anything.

<INPUT> = the project/page description from $ARGUMENTS or conversation.

Stage 1 — Understand the request

Extract silently (don't ask yet): product type/industry, target audience, page type (landing/dashboard/store...), tech stack if mentioned.

Stage 2 — Three simple questions (no jargon)

Ask ONE batch, options labeled "(Recommended)" where applicable:

1. Feeling — 4 mood options mapped to real style families, e.g.:
   • "Clean & trustworthy (Recommended)" → minimalism / corporate clarity
   • "Bold & energetic" → brutalism / vivid accents
   • "Premium & luxurious" → editorial / dark elegance
   • "Warm & friendly" → soft UI / rounded organic
2. Reference — "Any website whose look you love? (paste URL or name, or skip)"
3. Light or dark — with a recommendation based on product type (e.g., dev tools → dark).

If reference URL given: WebFetch it and note its palette/type/layout as secondary input.

Stage 3 — Design intelligence (hybrid)

Path A — ui-ux-pro-max installed?

Look for ui-ux-pro-max/scripts/search.py under: .claude/skills/, .opencode/skills/, .config/opencode/skills/, ~/.claude/skills/. If found, run:

python3 <path>/search.py "<product type keywords> <feeling keywords>" --design-system -p "<Project Name>"

(Use python instead of python3 on Windows.) This returns an industry-matched design system: landing pattern, style family, color palette, typography pairing, key effects, anti-patterns to avoid.

Path B — fallback: awesome-design-md catalog

If ui-ux-pro-max is NOT installed:

1. Fetch the catalog: https://github.com/VoltAgent/awesome-design-md (design-md/ folder) via GitHub API or webfetch.
2. Pick the closest match by industry/feel (e.g., e-commerce → Shopify/Airbnb; dev tool → Vercel/Linear; fintech → Stripe).
3. Fetch raw: https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<name>/DESIGN.md
4. Use it as the BASE — then adapt palette accents and typography to the user's answers in Stage 2 so it isn't a clone.

Neither available offline? Ask the model itself

Generate the design system from first principles using the Stitch DESIGN.md section structure below.

Stage 4 — Write DESIGN.md

Write <project-root>/DESIGN.md covering these sections (merge sources from Stage 3):

1. Visual Theme & Atmosphere — mood, density, philosophy
2. Color Palette & Roles — semantic name + hex + functional role (primary/secondary/CTA/background/text)
3. Typography Rules — font families + full hierarchy table + Google Fonts import link
4. Component Stylings — buttons, cards, inputs, navigation with hover/focus/disabled states
5. Layout Principles — spacing scale, grid, whitespace rules
6. Depth & Elevation — shadow system, surface hierarchy
7. Do's and Don'ts — guardrails + anti-patterns for this industry
8. Responsive Behavior — breakpoints, touch targets, collapsing strategy
9. Agent Prompt Guide — quick color reference + ready-to-use prompts

Stage 5 — Pre-delivery checklist

Report pass/fail on: text contrast ≥ 4.5:1 · visible focus states · touch targets ≥ 44px · responsive at 375/768/1024/1440px · no emojis-as-icons (specify SVG icon set) · reduced-motion respected.

Stage 6 — Hand-off

End with exactly:

DESIGN.md created. Say "build the homepage" (or any UI request) — safe-build will read this file and implement reversibly. Want changes? Just describe them ("warmer colors", "bigger headings").

Hard rules

• Never use designer jargon without a plain-language gloss ("kerning (letter spacing)").
• Never skip Stage 2 unless the user already specified feeling + reference + light/dark.
• If adapting a DESIGN.md from the catalog, say which one inspired it — never present it as original.
• The output artifact is ALWAYS a DESIGN.md file — not just chat advice.