create-yss-spec 1.0.0

package/template/.agents/skills/web-design-engineer/README.md

@@ -0,0 +1,461 @@
+# Web Design Engineer Skill
+
+**An AI agent skill that transforms AI-generated web pages from "functional" to "stunning."**
+
+[中文文档](./README.zh-CN.md) · [Back to collection root](../../README.md)
+
+![Web Design Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design-skill.webp)
+
+---
+
+## What Is This?
+
+This is a reusable **Skill** (structured system prompt) for AI coding agents — such as [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor](https://cursor.com), and other tools that support the `SKILL.md` format — that dramatically improves the design quality of AI-generated HTML/CSS/JavaScript artifacts.
+
+It distills the core design philosophy from [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs)'s system prompt into an open, portable, and customizable skill file that you can drop into any project.
+
+### The Problem
+
+Modern LLMs can already produce functional web pages from simple prompts. But their output tends to converge on the same aesthetic: Inter font, blue primary buttons, purple-pink gradients, large-radius cards, emoji as icons, fabricated testimonials. Technically correct, visually generic.
+
+### The Solution
+
+This skill injects **design taste** into the AI's decision-making process through:
+
+- **Anti-cliché rules** — an explicit blocklist of overused AI design patterns
+- **Design system declaration** — forces the AI to articulate color, typography, spacing, and motion choices *before writing code*
+- **oklch color theory** — perceptually uniform color derivation instead of random hex guessing
+- **Curated font & color pairings** — high-quality starting points that replace the default Inter + #3b82f6
+- **Placeholder philosophy** — honest `[icon]` markers instead of poorly drawn SVG fakes
+- **Structured workflow** — six-step process from requirements → context → design system → v0 draft → full build → verification
+
+---
+
+## Quick Start
+
+### For Claude Code / Cursor / AI Agents
+
+Copy this skill folder into your project:
+
+```
+your-project/
+├── .agents/skills/web-design-engineer/   # or .claude/skills/web-design-engineer/
+│   ├── SKILL.md                          # Main skill file
+│   └── references/
+│       ├── advanced-patterns.md          # Code template library (slide engine, device frames, motion timelines, data viz)
+│       ├── design-directions.md          # Design Direction Advisor (6 schools, differentiated 3-pick recommendation)
+│       ├── style-recipes/                # 25 anchored style recipes — one .md file per anchor, loaded on demand
+│       │   ├── INDEX.md                   #   Catalog index + 3 cross-indexes + cross-cutting anti-patterns
+│       │   ├── linear.md / aesop.md / pentagram.md / ...    #   25 single-recipe files
+│       └── critique-guide.md             # 5-dimension scoring rubric + common issues catalog
+└── ...
+```
+
+Or use the Claude Code plugin marketplace from the collection root — see the [top-level README](../../README.md#install).
+
+The agent will automatically pick up the skill when your request involves visual/interactive front-end work.
+
+### What It Covers
+
+| Output Type | Examples |
+|---|---|
+| Web pages & landing pages | Marketing sites, product pages, portfolios |
+| Interactive prototypes | Clickable app mockups with device frames |
+| Slide decks | HTML presentations (1920×1080, keyboard nav) |
+| Data visualizations | Dashboards with Chart.js or D3.js |
+| Animations | CSS/JS motion design, timeline-driven demos |
+| Design systems | Token exploration, component variants |
+
+---
+
+## How It Works
+
+### The Six-Step Workflow
+
+```
+1. Understand requirements  →  Ask only when information is insufficient
+2. Gather design context    →  Code > screenshots; never start from nothing
+3. Declare design system    →  Colors, fonts, spacing, motion — in Markdown, before code
+4. Show v0 draft early      →  Placeholders + layout + tokens; let the user course-correct
+5. Full build               →  Components, states, motion; pause at key decision points
+6. Verify                   →  Pre-delivery checklist; no console errors, no rogue hues
+```
+
+### Key Design Principles
+
+**Anti-AI-cliché checklist.** The skill explicitly bans:
+- Purple-pink-blue gradient backgrounds
+- Left-border accent cards
+- Inter / Roboto / Arial / Fraunces / system-ui fonts
+- Emoji as icon substitutes
+- Fabricated stats, fake logo walls, dummy testimonials
+
+**oklch color system.** Colors are derived in the perceptually uniform oklch space. Same lightness values actually *look* the same brightness to the human eye — unlike HSL, where yellow-at-50% looks much brighter than blue-at-50%.
+
+**Curated starting points.** Six pre-validated color × font pairings for common use cases:
+
+| Style | Color | Fonts | Use Case |
+|---|---|---|---|
+| Modern tech | Blue-violet | Space Grotesk + Inter | SaaS, dev tools |
+| Elegant editorial | Warm brown | Newsreader + Outfit | Content, blogs |
+| Premium brand | Near-black | Sora + Plus Jakarta Sans | Luxury, finance |
+| Lively consumer | Coral | Plus Jakarta Sans + Outfit | E-commerce, social |
+| Minimal professional | Teal-blue | Outfit + Space Grotesk | Dashboards, B2B |
+| Artisan warmth | Caramel | Caveat + Newsreader | Food, education |
+
+**Anchored style-recipe library (25 named recipes, progressively loaded).** When the user names an anchor ("Linear-style", "Aesop feeling", "Pentagram-grade type"), the agent reads **only the matching file** at `references/style-recipes/<anchor>.md` (~50 lines). The catalog index, 3 cross-indexes, and cross-cutting anti-patterns live in `references/style-recipes/INDEX.md` (~150 lines). The full catalog is never loaded at once. The 25 recipes are spread across 7 schools (the 6 Direction-Advisor schools plus a *Specialty / Genre* school reachable only via direct anchor names):
+
+| School | Recipes |
+|---|---|
+| Editorial / Minimalist | `apple-hig` · `muji-kenya-hara` · `aesop` · `dieter-rams-braun` · `monocle-magazine` |
+| Information Architecture | `pentagram` · `vignelli-swiss-helvetica` · `bloomberg-terminal` · `tufte-dataink` · `nyt-the-daily` |
+| Modern Tool / Builder SaaS | `linear` · `vercel-mesh` · `raycast` · `notion-pre-ai` |
+| Motion / Experimental | `field-io` · `active-theory` · `resn-storytelling` |
+| Brutalist / Raw | `are-na` · `bloomberg-businessweek-turley` · `balenciaga-post-2017` |
+| Warm Humanist | `mailchimp-freddie` · `stripe-press` · `headspace-meditation` |
+| Specialty / Genre | `y2k-retrofuturism` · `mid-century-modern` |
+
+---
+
+## Style Recipe Gallery
+
+The skill ships **25 named recipes**, each tied to a real brand, studio, or designer. Every recipe has a working, full-page artefact in the demo gallery — not a shared template, not a thumbnail mood-board, but the form each recipe was actually designed for: an apothecary product page for Aesop, a trading workstation for Bloomberg Terminal, a Saul-Bass poster for Mid-Century, a Y2K portal for Retrofuturism. Browse by school below, pick the one whose vibe matches your brief, or read the spec file at `references/style-recipes/<recipe>.md`. Click any preview to open the full-resolution 2:1 frame.
+
+> Frames are real artefacts rendered by the live React + Vite gallery at [`demo/web-design-engineer-demo`](../../demo/web-design-engineer-demo/) — same fonts, same palettes, same signature moves as the recipe spec. Each demo is in `src/recipes/<id>.tsx`.
+
+### Editorial / Minimalist · 5 recipes
+
+> Whitespace, refined typography, quiet luxury — the apothecary, the museum catalogue, the hardware product page.
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/apple-hig.webp" alt="apple-hig preview" /></a>
+<br /><strong><code>apple-hig</code></strong>
+<br /><sub>SF Pro Display, generous whitespace, soft elevation — the Apple Store voice</sub>
+<br /><sub><b>Best for</b> · hardware product pages · device launches · premium consumer tech</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/muji-kenya-hara.webp" alt="muji-kenya-hara preview" /></a>
+<br /><strong><code>muji-kenya-hara</code></strong>
+<br /><sub>Emptiness as canvas, ash &amp; paper, every object photographed in air</sub>
+<br /><sub><b>Best for</b> · object catalogues · houseware brands · slow-living storefronts</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/aesop.webp" alt="aesop preview" /></a>
+<br /><strong><code>aesop</code></strong>
+<br /><sub>Warm chamois, sage &amp; amber, serif copy that reads like a literary magazine</sub>
+<br /><sub><b>Best for</b> · apothecary product pages · beauty &amp; wellness · independent retailers</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/dieter-rams-braun.webp" alt="dieter-rams-braun preview" /></a>
+<br /><strong><code>dieter-rams-braun</code></strong>
+<br /><sub>Ten principles, monochrome grids, technical orthographics — function as form</sub>
+<br /><sub><b>Best for</b> · industrial-design archives · hardware specs · brand-principle pages</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/monocle-magazine.webp" alt="monocle-magazine preview" /></a>
+<br /><strong><code>monocle-magazine</code></strong>
+<br /><sub>Cosmopolitan briefings, navy &amp; coral, footnoted curiosity</sub>
+<br /><sub><b>Best for</b> · magazine contents · city &amp; travel briefings · lifestyle journals</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>Best when the brief says</strong>
+<br /><sub>"refined" · "premium" · "quiet" · "editorial" · "less is more"</sub>
+<br /><br />
+<sub>See specs in <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### Information Architecture · 5 recipes
+
+> Rational, data-driven, restrained — wayfinding, terminals, footnoted essays, the newspaper of record.
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/pentagram.webp" alt="pentagram preview" /></a>
+<br /><strong><code>pentagram</code></strong>
+<br /><sub>One bold typeface used as artwork, grid as scaffold, ink + ground only</sub>
+<br /><sub><b>Best for</b> · identity specimens · type-led portfolios · gallery announcements</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vignelli-swiss-helvetica.webp" alt="vignelli-swiss-helvetica preview" /></a>
+<br /><strong><code>vignelli-swiss-helvetica</code></strong>
+<br /><sub>Helvetica at every size, six primary colours, the NYC Subway diagram</sub>
+<br /><sub><b>Best for</b> · wayfinding &amp; transit · public-info posters · brand-system specimens</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-terminal.webp" alt="bloomberg-terminal preview" /></a>
+<br /><strong><code>bloomberg-terminal</code></strong>
+<br /><sub>Amber on navy-black, mono everywhere, density over comfort</sub>
+<br /><sub><b>Best for</b> · trading dashboards · ops consoles · power-user dense tools</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/tufte-dataink.webp" alt="tufte-dataink preview" /></a>
+<br /><strong><code>tufte-dataink</code></strong>
+<br /><sub>Sparklines in body copy, small multiples, no chartjunk</sub>
+<br /><sub><b>Best for</b> · data narratives · research write-ups · academic essays</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/nyt-the-daily.webp" alt="nyt-the-daily preview" /></a>
+<br /><strong><code>nyt-the-daily</code></strong>
+<br /><sub>Cheltenham over Imperial, dateline above all, the gravity of the broadsheet</sub>
+<br /><sub><b>Best for</b> · news features · podcast hubs · long-form journalism</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>Best when the brief says</strong>
+<br /><sub>"data-heavy" · "wayfinding" · "dense" · "rational" · "of record"</sub>
+<br /><br />
+<sub>See specs in <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### Modern Tool / Builder SaaS · 4 recipes
+
+> Hairline detail, warm dark, single accent — the developer-tool aesthetic of the late 2020s.
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/linear.webp" alt="linear preview" /></a>
+<br /><strong><code>linear</code></strong>
+<br /><sub>Warm dark, hairline borders, purple flicks of accent, shortcut chips</sub>
+<br /><sub><b>Best for</b> · dev-tool landing pages · issue / project SaaS · API &amp; infra products</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/vercel-mesh.webp" alt="vercel-mesh preview" /></a>
+<br /><strong><code>vercel-mesh</code></strong>
+<br /><sub>Pure black, geometric mesh gradient, Geist Sans, command-line clarity</sub>
+<br /><sub><b>Best for</b> · deploy / runtime tools · framework launches · technical hero pages</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/raycast.webp" alt="raycast preview" /></a>
+<br /><strong><code>raycast</code></strong>
+<br /><sub>Glass card on red-tinted void, keyboard-first, condensed list cells</sub>
+<br /><sub><b>Best for</b> · command palettes · launcher apps · keyboard-driven tooling</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/notion-pre-ai.webp" alt="notion-pre-ai preview" /></a>
+<br /><strong><code>notion-pre-ai</code></strong>
+<br /><sub>Off-white pages, drag-handle dots, casual emoji headings, callouts everywhere</sub>
+<br /><sub><b>Best for</b> · workspace docs · internal wikis · friendly productivity apps</sub>
+</td>
+</tr>
+</table>
+
+### Motion / Experimental · 3 recipes
+
+> Bold, generative, sensory — when the brief asks for "cinematic", "WebGL", or "award-bait".
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/field-io.webp" alt="field-io preview" /></a>
+<br /><strong><code>field-io</code></strong>
+<br /><sub>Particle systems behind editorial type, code-art aesthetic, dark studio</sub>
+<br /><sub><b>Best for</b> · creative-tech studios · generative-art case studies · WebGL portfolios</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/active-theory.webp" alt="active-theory preview" /></a>
+<br /><strong><code>active-theory</code></strong>
+<br /><sub>WebGL ambitions, full-bleed type, candy colours over deep black</sub>
+<br /><sub><b>Best for</b> · cinematic product launches · campaign sites · award-bait microsites</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/resn-storytelling.webp" alt="resn-storytelling preview" /></a>
+<br /><strong><code>resn-storytelling</code></strong>
+<br /><sub>Surreal, lush, every frame a tableau, headlines on textured noise</sub>
+<br /><sub><b>Best for</b> · narrative scrolls · entertainment / IP sites · agency reels</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>Best when the brief says</strong>
+<br /><sub>"cinematic" · "WebGL" · "experiential" · "Awwwards-grade"</sub>
+<br /><br />
+<sub>See specs in <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### Brutalist / Raw · 3 recipes
+
+> Anti-design, honest, unpolished — the system-default web, tabloid covers, anti-luxury luxury.
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/are-na.webp" alt="are-na preview" /></a>
+<br /><strong><code>are-na</code></strong>
+<br /><sub>System fonts on purpose, browser-default blue links, the honest web</sub>
+<br /><sub><b>Best for</b> · research channels · indie communities · anti-design content tools</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/bloomberg-businessweek-turley.webp" alt="bloomberg-businessweek-turley preview" /></a>
+<br /><strong><code>bloomberg-businessweek-turley</code></strong>
+<br /><sub>Yellow caution + black ink, type as collage, hand-cut headlines</sub>
+<br /><sub><b>Best for</b> · editorial covers · opinion pieces · campaign posters</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/balenciaga-post-2017.webp" alt="balenciaga-post-2017 preview" /></a>
+<br /><strong><code>balenciaga-post-2017</code></strong>
+<br /><sub>All caps, broken grids, deadpan product on white, anti-luxury luxury</sub>
+<br /><sub><b>Best for</b> · fashion collections · drop announcements · contrarian luxury</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>Best when the brief says</strong>
+<br /><sub>"raw" · "honest" · "anti-design" · "tabloid" · "uncomfortable"</sub>
+<br /><br />
+<sub>See specs in <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### Warm Humanist · 3 recipes
+
+> Approachable, organic, hand-touched — small-business cheerleader, hand-bound book, daily reset.
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mailchimp-freddie.webp" alt="mailchimp-freddie preview" /></a>
+<br /><strong><code>mailchimp-freddie</code></strong>
+<br /><sub>Cavendish yellow, hand-drawn doodles, conversational copy, the SMB cheerleader</sub>
+<br /><sub><b>Best for</b> · onboarding flows · SMB marketing tools · friendly consumer apps</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/stripe-press.webp" alt="stripe-press preview" /></a>
+<br /><strong><code>stripe-press</code></strong>
+<br /><sub>Cream paper, GT Super, hand-bound luxury, ideas as objects</sub>
+<br /><sub><b>Best for</b> · book detail pages · long-form essays · publisher / press sites</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/headspace-meditation.webp" alt="headspace-meditation preview" /></a>
+<br /><strong><code>headspace-meditation</code></strong>
+<br /><sub>Orange suns, rounded blobs, hand-illustrated calm, a daily reset</sub>
+<br /><sub><b>Best for</b> · meditation &amp; wellness · habit / mood apps · cosy consumer cards</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>Best when the brief says</strong>
+<br /><sub>"friendly" · "approachable" · "human" · "cosy" · "hand-touched"</sub>
+<br /><br />
+<sub>See specs in <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### Specialty / Genre · 2 recipes
+
+> Period-coded, decade-coded, theme-coded — only reachable by direct anchor name.
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/y2k-retrofuturism.webp" alt="y2k-retrofuturism preview" /></a>
+<br /><strong><code>y2k-retrofuturism</code></strong>
+<br /><sub>Chrome bevels, frosted glass, lava blobs, MSN-blue everywhere</sub>
+<br /><sub><b>Best for</b> · Y2K nostalgia · early-web portals · gen-Z brand stunts</sub>
+</td>
+<td align="center" width="50%">
+<a href="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design/mid-century-modern.webp" alt="mid-century-modern preview" /></a>
+<br /><strong><code>mid-century-modern</code></strong>
+<br /><sub>Mustard, brick, cyan; cut-paper geometry; the optimism of 1957</sub>
+<br /><sub><b>Best for</b> · poster homages · cultural events · vintage-print brand voice</sub>
+</td>
+</tr>
+</table>
+
+### Run the gallery yourself
+
+```bash
+cd demo/web-design-engineer-demo
+npm install && npm run dev    # http://localhost:5181/
+```
+
+Hash-routed URLs (`#/linear`, `#/aesop`, …) deep-link to any recipe. Press `H` to toggle the recipe HUD, `Esc` to return to the gallery. See the demo's own [README](../../demo/web-design-engineer-demo/README.md) for layout details.
+
+---
+
+## Before & after: skill on / off
+
+The repository's [`demo/web-design-demo/`](../../demo/web-design-demo) directory contains side-by-side comparisons of pages generated with and without this skill, using identical prompts. Open [`demo/web-design-demo/demo2/index.html`](../../demo/web-design-demo/demo2/index.html) for a side-by-side viewer.
+
+### Demo 1: Space Exploration Museum
+
+**Prompt:** *"Build a homepage for a fictional 'Space Exploration Museum' — full-screen hero, 4 exhibition sections, a timeline with 6+ milestones, a booking CTA, and a footer. Deep, immersive, cosmic feel."*
+
+| | Without Skill | With Skill |
+|---|---|---|
+| **File** | `demo/web-design-demo/demo2/demo1.html` | `demo/web-design-demo/demo2/demo1-with-skill.html` |
+| **Color system** | Hardcoded hex values (#7cf0ff, #b388ff) | oklch-based token system with CSS custom properties |
+| **Typography** | Orbitron + Noto Serif SC | Instrument Serif + Space Grotesk + JetBrains Mono |
+| **Layout** | Standard landing-page structure | Editorial magazine-style layout with grid compositions |
+| **Details** | Heavy glow effects, neon gradients | Restrained palette, typographic hierarchy, decorative data elements |
+| **Overall feel** | Enthusiastic junior designer | Experienced design director |
+
+### Demo 2: Photographer Portfolio
+
+**Prompt:** *"Build a homepage for an independent photographer's portfolio."*
+
+| | With Skill |
+|---|---|
+| **File** | `demo/web-design-demo/demo2/demo2-with-skill.html` |
+| **Character** | Creates a fictional Nordic photographer "Mira Høst" with a complete visual identity |
+| **Color** | Paper-warm light (#f2efe8) + ink-dark (#161513) — extremely restrained two-tone palette |
+| **Typography** | Instrument Serif (display) + Space Grotesk (UI) with extensive italic usage |
+| **Layout** | Magazine-editorial structure with numbered sections, asymmetric grids, side rails |
+| **Motion** | Slow Ken Burns on hero image (24s cycle), film-grain texture overlay |
+| **Navigation** | `mix-blend-mode: difference` masthead — seamless across light/dark sections |
+
+> The original Claude Design system prompt that inspired this skill is preserved at [`dist/prompt/claude-design-system-prompt.md`](../../dist/prompt/claude-design-system-prompt.md).
+
+---
+
+## Background
+
+This skill is inspired by the system prompt of [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs), Anthropic's visual design product launched in April 2026. Claude Design's system prompt (~420 lines) encodes a sophisticated set of design principles, anti-patterns, and workflow constraints that make its output consistently high-quality.
+
+This project extracts and refines those core ideas into a portable skill that works with any AI coding agent — giving you Claude-Design-level design taste without the product lock-in or usage limits.
+
+Key additions beyond the original Claude Design prompt:
+- **Design system declaration step** — forces the AI to articulate design tokens in natural language before coding
+- **v0 draft strategy** — a concrete methodology for showing work-in-progress early
+- **Extended anti-cliché list** — additional patterns identified from real-world AI output
+- **Placeholder philosophy** — a complete framework for handling missing assets professionally
+- **Color × font pairing table** — six validated visual system starting points
+- **Design Direction Advisor** — six-school conversational tool for vague requests, with explicit handoff to the recipe library
+- **25-recipe anchored style library** — each recipe tied to a real brand / studio / designer with concrete copy-able values; defends against AI-default mush
+- **Advanced pattern library** — ready-to-use code templates for common UI patterns
+
+---
+
+## License
+
+MIT