Perfect UI — Cohesive Web-Page Designer

Design and ship web pages where every visual element — icons, illustrations, 3D, copy, layout, motion — shares one coherent vibe. Built to avoid AI slop through curated direction, custom icons (zero emoji, zero icon libraries), and bespoke visuals. Landing pages and portfolios get rich type-specific treatment; every other page type uses a generic anatomy with the same universal craft toolkit.

Scope

This skill applies to any web page output — single-page sites, multi-section landings, content pages, portfolios, internal app surfaces. No refusals.

Two-tier treatment

Universal toolkit (both tiers)

Vibe lock + palette + typography + custom SVG icons + 2D illustrations + visual effects + motion intensity scale. All apply regardless of tier.

What this skill does NOT directly produce

• Backend APIs, auth flows, payment integration (out of UI scope)
• Raw Figma file generation
• Full app frontends with complex client-side routing, state machines, deep IA — perfect-ui still builds the visible page surface, but for app architecture see § Beyond perfect-ui for a general frontend engineering workflow

For these, perfect-ui suggests companion skills via § Beyond perfect-ui — it does not refuse.

When to Trigger

Activate whenever user input matches any of these:

• Landing (special tier): "design a landing page", "build me a landing", "marketing page for [product]", "hero section", "splash page", "sales page", "redesign this landing"
• Portfolio (special tier): "design my portfolio", "build a portfolio", "personal site for [name]", "work showcase", "hire-me page", "redesign my portfolio"
• Generic (any other page type): "design my pricing page", "build a blog landing", "create an about page", "design a contact page / coming-soon / waitlist", "design a 404 / error page", "design a dashboard for my [tool]", "build an admin panel", "design a product catalog / storefront page", or any free-text page-type description
• URL or screenshot of an existing site (mode = redesign — applies to any tier)

If user says only "design a website" or "build a site" → ask via AskUserQuestion with the expanded Page Type options (see references/workflow-phases.md § Phase 0.5 Step 3). The skill no longer refuses any type — for app-surface types (dashboard / admin / e-commerce / full app) it logs an evidence-base disclosure and proceeds with the universal craft toolkit.

Hard Rules (Non-Negotiable)

1. NO emoji anywhere — regardless of page type — not in copy, not in headings, not as icons. Use a custom SVG from this skill's icon pipeline. Applies to landing, portfolio, dashboard, admin, e-commerce, blog, about, pricing, contact, legal, error pages, anything.
2. NO icon libraries — no Lucide, Heroicons, Phosphor, Tabler, Font Awesome, Material Icons. Every icon is custom-designed for this site's vibe.
3. NO AI slop defaults — no Inter font alone, no purple/blue gradient hero (marketing-only rule but watch for it leaking into generic tier), no centered 3-card feature row, no "Elevate / Seamless / Unleash" copy in headlines, no "Hi, I'm X, a passionate designer who loves coffee" portfolio cliché, no fabricated metrics / testimonials / logos / case-study counts — use em-dash placeholder (— metric to confirm) when user doesn't supply data, OR pick a different macrostructure, OR refuse the section entirely. Hero H1 line count per vibe (universal 4+ ban), no meta-label headers ("SECTION 01" / "CHAPTER THREE"), no hero filler text ("Scroll to explore" / "Swipe down"). Tier-filtered per § Applicability Matrix — see references/anti-slop-rules.md § Honest Copy Mandate.
4. NO AI-generated 3D models as hero subject — no rotating product GLB, no AI-generated 3D character, no GLTF showcase. 2D illustration is the default. Static 3D renders (Blender/Spline export → PNG) are 2D images, allowed. User-provided real-product GLB allowed only with logged override.
5. 3D = effects only — Phase 5 (Visual Effect Layer) is for shaders, particles, atmospheric layers. Geometry exists as canvas for shader, not as visible "model". CSS first, WebGL only when CSS can't.
6. Always propose Visual Effect Layer — every page gets the proposal. User accepts or declines.
7. Motion intensity scales with vibe — locked at Phase 2e (0/3 to 3/3 scale). Stack escalates by need: CSS → Framer Motion → Lenis → GSAP. Generic fade-up-on-everything is forbidden. NO motion on body copy. prefers-reduced-motion always respected. See references/motion-patterns.md.
8. Vibe before pixels — never write code or generate assets before the vibe is named, the palette is locked, and the typography pair is chosen.
9. Type-aware where it matters — landing/portfolio (special tier) use rich type-specific anatomy + skeleton + per-vibe section archetypes; every other type (generic tier) uses generic-page-anatomy.md + generic-page-skeleton.md with sections driven by the Page-Purpose Exercise. Phase 1 brief always asks page-purpose; Phase 6 plan branches by tier; Phase 8 audit honors [universal] / [marketing-only] / [landing/portfolio-only] tags from § Applicability Matrix per --type.
10. Diversify across runs — for projects with prior perfect-ui builds tracked in .perfect-ui/log.json, macrostructure pick at Phase 2.5 must NOT match any of the last 3 entries (hard rule). Vibe / dials / motion personality should differ from last entry (soft warnings; override OK). Read at Phase 0.5; written at Phase 7-end. See references/macrostructure-catalog.md § Diversification rule + references/anti-slop-rules.md § Diversification Rule.
11. Pre-emit <design_plan> verification (v2.5.0+) — at Phase 7 entry, before any code emission, populate the 10-field <design_plan> block (macrostructure_diversification / vibe_validity / dial_alignment / motion_personality / hero_math / bento_density / label_sweep / button_contrast / honest_copy / gsap_decision) per references/preemit-design-plan.md. Collect-all-errors validation — any FAIL routes user back to the relevant phase; do NOT proceed until all PASS. Block stamped in BOTH the generated CSS AND plans/{slug}/plan.md § Pre-emit verification. Component-scope runs minimal 4-field subset (vibe_validity / motion_personality / button_contrast / honest_copy).

Process Flow (Authoritative)

flowchart TD
    M[Phase 0: Detect Mode: new vs redesign] --> SM{Phase 0a: --study URL?}
    SM -->|Yes| ST[Study mode: URL safety + fetch + DNA extraction + 3-way branch]
    SM -->|No| P[Phase 0.1: Pre-flight scan — auto-detect existing tokens]
    ST --> P
    P --> T[Phase 0.5: Detect Type → tier route + read log.json]
    T --> CS{Phase 0.5b: Component-scope signals?}
    CS -->|2+ signals| CB[Component-scope branch: skip macrostructure / hero / log.json]
    CS -->|0-1 signals| MC[Phase 2.5: Macrostructure pick — diversification check]
    MC --> BM[Phase 2.6: Brand Motion Identity — pick personality]
    T --> B[Phase 1: Discovery — inline brainstorm protocol, branched per type]
    B --> C[Phase 2: Visual Direction — palette/typo/spatial/effect/motion]
    C --> D[Phase 3: Custom Icon Set]
    D --> E[Phase 4: 2D Visual Assets — illustration / static 3D render / photo / SVG]
    E --> F{Phase 5: Visual Eff