docs(readme): enhance style recipe gallery with new previews and descriptions for web-design-engineer in English, Japanese, and Chinese

README.ja-JP.md

@@ -107,6 +107,29 @@
 - インライン React + Babel、CSS トークン、`oklch()` カラー処理、コンテナクエリ、reduced-motion 対応の実装ルールを含む
 - デバイスフレーム、スライドエンジン、アニメーションタイムライン、ダッシュボード、その他の再利用可能な Web 成果物のための高度なパターンリファレンスを同梱
 
+<table>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/aesop.png" alt="aesop プレビュー" /></a><br /><sub><code>aesop</code><br />アポセカリー</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/muji-kenya-hara.png" alt="muji-kenya-hara プレビュー" /></a><br /><sub><code>muji-kenya-hara</code><br />器物カタログ</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/monocle-magazine.png" alt="monocle-magazine プレビュー" /></a><br /><sub><code>monocle-magazine</code><br />雑誌目次</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/stripe-press.png" alt="stripe-press プレビュー" /></a><br /><sub><code>stripe-press</code><br />書籍詳細</sub></td>
+</tr>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/bloomberg-terminal.png" alt="bloomberg-terminal プレビュー" /></a><br /><sub><code>bloomberg-terminal</code><br />取引ダッシュボード</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/linear.png" alt="linear プレビュー" /></a><br /><sub><code>linear</code><br />開発者 LP</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/vercel-mesh.png" alt="vercel-mesh プレビュー" /></a><br /><sub><code>vercel-mesh</code><br />デプロイ Hero</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/tufte-dataink.png" alt="tufte-dataink プレビュー" /></a><br /><sub><code>tufte-dataink</code><br />データナラティブ</sub></td>
+</tr>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/mid-century-modern.png" alt="mid-century-modern プレビュー" /></a><br /><sub><code>mid-century-modern</code><br />ポスターオマージュ</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/y2k-retrofuturism.png" alt="y2k-retrofuturism プレビュー" /></a><br /><sub><code>y2k-retrofuturism</code><br />Y2K ポータル</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/bloomberg-businessweek-turley.png" alt="bloomberg-businessweek-turley プレビュー" /></a><br /><sub><code>businessweek-turley</code><br />編集カバー</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/active-theory.png" alt="active-theory プレビュー" /></a><br /><sub><code>active-theory</code><br />没入型ローンチ</sub></td>
+</tr>
+</table>
+
+<sub>↑ 25 種類の anchor 付きレシピから代表的な 12 種類を抜粋 — <a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><b>完全なギャラリーを開く</b></a>と、25 種類すべての実作品（アポセカリーページ、取引ワークステーション、雑誌カバー、Y2K ポータル、ミッドセンチュリーポスター…）がシグネチャムーブと用途タグ付きで閲覧できます。</sub>
+
 リンク: [README](./skills/web-design-engineer/README.md) · [SKILL.md](./skills/web-design-engineer/SKILL.md) · [Website](./website/web-design-website) · [Demo](./demo/web-design-demo) · <!-- DOWNLOAD:web-design-engineer:start -->[Download v1.2.1 .zip](https://github.com/ConardLi/garden-skills/releases/download/web-design-engineer-v1.2.1/web-design-engineer-1.2.1.zip)<!-- DOWNLOAD:web-design-engineer:end -->
 
 ---

README.md

@@ -107,6 +107,29 @@ Highlights:
 - Includes practical implementation rules for inline React + Babel, CSS tokens, `oklch()` color work, container queries, and reduced-motion handling
 - Ships an advanced patterns reference for device frames, slide engines, animation timelines, dashboards, and other reusable web artifacts
 
+<table>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/aesop.png" alt="aesop preview" /></a><br /><sub><code>aesop</code><br />apothecary pages</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/muji-kenya-hara.png" alt="muji-kenya-hara preview" /></a><br /><sub><code>muji-kenya-hara</code><br />object catalogues</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/monocle-magazine.png" alt="monocle-magazine preview" /></a><br /><sub><code>monocle-magazine</code><br />magazine contents</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/stripe-press.png" alt="stripe-press preview" /></a><br /><sub><code>stripe-press</code><br />book detail</sub></td>
+</tr>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/bloomberg-terminal.png" alt="bloomberg-terminal preview" /></a><br /><sub><code>bloomberg-terminal</code><br />trading dashboards</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/linear.png" alt="linear preview" /></a><br /><sub><code>linear</code><br />dev tool landing</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/vercel-mesh.png" alt="vercel-mesh preview" /></a><br /><sub><code>vercel-mesh</code><br />deploy hero</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/tufte-dataink.png" alt="tufte-dataink preview" /></a><br /><sub><code>tufte-dataink</code><br />data narratives</sub></td>
+</tr>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/mid-century-modern.png" alt="mid-century-modern preview" /></a><br /><sub><code>mid-century-modern</code><br />poster homage</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/y2k-retrofuturism.png" alt="y2k-retrofuturism preview" /></a><br /><sub><code>y2k-retrofuturism</code><br />Y2K portal</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/bloomberg-businessweek-turley.png" alt="bloomberg-businessweek-turley preview" /></a><br /><sub><code>businessweek-turley</code><br />editorial covers</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><img src="./dist/imgs/web-design/active-theory.png" alt="active-theory preview" /></a><br /><sub><code>active-theory</code><br />cinematic launch</sub></td>
+</tr>
+</table>
+
+<sub>↑ 12 of 25 anchored recipes — <a href="./skills/web-design-engineer/README.md#style-recipe-gallery"><b>open the full gallery</b></a> for all 25 working artefacts (apothecary pages, trading workstations, magazine covers, Y2K portals, mid-century posters …) with signature moves and best-for tags.</sub>
+
 Links: [README](./skills/web-design-engineer/README.md) · [SKILL.md](./skills/web-design-engineer/SKILL.md) · [Website](./website/web-design-website) · [Demo](./demo/web-design-demo) · <!-- DOWNLOAD:web-design-engineer:start -->[Download v1.2.1 .zip](https://github.com/ConardLi/garden-skills/releases/download/web-design-engineer-v1.2.1/web-design-engineer-1.2.1.zip)<!-- DOWNLOAD:web-design-engineer:end -->
 
 ---

README.zh-CN.md

@@ -107,6 +107,29 @@
 - 包含 inline React + Babel、CSS tokens、`oklch()` 配色、container queries、reduced-motion 等实现规则
 - 提供高级模式参考，覆盖设备框、幻灯片引擎、动画时间线、仪表盘等常见 Web 产物
 
+<table>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/aesop.png" alt="aesop 预览" /></a><br /><sub><code>aesop</code><br />药剂师页</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/muji-kenya-hara.png" alt="muji-kenya-hara 预览" /></a><br /><sub><code>muji-kenya-hara</code><br />器物目录</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/monocle-magazine.png" alt="monocle-magazine 预览" /></a><br /><sub><code>monocle-magazine</code><br />杂志目录</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/stripe-press.png" alt="stripe-press 预览" /></a><br /><sub><code>stripe-press</code><br />书籍详情</sub></td>
+</tr>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/bloomberg-terminal.png" alt="bloomberg-terminal 预览" /></a><br /><sub><code>bloomberg-terminal</code><br />交易仪表盘</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/linear.png" alt="linear 预览" /></a><br /><sub><code>linear</code><br />开发者落地页</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/vercel-mesh.png" alt="vercel-mesh 预览" /></a><br /><sub><code>vercel-mesh</code><br />部署落地页</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/tufte-dataink.png" alt="tufte-dataink 预览" /></a><br /><sub><code>tufte-dataink</code><br />数据叙事</sub></td>
+</tr>
+<tr>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/mid-century-modern.png" alt="mid-century-modern 预览" /></a><br /><sub><code>mid-century-modern</code><br />海报致敬</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/y2k-retrofuturism.png" alt="y2k-retrofuturism 预览" /></a><br /><sub><code>y2k-retrofuturism</code><br />Y2K 门户</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/bloomberg-businessweek-turley.png" alt="bloomberg-businessweek-turley 预览" /></a><br /><sub><code>businessweek-turley</code><br />编辑封面</sub></td>
+<td align="center" width="25%"><a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><img src="./dist/imgs/web-design/active-theory.png" alt="active-theory 预览" /></a><br /><sub><code>active-theory</code><br />电影感发布</sub></td>
+</tr>
+</table>
+
+<sub>↑ 25 套有 anchor 的配方里挑出最具代表性的 12 套 —— <a href="./skills/web-design-engineer/README.zh-CN.md#风格配方画廊"><b>打开完整画廊</b></a>，含全部 25 个真实作品（药剂师页、交易工作站、杂志封面、Y2K 门户、Mid-Century 海报……），含签名手法与适合场景标签。</sub>
+
 链接：[README](./skills/web-design-engineer/README.zh-CN.md) · [SKILL.md](./skills/web-design-engineer/SKILL.md) · [Website](./website/web-design-website) · [Demo](./demo/web-design-demo) · <!-- DOWNLOAD:web-design-engineer:start -->[下载 v1.2.1 .zip](https://github.com/ConardLi/garden-skills/releases/download/web-design-engineer-v1.2.1/web-design-engineer-1.2.1.zip)<!-- DOWNLOAD:web-design-engineer:end -->
 
 ---

skills/web-design-engineer/README.md

@@ -117,7 +117,293 @@ The agent will automatically pick up the skill when your request involves visual
 
 ---
 
-## Demos
+## 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="../../dist/imgs/web-design/apple-hig.png"><img src="../../dist/imgs/web-design/apple-hig.png" 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="../../dist/imgs/web-design/muji-kenya-hara.png"><img src="../../dist/imgs/web-design/muji-kenya-hara.png" 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="../../dist/imgs/web-design/aesop.png"><img src="../../dist/imgs/web-design/aesop.png" 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="../../dist/imgs/web-design/dieter-rams-braun.png"><img src="../../dist/imgs/web-design/dieter-rams-braun.png" 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="../../dist/imgs/web-design/monocle-magazine.png"><img src="../../dist/imgs/web-design/monocle-magazine.png" 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="../../dist/imgs/web-design/pentagram.png"><img src="../../dist/imgs/web-design/pentagram.png" 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="../../dist/imgs/web-design/vignelli-swiss-helvetica.png"><img src="../../dist/imgs/web-design/vignelli-swiss-helvetica.png" 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="../../dist/imgs/web-design/bloomberg-terminal.png"><img src="../../dist/imgs/web-design/bloomberg-terminal.png" 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="../../dist/imgs/web-design/tufte-dataink.png"><img src="../../dist/imgs/web-design/tufte-dataink.png" 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="../../dist/imgs/web-design/nyt-the-daily.png"><img src="../../dist/imgs/web-design/nyt-the-daily.png" 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="../../dist/imgs/web-design/linear.png"><img src="../../dist/imgs/web-design/linear.png" 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="../../dist/imgs/web-design/vercel-mesh.png"><img src="../../dist/imgs/web-design/vercel-mesh.png" 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="../../dist/imgs/web-design/raycast.png"><img src="../../dist/imgs/web-design/raycast.png" 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="../../dist/imgs/web-design/notion-pre-ai.png"><img src="../../dist/imgs/web-design/notion-pre-ai.png" 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="../../dist/imgs/web-design/field-io.png"><img src="../../dist/imgs/web-design/field-io.png" 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="../../dist/imgs/web-design/active-theory.png"><img src="../../dist/imgs/web-design/active-theory.png" 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="../../dist/imgs/web-design/resn-storytelling.png"><img src="../../dist/imgs/web-design/resn-storytelling.png" 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="../../dist/imgs/web-design/are-na.png"><img src="../../dist/imgs/web-design/are-na.png" 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="../../dist/imgs/web-design/bloomberg-businessweek-turley.png"><img src="../../dist/imgs/web-design/bloomberg-businessweek-turley.png" 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="../../dist/imgs/web-design/balenciaga-post-2017.png"><img src="../../dist/imgs/web-design/balenciaga-post-2017.png" 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="../../dist/imgs/web-design/mailchimp-freddie.png"><img src="../../dist/imgs/web-design/mailchimp-freddie.png" 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="../../dist/imgs/web-design/stripe-press.png"><img src="../../dist/imgs/web-design/stripe-press.png" 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="../../dist/imgs/web-design/headspace-meditation.png"><img src="../../dist/imgs/web-design/headspace-meditation.png" 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="../../dist/imgs/web-design/y2k-retrofuturism.png"><img src="../../dist/imgs/web-design/y2k-retrofuturism.png" 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="../../dist/imgs/web-design/mid-century-modern.png"><img src="../../dist/imgs/web-design/mid-century-modern.png" 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.
 

skills/web-design-engineer/README.zh-CN.md

@@ -117,7 +117,293 @@ your-project/
 
 ---
 
-## 示例
+## 风格配方画廊
+
+Skill 自带 **25 套有名字的配方**，每套都对应到真实的品牌、工作室或设计师。目录中的每个配方都在 demo 画廊里有一个完整的整页作品 —— 不是共用模板、不是缩略图情绪板，而是每套配方本来就该长成的那种东西：Aesop 是药剂师产品页、Bloomberg Terminal 是交易工作站、Mid-Century 是 Saul Bass 海报、Y2K 是世纪之交的门户网站。按学派浏览下方卡片，挑一套气质契合你 brief 的配方，或者直接读 `references/style-recipes/<recipe>.md` 的 spec 文件。点击任意预览图打开完整分辨率的 2:1 大图。
+
+> 所有截图都是来自 [`demo/web-design-engineer-demo`](../../demo/web-design-engineer-demo/) 这个 React + Vite 画廊的真实渲染 —— 字体、配色、签名手法都和 spec 文件里一致。每个 demo 位于 `src/recipes/<id>.tsx`。
+
+### Editorial / 极简 · 5 套
+
+> 留白、考究的排版、安静的奢华 —— 药剂师、博物馆图录、硬件产品页。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/apple-hig.png"><img src="../../dist/imgs/web-design/apple-hig.png" alt="apple-hig preview" /></a>
+<br /><strong><code>apple-hig</code></strong>
+<br /><sub>SF Pro Display、慷慨留白、柔和阴影 —— Apple Store 的语气</sub>
+<br /><sub><b>适合</b> · 硬件产品页 · 设备发布 · 高端消费电子</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/muji-kenya-hara.png"><img src="../../dist/imgs/web-design/muji-kenya-hara.png" alt="muji-kenya-hara preview" /></a>
+<br /><strong><code>muji-kenya-hara</code></strong>
+<br /><sub>空作为画布、灰与纸、器物悬浮在空气中拍摄</sub>
+<br /><sub><b>适合</b> · 器物目录 · 家居品牌 · 慢生活店铺</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/aesop.png"><img src="../../dist/imgs/web-design/aesop.png" alt="aesop preview" /></a>
+<br /><strong><code>aesop</code></strong>
+<br /><sub>暖驼黄、鼠尾草 &amp; 琥珀，衬线正文像文学杂志</sub>
+<br /><sub><b>适合</b> · 药剂师产品页 · 美妆 &amp; 健康 · 独立零售</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/dieter-rams-braun.png"><img src="../../dist/imgs/web-design/dieter-rams-braun.png" alt="dieter-rams-braun preview" /></a>
+<br /><strong><code>dieter-rams-braun</code></strong>
+<br /><sub>十大设计原则、灰阶网格、技术正投影 —— 功能即形式</sub>
+<br /><sub><b>适合</b> · 工业设计档案 · 硬件 spec · 品牌原则页</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/monocle-magazine.png"><img src="../../dist/imgs/web-design/monocle-magazine.png" alt="monocle-magazine preview" /></a>
+<br /><strong><code>monocle-magazine</code></strong>
+<br /><sub>世界主义简报、深海蓝与珊瑚色、脚注式好奇心</sub>
+<br /><sub><b>适合</b> · 杂志目录 · 城市 / 旅行简报 · 生活方式期刊</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>当 brief 里出现这些词</strong>
+<br /><sub>"考究" · "高端" · "安静" · "编辑感" · "少即是多"</sub>
+<br /><br />
+<sub>spec 文件在 <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### 信息架构 · 5 套
+
+> 理性、数据驱动、克制 —— 指示系统、交易终端、脚注长文、报纸头版的重量。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/pentagram.png"><img src="../../dist/imgs/web-design/pentagram.png" alt="pentagram preview" /></a>
+<br /><strong><code>pentagram</code></strong>
+<br /><sub>一种大字体即艺术品、网格作骨架、仅墨色与底色</sub>
+<br /><sub><b>适合</b> · 标识样本 · 字体主导的作品集 · 画廊公告</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/vignelli-swiss-helvetica.png"><img src="../../dist/imgs/web-design/vignelli-swiss-helvetica.png" alt="vignelli-swiss-helvetica preview" /></a>
+<br /><strong><code>vignelli-swiss-helvetica</code></strong>
+<br /><sub>全字号 Helvetica、六种主色、纽约地铁信号图</sub>
+<br /><sub><b>适合</b> · 公共指示 &amp; 交通 · 公共信息海报 · 品牌系统样本</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/bloomberg-terminal.png"><img src="../../dist/imgs/web-design/bloomberg-terminal.png" alt="bloomberg-terminal preview" /></a>
+<br /><strong><code>bloomberg-terminal</code></strong>
+<br /><sub>深海军蓝底上的琥珀色、全等宽、密度高于舒适</sub>
+<br /><sub><b>适合</b> · 交易仪表盘 · 运维控制台 · 高密度专业工具</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/tufte-dataink.png"><img src="../../dist/imgs/web-design/tufte-dataink.png" alt="tufte-dataink preview" /></a>
+<br /><strong><code>tufte-dataink</code></strong>
+<br /><sub>段落内嵌微图、小型多重图、零图表杂质</sub>
+<br /><sub><b>适合</b> · 数据叙事 · 研究报告 · 学术长文</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/nyt-the-daily.png"><img src="../../dist/imgs/web-design/nyt-the-daily.png" alt="nyt-the-daily preview" /></a>
+<br /><strong><code>nyt-the-daily</code></strong>
+<br /><sub>Cheltenham 衬线压在 Imperial 之上、日期线居首、宽幅报纸的重量</sub>
+<br /><sub><b>适合</b> · 新闻特稿 · 播客中枢 · 长篇深度报道</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>当 brief 里出现这些词</strong>
+<br /><sub>"数据密集" · "指示系统" · "高密度" · "理性" · "权威感"</sub>
+<br /><br />
+<sub>spec 文件在 <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### 现代工具 / Builder SaaS · 4 套
+
+> 发丝级细节、暖色暗夜、单一点缀色 —— 2020 年代后期的开发者工具美学。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/linear.png"><img src="../../dist/imgs/web-design/linear.png" alt="linear preview" /></a>
+<br /><strong><code>linear</code></strong>
+<br /><sub>暖色调暗夜、发丝边、紫色点缀、键盘快捷键芯片</sub>
+<br /><sub><b>适合</b> · 开发者工具落地页 · Issue / 项目 SaaS · API &amp; 基础设施产品</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/vercel-mesh.png"><img src="../../dist/imgs/web-design/vercel-mesh.png" alt="vercel-mesh preview" /></a>
+<br /><strong><code>vercel-mesh</code></strong>
+<br /><sub>纯黑、几何网格渐变、Geist Sans、命令行式清晰</sub>
+<br /><sub><b>适合</b> · 部署 / 运行时工具 · 框架发布 · 技术 hero 页</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/raycast.png"><img src="../../dist/imgs/web-design/raycast.png" alt="raycast preview" /></a>
+<br /><strong><code>raycast</code></strong>
+<br /><sub>红光雾里的玻璃卡片、键盘优先、紧凑列表行</sub>
+<br /><sub><b>适合</b> · 命令面板 · launcher 应用 · 键盘驱动型工具</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/notion-pre-ai.png"><img src="../../dist/imgs/web-design/notion-pre-ai.png" alt="notion-pre-ai preview" /></a>
+<br /><strong><code>notion-pre-ai</code></strong>
+<br /><sub>米白页面、拖拽点、随性 emoji 标题、随处可见的提示条</sub>
+<br /><sub><b>适合</b> · 工作区文档 · 内部 Wiki · 友好的生产力应用</sub>
+</td>
+</tr>
+</table>
+
+### 动态 / 实验 · 3 套
+
+> 张扬、生成式、感官 —— brief 里写"电影感""WebGL""能拿 Awwwards"的时候。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/field-io.png"><img src="../../dist/imgs/web-design/field-io.png" alt="field-io preview" /></a>
+<br /><strong><code>field-io</code></strong>
+<br /><sub>粒子系统衬着编辑式字体、代码艺术美学、暗色工作室</sub>
+<br /><sub><b>适合</b> · 创意科技工作室 · 生成艺术案例 · WebGL 作品集</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/active-theory.png"><img src="../../dist/imgs/web-design/active-theory.png" alt="active-theory preview" /></a>
+<br /><strong><code>active-theory</code></strong>
+<br /><sub>WebGL 野心、全屏字、深黑底上的糖果色</sub>
+<br /><sub><b>适合</b> · 电影感产品发布 · 战役站 · 冲奖型微型站点</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/resn-storytelling.png"><img src="../../dist/imgs/web-design/resn-storytelling.png" alt="resn-storytelling preview" /></a>
+<br /><strong><code>resn-storytelling</code></strong>
+<br /><sub>超现实、浓郁、每帧都是布景、标题压在噪点纹理上</sub>
+<br /><sub><b>适合</b> · 叙事滚动 · 娱乐 / IP 站 · 工作室作品集</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>当 brief 里出现这些词</strong>
+<br /><sub>"电影感" · "WebGL" · "沉浸式" · "Awwwards 级"</sub>
+<br /><br />
+<sub>spec 文件在 <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### 粗野 / Brutalist · 3 套
+
+> 反设计、诚实、未抛光 —— 系统默认的网页、小报封面、反奢侈的奢侈。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/are-na.png"><img src="../../dist/imgs/web-design/are-na.png" alt="are-na preview" /></a>
+<br /><strong><code>are-na</code></strong>
+<br /><sub>刻意的系统字体、浏览器默认蓝色链接、诚实的网页</sub>
+<br /><sub><b>适合</b> · 研究型频道 · 独立社区 · 反设计内容工具</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/bloomberg-businessweek-turley.png"><img src="../../dist/imgs/web-design/bloomberg-businessweek-turley.png" alt="bloomberg-businessweek-turley preview" /></a>
+<br /><strong><code>bloomberg-businessweek-turley</code></strong>
+<br /><sub>警示黄 + 黑墨、字体作拼贴、手工剪切式标题</sub>
+<br /><sub><b>适合</b> · 编辑封面 · 评论文章 · 战役式海报</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/balenciaga-post-2017.png"><img src="../../dist/imgs/web-design/balenciaga-post-2017.png" alt="balenciaga-post-2017 preview" /></a>
+<br /><strong><code>balenciaga-post-2017</code></strong>
+<br /><sub>全大写、破碎网格、白底冷面产品、反奢侈的奢侈</sub>
+<br /><sub><b>适合</b> · 时装系列 · drop 公告 · 逆向思考的奢侈品牌</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>当 brief 里出现这些词</strong>
+<br /><sub>"粗粝" · "诚实" · "反设计" · "小报感" · "不舒服"</sub>
+<br /><br />
+<sub>spec 文件在 <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### 温暖人文 · 3 套
+
+> 平易近人、有机、手工感 —— 小生意的拉拉队长、手工装帧的书、每日重置。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/mailchimp-freddie.png"><img src="../../dist/imgs/web-design/mailchimp-freddie.png" alt="mailchimp-freddie preview" /></a>
+<br /><strong><code>mailchimp-freddie</code></strong>
+<br /><sub>Cavendish 黄、手绘涂鸦、对话式文案 —— 小生意的拉拉队长</sub>
+<br /><sub><b>适合</b> · 引导流程 · 中小企业营销工具 · 友好的消费类应用</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/stripe-press.png"><img src="../../dist/imgs/web-design/stripe-press.png" alt="stripe-press preview" /></a>
+<br /><strong><code>stripe-press</code></strong>
+<br /><sub>奶白纸、GT Super、手工装帧式奢华、思想作器物</sub>
+<br /><sub><b>适合</b> · 书籍详情页 · 长篇散文 · 出版社 / 出版品牌站</sub>
+</td>
+</tr>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/headspace-meditation.png"><img src="../../dist/imgs/web-design/headspace-meditation.png" alt="headspace-meditation preview" /></a>
+<br /><strong><code>headspace-meditation</code></strong>
+<br /><sub>橙色太阳、圆润色团、手绘平静感、每日重置</sub>
+<br /><sub><b>适合</b> · 冥想 &amp; 健康 · 习惯 / 情绪应用 · 温馨的消费类卡片</sub>
+</td>
+<td align="center" width="50%" valign="middle">
+<br />
+<strong>当 brief 里出现这些词</strong>
+<br /><sub>"友好" · "亲切" · "人情味" · "温馨" · "手工感"</sub>
+<br /><br />
+<sub>spec 文件在 <a href="./references/style-recipes/">style-recipes/</a></sub>
+<br /><br />
+</td>
+</tr>
+</table>
+
+### 类型 / 流派 · 2 套
+
+> 时代编码、十年编码、主题编码 —— 只能通过直接 anchor 名字唤起。
+
+<table>
+<tr>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/y2k-retrofuturism.png"><img src="../../dist/imgs/web-design/y2k-retrofuturism.png" alt="y2k-retrofuturism preview" /></a>
+<br /><strong><code>y2k-retrofuturism</code></strong>
+<br /><sub>铬合金倒角、磨砂玻璃、熔岩色块、随处可见的 MSN 蓝</sub>
+<br /><sub><b>适合</b> · Y2K 怀旧 · 早期网络门户 · Z 世代品牌大型整活</sub>
+</td>
+<td align="center" width="50%">
+<a href="../../dist/imgs/web-design/mid-century-modern.png"><img src="../../dist/imgs/web-design/mid-century-modern.png" alt="mid-century-modern preview" /></a>
+<br /><strong><code>mid-century-modern</code></strong>
+<br /><sub>芥末黄、砖红、青蓝；剪纸式几何；1957 年的乐观主义</sub>
+<br /><sub><b>适合</b> · 海报致敬 · 文化活动 · 复古印刷品牌语调</sub>
+</td>
+</tr>
+</table>
+
+### 自己跑画廊
+
+```bash
+cd demo/web-design-engineer-demo
+npm install && npm run dev    # http://localhost:5181/
+```
+
+Hash 路由 URL（`#/linear`、`#/aesop`、…）可深链到任意配方。按 `H` 切换配方 HUD，`Esc` 返回画廊。布局细节见 demo 自己的 [README](../../demo/web-design-engineer-demo/README.md)。
+
+---
+
+## 启用前后对比：Skill 开 / 关
 
 仓库的 [`demo/web-design-demo/`](../../demo/web-design-demo) 目录包含使用相同提示词、分别在有 Skill 和无 Skill 条件下生成的页面对比。打开 [`demo/web-design-demo/demo2/index.html`](../../demo/web-design-demo/demo2/index.html) 查看对比展示页。