fuse-design

Audit existing HTML/CSS design quality. Checks WCAG contrast, font compliance, OKLCH tokens, state coverage, anti-AI-slop. No generation — validation only.

Generate a single component. Skips browsing. Uses existing design-system.md tokens + Gemini snippet_frontend. Fast path for isolated UI elements.

New page in existing project. Skips identity (design-system.md exists). Browses 2 sites for inspiration, then generates via Gemini with existing tokens.

Full design pipeline: Identity → Research → System → Generate → Motion → Audit → Review. Generates production-ready HTML/CSS via Gemini Design MCP with OKLCH tokens, approved typography, and Playwright-driven inspiration.

UI Designer. Generates HTML/CSS only via Gemini Design MCP. MANDATORY 7-phase pipeline: Phase 0 Identity (read OKLCH tokens, typography pairs, sector palettes) → Phase 1 Research (browse live sites via Playwright scroll+wait+fullPage) → Phase 2 System (create design-system.md) → Phase 3 Generate (Gemini XML with 7 blocks) → Phase 4 Motion → Phase 5 Audit → Phase 6 Auto-review. Hooks enforce phase order.

Phase 0: Read sector template (creative/fintech/ecommerce/devtool), generate OKLCH palette with chroma > 0.05, pick approved typography pair (never Inter/Roboto/Arial), define spacing base unit + motion profile.

Phase 1: Browse 4 catalog sites via Playwright, write CSS-precise observations (oklch values, font-size clamp, grid ratios, border-radius, shadows), declare reference site + 3 elements. Feed specs to Gemini context.

Phase 2: Write microcopy guide: CTA labels, error messages, empty states, form placeholders — all aligned with identity personality and audience from Phase 0.

Phase 3: Map design-system.md to 7 Gemini XML blocks (aesthetics, style_reference, typography, color_system, spacing, states, forbidden), call create_frontend, add component variants (Glass/Outline/Flat via CVA).

Phase 4: Add Framer Motion scroll reveals (IntersectionObserver), hover scale/opacity transitions, focus ring states, loading skeletons, glassmorphism blur layers, gradient orb backgrounds — all via modify_frontend.

Phase 5: Verify contrast >= 4.5:1 text / 3:1 UI in both light+dark, check no Inter/Roboto/Arial/Open Sans, confirm all colors are OKLCH from design-system.md, validate hover/focus/disabled/loading states, run anti-AI-slop checklist.

Phase 6: Serve via python3 -m http.server 8899, screenshot light mode (fullPage), toggle .dark class + screenshot dark mode, compare 3 declared elements [expected vs present], fix gaps with modify_frontend (max 2 cycles), report.

16 hooks across 4 events