feat: add anti-patterns, design philosophies, advisor mode, asset protocol

CLAUDE.md

@@ -20,6 +20,14 @@ python3 src/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain> [-n <max
 - `landing` - Page structure and CTA strategies
 - `chart` - Chart types and library recommendations
 - `ux` - Best practices and anti-patterns
+- `antipattern` - Generic AI-aesthetic detector (purple gradients, default shadcn, Inter everywhere, etc.) — ported from impeccable + Anthropic frontend-design
+- `philosophy` - 10 design philosophies across 5 schools (Swiss, Brutalist, Editorial, Hara, Maximalism, Aurora, Y2K, Organic, Anti-Design) for advisor mode on vague briefs
+
+**Process docs (read before designing):**
+- `data/asset-protocol.md` - 5-step Core Asset Protocol for branded work
+- `data/advisor-mode.md` - 3-direction protocol for vague briefs
+- `templates/base/DESIGN.md` - per-project design memory (tokens, rules, locked direction)
+- `templates/base/PRODUCT.md` - per-project product memory (audience, voice, constraints)
 
 **Stack search:**
 ```bash

cli/assets/data/advisor-mode.md

@@ -0,0 +1,76 @@
+# Advisor Mode
+
+Adapted from jiji262/claude-design-skill. Prevents the #1 AI-design failure: committing to a direction before the brief is clear.
+
+---
+
+## When to enter advisor mode
+
+Enter advisor mode whenever the brief is **vague, contradictory, or under-specified**. Signals:
+
+- "Make it look modern" / "make it pop" / "make it premium"
+- No reference sites mentioned
+- Conflicting cues (e.g. "minimalist but bold")
+- No audience or product context
+- The user says "surprise me" / "you pick"
+
+If any of those fire, **do not commit**. Switch to advisor mode.
+
+---
+
+## The Advisor Mode protocol
+
+1. **Acknowledge ambiguity.** One sentence. "The brief is open — let me propose 3 directions before we commit."
+
+2. **Propose exactly 3 differentiated directions.** Pull from `design-philosophies.csv`. They must be genuinely different — not three flavors of the same idea. Good triples:
+   - Refined Minimalism vs. Bold Maximalism vs. Editorial Magazine
+   - Swiss Editorial vs. Brutalist Web vs. Organic Hand-Crafted
+   - Aurora/Glass vs. Retro-Futuristic vs. Kenya Hara Minimalism
+
+3. **For each direction, give the user:**
+   - **Name** (e.g. "Refined Minimalism")
+   - **One-line pitch** (what it feels like)
+   - **2 flagship examples** (real sites/products to look at)
+   - **The signature move** (one specific thing they'll notice)
+   - **The risk** (what could go wrong)
+
+4. **Wait.** Do not start designing. The user picks one — or asks for a fourth — before any pixels are committed.
+
+5. **Once chosen:** lock the direction. Document it in `brand-spec.md` or `DESIGN.md`. Reference it in every subsequent decision.
+
+---
+
+## Format for the 3-option response
+
+```markdown
+The brief is open. Three directions worth considering:
+
+### Option A — <Philosophy name>
+- **Feels like:** <one sentence>
+- **Look at:** <example 1>, <example 2>
+- **Signature move:** <one specific decision>
+- **Risk:** <what could go wrong>
+
+### Option B — <Philosophy name>
+...
+
+### Option C — <Philosophy name>
+...
+
+Which direction — or do you want a fourth option?
+```
+
+---
+
+## When NOT to use advisor mode
+
+- The user has named a reference site ("make it like Linear") — treat that as a directive, not a brief
+- The brief is structural (component, refactor, bug fix)
+- The user has already approved a `brand-spec.md` or `DESIGN.md` — work within it
+- The user has said "go fast" or "first pass" — propose one direction and ship
+
+---
+
+## Anti-pattern: over-asking
+
+Advisor mode is for **direction**, not for endless clarification. Three options, one round of questions, then commit. If the user asks you to skip advisor mode, skip it.

cli/assets/data/anti-patterns.csv

@@ -0,0 +1,31 @@
+No,Category,Anti-Pattern,Keywords,Why It's Bad,How to Detect,Better Alternative,Severity,Source,Mode
+1,Color,Purple-to-blue gradient backgrounds,"purple gradient, indigo gradient, AI gradient, generic SaaS","Overused 2020-2025 across every AI startup; signals 'generic AI aesthetic' and erases brand identity","linear-gradient with purple/indigo + blue/cyan stops; #6366f1 → #8b5cf6 → #3b82f6 patterns","Single dominant brand color with one sharp accent; or a deliberately unexpected palette (warm earth, monochrome + neon, duotone)",High,impeccable + frontend-design,both
+2,Color,Gradient text on headlines,"gradient text, background-clip text, rainbow text","Reduces contrast, often fails WCAG AA, dates the design to the 2022 SaaS era","background-clip: text on h1/h2/h3","Solid color with strong type weight; reserve gradients for ornamental marks only",Medium,impeccable,both
+3,Color,Low-contrast gray-on-gray labels,"low contrast, gray on gray, accessibility, wcag fail","Fails WCAG AA (4.5:1); excludes low-vision users; signals lazy design","Foreground / background contrast ratio < 4.5:1 for body, < 3:1 for large text","Test with axe-core or WebAIM contrast checker; raise foreground or darken background until ≥ 4.5:1",Critical,WCAG + impeccable,both
+4,Typography,Default Inter everywhere,"Inter font, default font, generic sans, system font","Most-used webfont 2022-2025; instantly signals 'I used the default'; zero brand differentiation","font-family: 'Inter' on body without an intentional pairing","Pair Inter with a distinctive display font (Fraunces, Instrument Serif, Editorial New); or pick a different sans entirely (Geist, Söhne, Untitled Sans, Aeonik)",High,impeccable + frontend-design,brand
+5,Typography,Geist / Mona Sans / Space Grotesk reflex,"Geist, Mona Sans, Space Grotesk, overused font","2024-2025 default for every Next.js/Vercel-adjacent project; commoditized","font-family includes Geist, Mona Sans, or Space Grotesk without a distinctive pairing","Use a less-saturated alternative: Söhne, Aeonik, Basier, Suisse, GT America, or a free Google Font like Manrope/DM Sans/Onest",Medium,impeccable,brand
+6,Typography,Fraunces as body font,"Fraunces body, serif body overuse","Fraunces is a display face; using it for body kills readability and is a 2024 cliché","font-family on p/li/body includes Fraunces","Keep Fraunces for display headlines only; pair with a clean sans or geometric serif for body",Medium,impeccable,brand
+7,Layout,Nested cards inside cards,"nested card, card-in-card, layered card, russian doll card","Visual noise; redundant elevation; signals 'I wrapped everything in shadcn Card'","Card component containing another Card with its own border/shadow","Flatten: use one card with internal dividers, or remove the inner card entirely",Medium,impeccable,product
+8,Layout,Side-stripe accent borders on cards,"left border accent, side stripe, accent bar, ribbon border","Tutorial-blog cliché 2018-2024; reads as decorative not informative","border-left: 4px solid <accent> on Card or Alert without semantic meaning","Use a meaningful icon, a tag, or solid background tint to signal status — don't decorate",Low,impeccable,product
+9,Layout,Thick-border accent cards,"thick border, accent card, decorative border","Adds weight without information; usually masks a layout that lacks hierarchy","border: 3px+ on container with bright color and no semantic meaning","Increase typographic hierarchy and spacing instead; reserve thick borders for genuinely active or selected states",Low,impeccable,product
+10,Layout,Predictable hero / 3-column / testimonial / CTA stack,"generic landing, default landing, AI landing page, hero + 3 columns","The 'AI landing page' shape: hero → 3-feature grid → testimonials → pricing → CTA. Looks identical to 10,000 other sites","Section order matches the boilerplate without intentional deviation","Break the grid: asymmetric hero, marquee, scroll-triggered story, an unusual section ordering, or a single-page manifesto layout",High,frontend-design,brand
+11,Spacing,Cramped vertical rhythm,"tight spacing, cramped, no breathing room, dense","Sub-32px section padding on landing pages; everything feels rushed; reads as low-budget","section padding < 64px on desktop, < 32px on mobile","Use 96-160px section padding on desktop, 48-80px on mobile; let content breathe",Medium,frontend-design,brand
+12,Motion,Animation everywhere,"over-animated, motion overload, fade-in everything","Every element fades/slides in on scroll; cumulative effect feels chaotic and slow","scroll-triggered animation on > 30% of components per page","Reserve motion for hero entry, key reveals, and interaction feedback; static is fine",Medium,frontend-design + design-motion,both
+13,Motion,No motion at all,"static design, no animation, lifeless","On a brand or marketing page, total absence of motion reads as cheap or unfinished","Zero transition, zero hover effect, zero scroll reveal","Add at least: button hover (150-200ms), one orchestrated hero entrance, one delight micro-interaction",Low,frontend-design,brand
+14,Motion,Default 300ms ease everywhere,"default transition, generic easing, ease-in-out everywhere","Browser-default cubic-bezier reads as untuned; nothing feels considered","transition: all 300ms ease on every interactive element","Use intentional curves: cubic-bezier(0.16, 1, 0.3, 1) for entries, cubic-bezier(0.7, 0, 0.84, 0) for exits; vary duration 120-450ms by purpose",Low,design-motion-principles,both
+15,Component,shadcn defaults left untouched,"default shadcn, untouched components, factory shadcn","Out-of-the-box shadcn looks identical across thousands of sites; commoditizes the brand","Components match shadcn defaults: same radius, same border, same shadow, same neutral","Theme aggressively: change radius, border weight, shadow language, font, accent — make it yours",High,impeccable,brand
+16,Component,Default Tailwind grays,"slate-500, gray-500, zinc-500, default tailwind","Slate/zinc/gray defaults read as 'I didn't pick a palette'","Foreground or background uses default Tailwind gray scale without semantic mapping","Define a semantic palette in CSS variables (--bg, --fg, --muted, --accent) and never reference raw Tailwind grays in components",Medium,impeccable,both
+17,Imagery,Stock photo of laptop on white desk,"stock photo, generic stock, laptop on desk, handshake photo","Signals zero art direction; the visual equivalent of lorem ipsum","Hero image is a generic stock photo (Unsplash top results, Shutterstock filler)","Custom illustration, real product UI, branded photography, or a strong typographic hero with no image at all",High,frontend-design,brand
+18,Imagery,3D blob / abstract gradient blob,"3D blob, gradient blob, abstract shape, generic illustration","Used by every Web3/SaaS/AI site 2021-2024; reads as filler","SVG with random bezier curves and a purple/blue gradient fill","Branded illustration, isometric line art, real product screenshots, or a dramatic typographic statement",Medium,frontend-design,brand
+19,Imagery,Fake 'real-time' dashboard mockup,"fake dashboard, mockup screenshot, dummy data","Numbers don't tell a story; readers smell that it's fake","Dashboard hero with charts that show no clear trend or insight","Use real anonymized data with a clear narrative; or stylize so heavily it's clearly illustrative",Low,frontend-design,brand
+20,Voice,Vague founder copy,"we believe, we're on a mission, change the world","Generic mission-statement copy that any company could publish","Hero or About section uses 'we believe', 'we're on a mission', 'change the world', 'reimagine'","Lead with a specific user problem and a specific outcome; cite a concrete number or moment",Medium,frontend-design,brand
+21,Voice,AI assistant tone in product UI,"as an AI, I'd love to help, certainly!, I understand","Reads as ChatGPT-flavored; sterile, sycophantic, untrustworthy","Strings include 'as an AI', 'I'd love to help', 'Certainly!', 'I understand', 'Great question'","Plain direct voice: 'Done.', 'Try this.', 'Here it is.' Match the user's register",Medium,impeccable,product
+22,A11y,No focus-visible styles,"missing focus, no outline, focus invisible, keyboard nav","Keyboard users can't see where they are; WCAG 2.1.1 / 2.4.7 fail","outline: none on :focus without :focus-visible replacement","Provide a clear :focus-visible ring (≥ 2px, ≥ 3:1 contrast), distinct from hover",Critical,WCAG + impeccable,both
+23,A11y,Click handler on a div,"div onclick, div click handler, no semantic","Not focusable, not announced to screen readers, not keyboard-accessible","<div onClick=...> or <span onClick=...> without role/tabindex/keyboard","Use a real <button> or <a>; if you must use div, add role='button', tabindex='0', and keyboard handlers",Critical,WCAG + impeccable,both
+24,A11y,Placeholder as label,"placeholder label, no label, missing label","Disappears on input; fails screen readers; bad UX for everyone","<input placeholder='Email'> with no associated <label>","Visible label above or floating; placeholder for example/format hint only",High,impeccable,product
+25,A11y,Tiny tap targets,"small button, tiny tap target, finger size","Buttons < 44×44px on mobile fail Apple HIG and WCAG 2.5.5","Interactive element with bounding box < 44px on touch","Minimum 44×44px (iOS) or 48×48dp (Android); generous padding even when icon-only",High,iOS HIG + WCAG,both
+26,Performance,Animating layout properties,"animating width, animating height, layout thrash","Triggers layout/paint on every frame; janky on low-end devices","CSS transition includes width, height, top, left, margin","Animate transform and opacity only; use will-change sparingly",Medium,Web Performance,both
+27,Performance,Hero image not optimized,"unoptimized image, no webp, no avif, large hero","6MB hero PNG; LCP > 4s; mobile users bounce","Hero <img> serves uncompressed PNG/JPG without responsive srcset","Serve AVIF/WebP with PNG fallback, responsive srcset, width/height attrs to prevent CLS",High,Core Web Vitals,both
+28,Branding,Logo without spacing rules,"logo crowded, logo no clear space, logo squeezed","Logo placed flush against text or other elements; brand looks careless","Logo bounding box has < 1× cap-height of clear space on all sides","Define and enforce minimum clear space = height of one letterform on all four sides",Medium,Brand systems,brand
+29,Branding,Multiple logo variants competing,"logo lockup confusion, multiple wordmarks, logo soup","Header has wordmark, favicon, and a third icon — all different","Page renders 2+ visually distinct brand marks","Pick one primary lockup; secondary marks (favicon, app icon) should be derivatives, not redesigns",Medium,Brand systems,brand
+30,Layout,Center-everything alignment,"all centered, lazy alignment, no hierarchy","Everything centered = no hierarchy; eye has nowhere to land","Hero, sections, and cards all use text-align: center","Use left-align for body, reserve center for short statements; combine with intentional asymmetry",Low,frontend-design,brand

cli/assets/data/asset-protocol.md

@@ -0,0 +1,125 @@
+# Core Asset Protocol
+
+A 5-step hard flow for any branded design work. Adapted from jiji262/claude-design-skill.
+
+The principle: **logos, product shots, and UI screenshots are first-class design inputs — not colors-and-fonts-only afterthoughts.** Skipping this step is the #1 reason "AI design" looks generic.
+
+Run this protocol BEFORE picking a style, palette, or font. If you skip a step, write down why.
+
+---
+
+## Step 0 — Fact Verification (Priority #0)
+
+Before assuming anything about a named product, brand, person, or company:
+
+- Run a WebSearch for the exact name.
+- Confirm: what they actually do, who their audience is, any visual identity already in market.
+- 10 seconds of search beats 1–2 hours of redoing work on wrong premises.
+
+**Skip only if:** the brief is for a fictional / unnamed / greenfield product.
+
+---
+
+## Step 1 — Logo Acquisition
+
+Hunt for the canonical logo before anything else.
+
+- Ask the user: "Do you have a logo file? SVG preferred, PNG with transparency acceptable."
+- If no logo exists yet: flag it. The design direction will inform the logo, not the other way around. Don't fake it with text-only.
+- If the logo exists but isn't shared: search the brand's site/press kit (`/press`, `/brand`, `/about`, footer links).
+- Capture: primary mark, wordmark, monogram/favicon, any approved color variants (light bg, dark bg, monochrome).
+
+**Save to:** `assets/logo/` with files named `logo-primary.svg`, `logo-mono-light.svg`, `logo-mono-dark.svg`, `favicon.svg`.
+
+---
+
+## Step 2 — Product Shots
+
+Real product imagery beats stock photos and 3D blobs every time.
+
+- Ask: "Can you share product photography, UI screenshots, or rendered mockups?"
+- If the product is physical: request 3 angles minimum (front, 3/4, detail).
+- If the product is software: capture the actual UI in 3 states (empty, populated, edge case).
+- If neither exists: schedule a "shot list" task. Do not substitute with stock. Do not substitute with a 3D abstract blob gradient.
+
+**Save to:** `assets/product/` with descriptive filenames (`product-hero-3q.jpg`, `dashboard-empty-state.png`).
+
+---
+
+## Step 3 — UI Screenshots & Reference
+
+Reference is research, not theft.
+
+- Ask the user: "Show me 3-5 sites/apps you admire — and 1-2 you specifically don't want to look like."
+- For each reference, capture: full-page screenshot, hero crop, type detail, color sample.
+- Don't copy. Identify the specific moves you want to borrow (a typographic decision, a motion idea, a layout ratio) — never a whole composition.
+
+**Save to:** `assets/reference/admire/` and `assets/reference/avoid/`.
+
+---
+
+## Step 4 — Brand Tokens
+
+Only after assets are gathered, formalize tokens.
+
+- Pull dominant and accent colors directly from the logo and product shots — don't invent.
+- Identify the type voice: serif/sans/mono? Geometric/humanist/grotesque?
+- If the brand has guidelines, use them. If not, propose 2-3 token options and let the user pick.
+- Output: `brand-spec.md` (see step 5).
+
+---
+
+## Step 5 — brand-spec.md
+
+Write a single source of truth before touching code.
+
+```markdown
+# brand-spec.md
+
+## Brand identity
+- Name: <brand>
+- Tagline: <one sentence>
+- Audience: <who buys / uses>
+- Tone: <3 adjectives>
+- What they're NOT: <2-3 anti-positions>
+
+## Logo
+- Primary: <path>
+- Variants: <paths>
+- Clear space: <rule>
+- Minimum size: <rule>
+
+## Color
+- Primary: #<hex> (named)
+- Accent: #<hex>
+- Neutral scale: bg / fg / muted / border
+- Destructive: #<hex>
+- Mode: light / dark / both
+
+## Typography
+- Display: <font + weight>
+- Body: <font + weight>
+- Mono: <font + weight>
+- Scale: <ratio + base>
+
+## Voice rules
+- Always say: <list>
+- Never say: <list>
+
+## Asset inventory
+- Logos: <list>
+- Product shots: <list>
+- Reference (admire): <list>
+- Reference (avoid): <list>
+```
+
+---
+
+## When to skip the protocol
+
+Skip only if:
+- The brief is purely structural (e.g., "extract this component to a hook")
+- The user explicitly says "no brand work, just code"
+- The artifact is throwaway (sketch, internal demo)
+
+Otherwise: run the protocol. Skipping it is the gap between AI design and considered design.