# Designer

> Generate a DESIGN.md design system for any project — for people with zero design knowledge. Use when the user starts UI work, says 'design', 'make it look good', 'designer', 'landing page for', 'design system', or mentions components, layouts, colors, fonts, or a site whose look they love.

- Skill: `tariq-himself/designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tariq-himself/designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tariq-himself/designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: Tariq-himself (https://skillmd.com/u/tariq-himself)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tariq-himself/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.