docs: English README as default + bilingual LICENSE with pricing

- README.md → English (default), with a 中文 callout pointing to README.zh.md
- README.zh.md → Chinese version (renamed from old README.md)
- README.en.md removed (merged into README.md)
- LICENSE now bilingual (EN + 中文), with indicative commercial pricing
  (Annual USD 1,800 / Perpetual USD 3,500) and email contact alchaincyf@gmail.com

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

LICENSE

@@ -1,10 +1,73 @@
 Huashu Design · Personal Use License
 Copyright (c) 2026 alchaincyf (花叔 · 花生)
 
-本 skill（以下简称「本作品」）包含 SKILL.md、scripts、references、assets、demos 及其全部派生内容。使用本作品视为同意以下条款：
+This skill (hereinafter the "Work") includes SKILL.md, scripts, references, assets, demos, and all derivative content. By using the Work you agree to the following terms.
+
+================================================================================
+ENGLISH
+================================================================================
+
+## 1. Permitted Use (free for individuals)
+
+The following uses require no authorization and no notice:
+
+- **Learning and research**: reading the code, modifying it, or adapting it for your own understanding
+- **Personal creation**: using the Work for your own articles, videos, side projects, or content on Xiaohongshu / WeChat Official Accounts / Bilibili / YouTube / X, etc.
+- **Non-commercial sharing**: building demos or tutorials based on the Work and publishing them on social platforms, blogs, or podcasts
+- **Derivative works**: creating derivative skills under your own personal repositories, provided you visibly credit the source in your README (`Derived from alchaincyf/huashu-design`)
+
+## 2. Restricted Use (prior authorization required)
+
+The following uses **require prior written authorization from Huasheng**:
+
+- Any **company, team, studio, or organization** integrating the Work into its internal toolchain or external products
+- Using the Work or its derivatives as a **delivery mechanism for paying clients** (including design outsourcing, brand consulting, B2B SaaS, etc.)
+- Building **commercial software products**, paid templates, or paid subscription services on top of the Work
+- **For-profit** training courses, commercial workshops, or paid private communities built on the Work
+- Using Work-generated content in **client-deliverable projects** (vendor-to-client deliverables)
+
+## 3. Commercial Licensing — Indicative Pricing
+
+Two standard commercial licensing options are typically offered:
+
+| Option | Fee | Term | Updates |
+|---|---|---|---|
+| **Annual License** | USD 1,800 | 12 months, renewable | All Updates released during the term |
+| **Perpetual License** | USD 3,500 | One-time, perpetual | Updates released within the first 12 months |
+
+Pricing above is indicative and may be adjusted based on company size, scope of use, and the number of licensed entities. Custom enterprise terms (multi-entity coverage, extended update windows, dedicated support, etc.) are available on request.
+
+Payment is made by SWIFT international wire transfer; bank charges are borne by the licensee.
+
+## 4. How to Request Commercial Authorization
+
+Email is the preferred contact channel for commercial inquiries:
+
+- **Email**: alchaincyf@gmail.com
+
+Alternatively, reach Huasheng on any of the following platforms:
+
+- X / Twitter: https://x.com/AlchainHust
+- WeChat Official Account: search "花叔" in WeChat
+- Bilibili: https://space.bilibili.com/14097567
+- YouTube: https://www.youtube.com/@Alchain
+- Xiaohongshu: https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf
+- Official site: https://www.huasheng.ai/
+
+## 5. Disclaimer
+
+The Work is provided "as is", without warranty of any kind, express or implied. The author shall not be liable for any damages arising from the use of the Work.
 
 ---
 
+In short: **personal use is free; commercial use requires a license — email alchaincyf@gmail.com.**
+
+================================================================================
+中文
+================================================================================
+
+本 skill（以下简称「本作品」）包含 SKILL.md、scripts、references、assets、demos 及其全部派生内容。使用本作品视为同意以下条款。
+
 ## 1. 允许的使用（个人免费）
 
 以下场景无需授权、无需打招呼：
@@ -24,9 +87,26 @@ Copyright (c) 2026 alchaincyf (花叔 · 花生)
 - 以**营利为目的**的培训课程、商业工作坊、闭门付费社群
 - 在**商单创作**（乙方向甲方交付物）中使用本作品生成的内容
 
-## 3. 授权联系方式
+## 3. 商用授权参考价位
+
+常用两种方案：
+
+| 方案 | 费用 | 有效期 | 更新 |
+|---|---|---|---|
+| **年度授权** | USD 1,800 | 12 个月，可续约 | 授权期内所有更新 |
+| **永久授权** | USD 3,500 | 一次性永久 | 首 12 个月内发布的更新 |
+
+以上为参考价位，具体可根据公司规模、使用范围、授权实体数量调整。如需企业定制条款（多实体覆盖、延长更新期、专属支持等）可单独商议。
+
+收款方式为 SWIFT 国际电汇，银行手续费由授权方承担。
+
+## 4. 商用授权联系方式
+
+优先邮箱联系：
+
+- **邮箱**：alchaincyf@gmail.com
 
-商用授权请通过以下任一平台联系花生：
+也可通过以下任一平台联系花生：
 
 - X / Twitter：https://x.com/AlchainHust
 - 公众号：微信搜索「花叔」
@@ -35,10 +115,10 @@ Copyright (c) 2026 alchaincyf (花叔 · 花生)
 - 小红书：https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf
 - 官网：https://www.huasheng.ai/
 
-## 4. 免责声明
+## 5. 免责声明
 
 本作品按「现状」提供，不提供任何明示或默示的担保。作者不对因使用本作品导致的任何损失承担责任。
 
 ---
 
-简而言之：**个人随便用，企业要打招呼。**
+简而言之：**个人随便用，企业请授权 —— 邮件 alchaincyf@gmail.com。**

README.en.md

@@ -1,311 +0,0 @@
-<sub><b>🌐 English</b> · <a href="README.md">中文</a></sub>
-
-<div align="center">
-
-# Huashu Design
-
-> *"Type. Hit enter. A finished design lands in your lap."*
-> *「打字。回车。一份能交付的设计。」*
-
-[![License](https://img.shields.io/badge/License-Personal%20Use%20Only-orange.svg)](LICENSE)
-[![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh)
-[![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)
-
-<br>
-
-**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**
-
-<br>
-
-3 to 30 minutes — you ship a **product launch animation**, a clickable App prototype, an editable PPT deck, a print-grade infographic.
-
-Not "decent for AI" quality — it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you out of AI slop territory.
-
-**Every animation in this README was made by huashu-design itself.** No Figma, no After Effects — just a sentence + skill run. Next product launch needs a promo video? You can make it too.
-
-```
-npx skills add alchaincyf/huashu-design
-```
-
-[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design)
-
-> 📖 **Note for English readers**: this skill is built by a Chinese-speaking developer. The skill's agent prompts (`SKILL.md`, `references/*.md`) are in Chinese but the agent is bilingual — works fine with English tasks. The demos below are the English parallel versions; the Chinese ones are in the default-named files (see the Chinese [README.md](README.md)).
-
-</div>
-
----
-
-<p align="center">
-  <video src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4" autoplay muted loop playsinline width="100%">
-    Your browser doesn't support inline video. <a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">Download MP4</a>.
-  </video>
-</p>
-
-<p align="center"><sub>▲ 10-second hero animation showing what huashu-design does (<a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">download MP4</a> if autoplay doesn't work)</sub></p>
-
----
-
-## Install
-
-```bash
-npx skills add alchaincyf/huashu-design
-```
-
-Then just talk to Claude Code:
-
-```
-"Make a keynote for AI psychology. Give me 3 style directions to pick from."
-"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
-"Turn this logic into a 60-second animation. Export MP4 and GIF."
-"Run a 5-dimension expert review on this design."
-```
-
-No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent.
-
----
-
-## Star History
-
-<p align="center">
-  <a href="https://star-history.com/#alchaincyf/huashu-design&Date">
-    <img src="https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date" alt="huashu-design Star History" width="80%">
-  </a>
-</p>
-
----
-
-## What it does
-
-| Capability | Deliverable | Typical time |
-|---|---|---|
-| Interactive prototype (App / Web) | Single-file HTML · real iPhone bezel · clickable · Playwright-verified | 10–15 min |
-| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | 15–25 min |
-| Motion design | MP4 (25fps / 60fps interpolation) + GIF (palette-optimized) + BGM | 8–12 min |
-| Design variations | 3+ side-by-side · Tweaks live params · cross-dimension exploration | 10 min |
-| Infographic / data viz | Print-quality typography · exports to PDF/PNG/SVG | 10 min |
-| Design direction advisor | 5 schools × 20 philosophies · 3 directions recommended · Demos generated in parallel | 5 min |
-| 5-dimension expert critique | Radar chart + Keep/Fix/Quick Wins · actionable punch list | 3 min |
-
----
-
-## Demo Gallery
-
-> English parallel versions of the demos. Chinese versions live at the default filenames (see the Chinese README).
-
-### Design Direction Advisor
-
-The fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor-en.gif" width="100%"></p>
-
-### iOS App Prototype
-
-Pixel-accurate iPhone 15 Pro body (Dynamic Island / status bar / Home Indicator) · state-driven multi-screen navigation · real images pulled from Wikimedia/Met/Unsplash · Playwright click tests before delivery.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype-en.gif" width="100%"></p>
-
-### Motion Design Engine
-
-Stage + Sprite time-slice model · `useTime` / `useSprite` / `interpolate` / `Easing` — four APIs cover every animation need · one command exports MP4 / GIF / 60fps-interpolated / BGM-scored finals.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design-en.gif" width="100%"></p>
-
-### HTML Slides → Editable PPTX
-
-HTML decks for browser presentation · `html2pptx.js` reads DOM computed styles and translates each element into real PowerPoint objects · exports are **actual text frames**, not image-bed fakes.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx-en.gif" width="100%"></p>
-
-### Tweaks · Live Variation Switching
-
-Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks-en.gif" width="100%"></p>
-
-### Infographic / Data Viz
-
-Magazine-grade typography · precise CSS Grid columns · `text-wrap: pretty` typographic details · driven by real data · exports to vector PDF / 300dpi PNG / SVG.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic-en.gif" width="100%"></p>
-
-### 5-Dimension Expert Critique
-
-Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review-en.gif" width="100%"></p>
-
-### Junior Designer Workflow
-
-No heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100× cheaper than fixing it late.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer-en.gif" width="100%"></p>
-
-### Core Asset Protocol · 5-step hard process
-
-Mandatory whenever the task involves a specific brand: ask → search → download (three fallback paths) → verify + extract → write `brand-spec.md` covering **logo, product shots, UI screenshots, colors, fonts** — all required assets, not just colors.
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol-en.gif" width="100%"></p>
-
----
-
-## Core Mechanics
-
-### Core Asset Protocol
-
-The hardest rule in the skill. When the task touches a specific brand (Stripe, Linear, Anthropic, DJI, your own company, etc.), five steps are enforced:
-
-| Step | Action | Purpose |
-|---|---|---|
-| 1 · Ask | Checklist of 6 asset types: logo / product shots / UI screenshots / color palette / fonts / brand guidelines | Respect existing resources |
-| 2 · Search official channels | `<brand>.com/brand` · `<brand>.com/press` · `brand.<brand>.com` · product pages · launch films | Find authoritative assets |
-| 3 · Download by asset type | Logo (SVG → inline-SVG in HTML → social avatar) · Product shots (hero → press kit → launch video frames → AI-generated from reference) · UI (App Store screenshots → official video frames) | Three fallback paths per asset type |
-| 4 · Verify + extract | Check logo fidelity · product image resolution · UI freshness · grep color hex from real assets | **Never guess from memory** |
-| 5 · Freeze to spec | Write `brand-spec.md` with logo paths, product image paths, UI screenshot paths, CSS variables for colors/fonts | Un-frozen knowledge evaporates |
-
-**Ranking of asset importance** (from the skill's internal rubric):
-
-1. Logo — mandatory for any brand
-2. Product renders — mandatory for physical products
-3. UI screenshots — mandatory for digital products
-4. Color values — auxiliary
-5. Fonts — auxiliary
-
-A/B-tested (v1 vs v2, 6 agents each): **v2 reduced stability variance by 5×**. Stability of stability — that's the real moat.
-
-### Design Direction Advisor (Fallback)
-
-Triggered when the brief is too vague to execute:
-
-- Don't run on generic intuition — enter Fallback mode
-- Recommend 3 differentiated directions from 5 schools × 20 philosophies, each **from a different school**
-- Each comes with flagship works, gestalt keywords, representative designer
-- Generate 3 visual demos in parallel, let the user choose
-- Once chosen, continue into the Junior Designer main flow
-
-### Junior Designer Workflow
-
-The default working mode across every task:
-
-- Send the full question set in one batch, wait for all answers before moving
-- Write assumptions + placeholders + reasoning comments directly into the HTML
-- Show it to the user early (even if just gray blocks)
-- Fill in real content → variations → Tweaks — show at each of these three steps
-- Manually eyeball the browser with Playwright before delivery
-
-### Fact Verification First (Principle #0)
-
-The highest-priority rule, added after a real failure mode: when the task mentions a specific product / technology / event (e.g., "DJI Pocket 4", "Nano Banana Pro", "Gemini 3 Pro"), the first action **must** be a `WebSearch` to confirm existence, release status, current version, and specs. No claims from training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1–2 hours of rework.
-
-### Anti AI-slop Rules
-
-Avoid the visual common denominator of AI output (purple gradients / emoji icons / rounded-corner + left border accent / SVG humans / Inter-as-display / **CSS silhouettes standing in for real product shots**). Use `text-wrap: pretty` + CSS Grid + carefully chosen serif display faces + oklch colors.
-
----
-
-## vs. Claude Design
-
-I'll be upfront: the Core Asset Protocol's philosophy was lifted from system prompts Anthropic wrote for Claude Design. That prompt hammers home a single idea — **great hi-fi design doesn't start from a blank page, it grows from existing design context**. That one principle is the difference between a 65-point design and a 90-point design.
-
-Positioning differences:
-
-| | Claude Design | huashu-design |
-|---|---|---|
-| Form | Web product (used in browser) | Skill (used in Claude Code) |
-| Quota | Subscription quota | API usage · parallel agents unblocked |
-| Output | Canvas + Figma export | HTML / MP4 / GIF / editable PPTX / PDF |
-| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |
-| Complex animation | Limited | Stage + Sprite timeline · 60fps export |
-| Agent compatibility | Claude.ai only | Claude Code / Cursor / Trae / Hermes / OpenClaw |
-
-Claude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences.
-
----
-
-## Limitations
-
-- **No layer-editable PPTX-to-Figma round-trip.** The output is HTML — screenshottable, recordable, image-exportable, but not draggable into Keynote for text-position tweaks.
-- **Framer-Motion-tier complex animations are out of scope.** 3D, physics simulation, particle systems exceed the skill's boundaries.
-- **Brand-from-zero design quality drops to 60–65 points.** Drawing hi-fi from nothing was always a last resort.
-
-This is an 80-point skill, not a 100-point product. For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product.
-
----
-
-## Repository Structure
-
-```
-huashu-design/
-├── SKILL.md                 # Main doc (read by agent, Chinese)
-├── README.md                # Chinese README (default)
-├── README.en.md             # English README (this file)
-├── assets/                  # Starter Components
-│   ├── animations.jsx       # Stage + Sprite + Easing + interpolate
-│   ├── ios_frame.jsx        # iPhone 15 Pro bezel
-│   ├── android_frame.jsx
-│   ├── macos_window.jsx
-│   ├── browser_window.jsx
-│   ├── deck_stage.js        # HTML deck engine
-│   ├── deck_index.html      # Multi-file deck assembler
-│   ├── design_canvas.jsx    # Side-by-side variation display
-│   ├── showcases/           # 24 prebuilt samples (8 scenes × 3 styles)
-│   └── bgm-*.mp3            # 6 scene-specific background tracks
-├── references/              # Drill-down docs by task (Chinese)
-│   ├── animation-pitfalls.md
-│   ├── design-styles.md     # 20 design philosophies in detail
-│   ├── slide-decks.md
-│   ├── editable-pptx.md
-│   ├── critique-guide.md
-│   ├── video-export.md
-│   └── ...
-├── scripts/                 # Export toolchain
-│   ├── render-video.js      # HTML → MP4
-│   ├── convert-formats.sh   # MP4 → 60fps + GIF
-│   ├── add-music.sh         # MP4 + BGM
-│   ├── export_deck_pdf.mjs
-│   ├── export_deck_pptx.mjs
-│   ├── html2pptx.js
-│   └── verify.py
-└── demos/                   # Capability demos referenced by this README
-```
-
----
-
-## Origin Story
-
-The day Anthropic launched Claude Design I played with it until 4 a.m. A few days later I realized I hadn't opened it once since — not because it's bad (it's the most polished product in the category) but because I'd rather have an agent work in my terminal than open any graphical UI.
-
-So I had an agent deconstruct Claude Design itself (including the system prompts circulating in the community, the brand asset protocol, the component mechanics), distill it into a structured spec, then write it as a skill installed in my own Claude Code.
-
-Thanks to Anthropic for writing the Claude Design prompts so clearly. This kind of derivative work inspired by other products is the new form of open-source culture in the AI era.
-
----
-
-## License · Usage Rights
-
-**Personal use is free and unrestricted** — studying, research, creating things for yourself, writing articles, side projects, personal social media. Use it freely, no need to ask.
-
-**Enterprise / commercial use is restricted** — any company, team, or for-profit organization integrating this skill into a product, external service, or client deliverable **must obtain authorization from Huasheng first**. Including but not limited to:
-- Using the skill as part of internal company tooling
-- Using skill outputs as the primary creative method for external deliverables
-- Building a commercial product on top of the skill
-- Using it in paid client projects
-
-**Commercial licensing contact**: any of the social platforms below.
-
----
-
-## Connect · Huasheng (Huashu)
-
-Huasheng is an AI-native coder, independent developer, and AI content creator. Notable work: Cat Fill Light (App Store Top 1 in Paid category), *A Book on DeepSeek*, Nüwa.skill (GitHub 12k+ stars). Combined 300k+ followers across platforms.
-
-| Platform | Handle | Link |
-|---|---|---|
-| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
-| WeChat Official Account | 花叔 | Search "花叔" in WeChat |
-| Bilibili | 花叔 | https://space.bilibili.com/14097567 |
-| YouTube | 花叔 | https://www.youtube.com/@Alchain |
-| Xiaohongshu | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
-| Official Site | huasheng.ai | https://www.huasheng.ai/ |
-| Developer Hub | bookai.top | https://bookai.top |
-
-For commercial licensing, collaborations, or sponsored content, DM on any of the above.

README.md

@@ -1,11 +1,11 @@
-<sub>🌐 <a href="README.en.md">English</a> · <b>中文</b></sub>
+<sub><b>🌐 English</b> · <a href="README.zh.md">中文</a></sub>
 
 <div align="center">
 
 # Huashu Design
 
-> *「打字。回车。一份能交付的设计。」*
 > *"Type. Hit enter. A finished design lands in your lap."*
+> *「打字。回车。一份能交付的设计。」*
 
 [![License](https://img.shields.io/badge/License-Personal%20Use%20Only-orange.svg)](LICENSE)
 [![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh)
@@ -13,60 +13,60 @@
 
 <br>
 
-**在你的 agent 里打一句话，拿回一份能交付的设计。**
+**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**
 
 <br>
 
-3 到 30 分钟，你能 ship 一段**产品发布动画**、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。
+3 to 30 minutes — you ship a **product launch animation**, a clickable App prototype, an editable PPT deck, a print-grade infographic.
 
-不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质；什么都不给，内置的 20 种设计语汇也能兜底到不出 AI slop。
+Not "decent for AI" quality — it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you out of AI slop territory.
 
-**你看到这篇 README 里的每一个动画，都是 huashu-design 自己做的。** 不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。下次产品发布要做宣传片？现在你也能做。
+**Every animation in this README was made by huashu-design itself.** No Figma, no After Effects — just a sentence + skill run. Next product launch needs a promo video? You can make it too.
 
 ```
 npx skills add alchaincyf/huashu-design
 ```
 
-跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。
+[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design)
 
-[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)
+> 📖 **Note for English readers**: this skill is built by a Chinese-speaking developer. The skill's agent prompts (`SKILL.md`, `references/*.md`) are in Chinese but the agent is bilingual — works fine with English tasks. The demos below are the English parallel versions; the Chinese ones are in the default-named files (see the [Chinese README](README.zh.md)).
+>
+> 📖 **致中文读者**：这个 skill 由花叔（@AlchainHust）开发。一句话能让 agent 在 3–30 分钟内交付**产品发布动画 / 可点击 App 原型 / 可编辑 PPT / 印刷级信息图**。完整中文介绍见 [README.zh.md](README.zh.md)。
 
 </div>
 
 ---
 
 <p align="center">
-  <img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.gif" alt="huashu-design Hero · 打字 → 选方向 → 画廊展开 → 聚焦 → 品牌显形" width="100%">
+  <video src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4" autoplay muted loop playsinline width="100%">
+    Your browser doesn't support inline video. <a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">Download MP4</a>.
+  </video>
 </p>
 
-<p align="center"><sub>
-  ▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal<br>
-  👉 <a href="https://www.huasheng.ai/huashu-design-hero/">访问带音效的 HTML 互动版</a> ·
-  <a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">下载 MP4（含 BGM+SFX · 10MB）</a>
-</sub></p>
+<p align="center"><sub>▲ 10-second hero animation showing what huashu-design does (<a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">download MP4</a> if autoplay doesn't work)</sub></p>
 
 ---
 
-## 装上就能用
+## Install
 
 ```bash
 npx skills add alchaincyf/huashu-design
 ```
 
-然后在 Claude Code 里直接说话：
+Then just talk to Claude Code:
 
 ```
-「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
-「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」
-「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」
-「帮我对这个设计做一个 5 维度评审」
+"Make a keynote for AI psychology. Give me 3 style directions to pick from."
+"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable."
+"Turn this logic into a 60-second animation. Export MP4 and GIF."
+"Run a 5-dimension expert review on this design."
 ```
 
-没有按钮、没有面板、没有 Figma 插件。
+No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent.
 
 ---
 
-## Star 趋势
+## Star History
 
 <p align="center">
   <a href="https://star-history.com/#alchaincyf/huashu-design&Date">
@@ -76,201 +76,190 @@ npx skills add alchaincyf/huashu-design
 
 ---
 
-## 能做什么
+## What it does
 
-| 能力 | 交付物 | 典型耗时 |
-|------|--------|----------|
-| 交互原型（App / Web） | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |
-| 演讲幻灯片 | HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留） | 15–25 min |
-| 时间轴动画 | MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM | 8–12 min |
-| 设计变体 | 3+ 并排对比 · Tweaks 实时调参 · 跨维度探索 | 10 min |
-| 信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |
-| 设计方向顾问 | 5 流派 × 20 种设计哲学 · 推荐 3 方向 · 并行生成 Demo | 5 min |
-| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min |
+| Capability | Deliverable | Typical time |
+|---|---|---|
+| Interactive prototype (App / Web) | Single-file HTML · real iPhone bezel · clickable · Playwright-verified | 10–15 min |
+| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | 15–25 min |
+| Motion design | MP4 (25fps / 60fps interpolation) + GIF (palette-optimized) + BGM | 8–12 min |
+| Design variations | 3+ side-by-side · Tweaks live params · cross-dimension exploration | 10 min |
+| Infographic / data viz | Print-quality typography · exports to PDF/PNG/SVG | 10 min |
+| Design direction advisor | 5 schools × 20 philosophies · 3 directions recommended · Demos generated in parallel | 5 min |
+| 5-dimension expert critique | Radar chart + Keep/Fix/Quick Wins · actionable punch list | 3 min |
 
 ---
 
-## Demo 画廊
+## Demo Gallery
 
-### 设计方向顾问
+> English parallel versions of the demos. Chinese versions live at the default filenames (see the Chinese README).
 
-模糊需求时的 fallback：从 5 流派 × 20 种设计哲学里挑 3 个差异化方向，并行生成 3 个 Demo 让你选。
+### Design Direction Advisor
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor.gif" width="100%"></p>
+The fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.
 
-### iOS App 原型
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor-en.gif" width="100%"></p>
 
-iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。
+### iOS App Prototype
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype.gif" width="100%"></p>
+Pixel-accurate iPhone 15 Pro body (Dynamic Island / status bar / Home Indicator) · state-driven multi-screen navigation · real images pulled from Wikimedia/Met/Unsplash · Playwright click tests before delivery.
 
-### Motion Design 引擎
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype-en.gif" width="100%"></p>
 
-Stage + Sprite 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。
+### Motion Design Engine
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design.gif" width="100%"></p>
+Stage + Sprite time-slice model · `useTime` / `useSprite` / `interpolate` / `Easing` — four APIs cover every animation need · one command exports MP4 / GIF / 60fps-interpolated / BGM-scored finals.
 
-### HTML Slides → 可编辑 PPTX
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design-en.gif" width="100%"></p>
 
-HTML deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**，PPT 里双击即可编辑。
+### HTML Slides → Editable PPTX
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx.gif" width="100%"></p>
+HTML decks for browser presentation · `html2pptx.js` reads DOM computed styles and translates each element into real PowerPoint objects · exports are **actual text frames**, not image-bed fakes.
 
-### Tweaks · 实时变体切换
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx-en.gif" width="100%"></p>
 
-配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。
+### Tweaks · Live Variation Switching
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks.gif" width="100%"></p>
+Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.
 
-### 信息图 / 数据可视化
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks-en.gif" width="100%"></p>
 
-杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。
+### Infographic / Data Viz
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic.gif" width="100%"></p>
+Magazine-grade typography · precise CSS Grid columns · `text-wrap: pretty` typographic details · driven by real data · exports to vector PDF / 300dpi PNG / SVG.
 
-### 5 维度专家评审
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic-en.gif" width="100%"></p>
 
-哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。
+### 5-Dimension Expert Critique
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review.gif" width="100%"></p>
+Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list.
 
-### Junior Designer 工作流
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review-en.gif" width="100%"></p>
 
-不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。
+### Junior Designer Workflow
 
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer.gif" width="100%"></p>
+No heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100× cheaper than fixing it late.
 
-### 品牌资产协议 5 步硬流程
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer-en.gif" width="100%"></p>
 
-涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 `brand-spec.md`。
-
-<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol.gif" width="100%"></p>
-
----
+### Core Asset Protocol · 5-step hard process
 
-## Showcase · 真实案例
+Mandatory whenever the task involves a specific brand: ask → search → download (three fallback paths) → verify + extract → write `brand-spec.md` covering **logo, product shots, UI screenshots, colors, fonts** — all required assets, not just colors.
 
-### 「聊聊 skill」 · PM after-party 演讲 deck
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol-en.gif" width="100%"></p>
 
-> **Live demo · [https://skill-huasheng.vercel.app](https://skill-huasheng.vercel.app)**
-
-13 页 HTML deck，**全部用 huashu-design 完成**：
+---
 
-- 黑底极简衬线视觉系统（cover / about / hook / what / why / closing）
-- 2 个带 BGM + SFX 的 22 秒 cinematic demo（Nuwa skill workflow + Darwin skill workflow），各采用**完全独立的视觉语言**：
-  - **Nuwa**：3D 知识 orbit + Pentagon 提炼 + SKILL.md typewriter + 「21 分钟」hero reveal
-  - **Darwin**：autoresearch loop spin + v1/v5 并列 diff + Hill-Climb 全屏曲线 + Ratchet gear lock
-- 每个 cinematic 默认显示**完整静态 workflow dashboard**（观众随时能看清 skill 怎么跑），点 ▶ 才触发动画，跑完自动 fade 回 dashboard
-- 嵌入 huasheng.ai 的 25 秒 hero 动画（iframe 本地化兜底）
-- 真实数据：14,495 stargazers 真实曲线（gh API 拉取）+ DeepSeek V4 真实 specs（WebSearch 验证）
-- 真实 AI 素材：用 `huashu-gpt-image` 跑 4×2 grid 大图，`extract_grid.py` 抠出 8 张独立透明 PNG，做 3D orbit 漂浮
+## Core Mechanics
 
-**适合参考的页面**：
-- `/slides/slide-04b-nuwa-flow.html` · 静态 dashboard + cinematic overlay 双层架构
-- `/slides/slide-06b-darwin-flow.html` · 完全独立视觉语言的对照案例
-- `/slides/slide-03b-deepseek-cover.html` · AI slop vs 真实设计师视角的对比页
+### Core Asset Protocol
 
-详细 cinematic patterns 见 `references/cinematic-patterns.md`。
+The hardest rule in the skill. When the task touches a specific brand (Stripe, Linear, Anthropic, DJI, your own company, etc.), five steps are enforced:
 
----
+| Step | Action | Purpose |
+|---|---|---|
+| 1 · Ask | Checklist of 6 asset types: logo / product shots / UI screenshots / color palette / fonts / brand guidelines | Respect existing resources |
+| 2 · Search official channels | `<brand>.com/brand` · `<brand>.com/press` · `brand.<brand>.com` · product pages · launch films | Find authoritative assets |
+| 3 · Download by asset type | Logo (SVG → inline-SVG in HTML → social avatar) · Product shots (hero → press kit → launch video frames → AI-generated from reference) · UI (App Store screenshots → official video frames) | Three fallback paths per asset type |
+| 4 · Verify + extract | Check logo fidelity · product image resolution · UI freshness · grep color hex from real assets | **Never guess from memory** |
+| 5 · Freeze to spec | Write `brand-spec.md` with logo paths, product image paths, UI screenshot paths, CSS variables for colors/fonts | Un-frozen knowledge evaporates |
 
-## 核心机制
+**Ranking of asset importance** (from the skill's internal rubric):
 
-### 品牌资产协议
+1. Logo — mandatory for any brand
+2. Product renders — mandatory for physical products
+3. UI screenshots — mandatory for digital products
+4. Color values — auxiliary
+5. Fonts — auxiliary
 
-skill 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步：
+A/B-tested (v1 vs v2, 6 agents each): **v2 reduced stability variance by 5×**. Stability of stability — that's the real moat.
 
-| 步骤 | 动作 | 目的 |
-|------|------|------|
-| 1 · 问 | 用户有 brand guidelines 吗？ | 尊重已有资源 |
-| 2 · 搜官方品牌页 | `<brand>.com/brand` · `brand.<brand>.com` · `<brand>.com/press` | 抓权威色值 |
-| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底，前一条失败立刻走下一条 |
-| 4 · grep 提取色值 | 从资产里抓所有 `#xxxxxx`，按频率排序，过滤黑白灰 | **绝不从记忆猜品牌色** |
-| 5 · 固化 spec | 写 `brand-spec.md` + CSS 变量，所有 HTML 引用 `var(--brand-*)` | 不固化就会忘 |
+### Design Direction Advisor (Fallback)
 
-A/B 测试（v1 vs v2，各跑 6 agent）：**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性，这是 skill 真正的护城河。
+Triggered when the brief is too vague to execute:
 
-### 设计方向顾问（Fallback）
+- Don't run on generic intuition — enter Fallback mode
+- Recommend 3 differentiated directions from 5 schools × 20 philosophies, each **from a different school**
+- Each comes with flagship works, gestalt keywords, representative designer
+- Generate 3 visual demos in parallel, let the user choose
+- Once chosen, continue into the Junior Designer main flow
 
-当用户需求模糊到无法着手时触发：
+### Junior Designer Workflow
 
-- 不凭通用直觉硬做，进入 Fallback 模式
-- 从 5 流派 × 20 种设计哲学里推荐 3 个**必须来自不同流派**的差异化方向
-- 每个方向配代表作、气质关键词、代表设计师
-- 并行生成 3 个视觉 Demo 让用户选
-- 选定后进入主干 Junior Designer 流程
+The default working mode across every task:
 
-### Junior Designer 工作流
+- Send the full question set in one batch, wait for all answers before moving
+- Write assumptions + placeholders + reasoning comments directly into the HTML
+- Show it to the user early (even if just gray blocks)
+- Fill in real content → variations → Tweaks — show at each of these three steps
+- Manually eyeball the browser with Playwright before delivery
 
-默认工作模式，贯穿所有任务：
+### Fact Verification First (Principle #0)
 
-- 开工前 show 问题清单一次性发给用户，等批量答完再动手
-- HTML 里先写 assumptions + placeholders + reasoning comments
-- 尽早 show 给用户（哪怕只是灰色方块）
-- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次
-- 交付前用 Playwright 肉眼过一遍浏览器
+The highest-priority rule, added after a real failure mode: when the task mentions a specific product / technology / event (e.g., "DJI Pocket 4", "Nano Banana Pro", "Gemini 3 Pro"), the first action **must** be a `WebSearch` to confirm existence, release status, current version, and specs. No claims from training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1–2 hours of rework.
 
-### 反 AI slop 规则
+### Anti AI-slop Rules
 
-避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。
+Avoid the visual common denominator of AI output (purple gradients / emoji icons / rounded-corner + left border accent / SVG humans / Inter-as-display / **CSS silhouettes standing in for real product shots**). Use `text-wrap: pretty` + CSS Grid + carefully chosen serif display faces + oklch colors.
 
 ---
 
-## 和 Claude Design 的关系
+## vs. Claude Design
 
-我大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。
+I'll be upfront: the Core Asset Protocol's philosophy was lifted from system prompts Anthropic wrote for Claude Design. That prompt hammers home a single idea — **great hi-fi design doesn't start from a blank page, it grows from existing design context**. That one principle is the difference between a 65-point design and a 90-point design.
 
-定位差异：
+Positioning differences:
 
 | | Claude Design | huashu-design |
 |---|---|---|
-| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） |
-| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 |
-| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
-| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） |
-| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
-| 跨 agent | 专属 Claude.ai | 任意 skill 兼容 agent |
+| Form | Web product (used in browser) | Skill (used in Claude Code) |
+| Quota | Subscription quota | API usage · parallel agents unblocked |
+| Output | Canvas + Figma export | HTML / MP4 / GIF / editable PPTX / PDF |
+| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |
+| Complex animation | Limited | Stage + Sprite timeline · 60fps export |
+| Agent compatibility | Claude.ai only | Claude Code / Cursor / Trae / Hermes / OpenClaw |
 
-Claude Design 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。两条路，不同受众。
+Claude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences.
 
 ---
 
 ## Limitations
 
-- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。
-- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。
-- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 last resort。
+- **No layer-editable PPTX-to-Figma round-trip.** The output is HTML — screenshottable, recordable, image-exportable, but not draggable into Keynote for text-position tweaks.
+- **Framer-Motion-tier complex animations are out of scope.** 3D, physics simulation, particle systems exceed the skill's boundaries.
+- **Brand-from-zero design quality drops to 60–65 points.** Drawing hi-fi from nothing was always a last resort.
 
-这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。
+This is an 80-point skill, not a 100-point product. For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product.
 
 ---
 
-## 仓库结构
+## Repository Structure
 
 ```
 huashu-design/
-├── SKILL.md                 # 主文档（给 agent 读）
-├── README.md                # 本文件（给用户读）
+├── SKILL.md                 # Main doc (read by agent, Chinese)
+├── README.md                # English README (default, this file)
+├── README.zh.md             # Chinese README
 ├── assets/                  # Starter Components
 │   ├── animations.jsx       # Stage + Sprite + Easing + interpolate
 │   ├── ios_frame.jsx        # iPhone 15 Pro bezel
 │   ├── android_frame.jsx
 │   ├── macos_window.jsx
 │   ├── browser_window.jsx
-│   ├── deck_stage.js        # HTML 幻灯片引擎
-│   ├── deck_index.html      # 多文件 deck 拼接器
-│   ├── design_canvas.jsx    # 并排变体展示
-│   ├── showcases/           # 24 个预制样例（8 场景 × 3 风格）
-│   └── bgm-*.mp3            # 6 首场景化背景音乐
-├── references/              # 按任务深入读的子文档
+│   ├── deck_stage.js        # HTML deck engine
+│   ├── deck_index.html      # Multi-file deck assembler
+│   ├── design_canvas.jsx    # Side-by-side variation display
+│   ├── showcases/           # 24 prebuilt samples (8 scenes × 3 styles)
+│   └── bgm-*.mp3            # 6 scene-specific background tracks
+├── references/              # Drill-down docs by task (Chinese)
 │   ├── animation-pitfalls.md
-│   ├── design-styles.md     # 20 种设计哲学详细库
+│   ├── design-styles.md     # 20 design philosophies in detail
 │   ├── slide-decks.md
 │   ├── editable-pptx.md
 │   ├── critique-guide.md
 │   ├── video-export.md
 │   └── ...
-├── scripts/                 # 导出工具链
+├── scripts/                 # Export toolchain
 │   ├── render-video.js      # HTML → MP4
 │   ├── convert-formats.sh   # MP4 → 60fps + GIF
 │   ├── add-music.sh         # MP4 + BGM
@@ -278,47 +267,49 @@ huashu-design/
 │   ├── export_deck_pptx.mjs
 │   ├── html2pptx.js
 │   └── verify.py
-└── demos/                   # 9 个能力演示 (c*/w*)，中英双版 GIF/MP4/HTML + hero v10
+└── demos/                   # Capability demos referenced by this README
 ```
 
 ---
 
-## 起源
+## Origin Story
 
-Anthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它，不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面。
+The day Anthropic launched Claude Design I played with it until 4 a.m. A few days later I realized I hadn't opened it once since — not because it's bad (it's the most polished product in the category) but because I'd rather have an agent work in my terminal than open any graphical UI.
 
-于是让 agent 拆解 Claude Design 本身（包括社区流传的系统提示词、品牌资产协议、组件机制），蒸馏成结构化 spec，再写成 skill 装进自己的 Claude Code。
+So I had an agent deconstruct Claude Design itself (including the system prompts circulating in the community, the brand asset protocol, the component mechanics), distill it into a structured spec, then write it as a skill installed in my own Claude Code.
 
-感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态。
+Thanks to Anthropic for writing the Claude Design prompts so clearly. This kind of derivative work inspired by other products is the new form of open-source culture in the AI era.
 
 ---
 
-## License · 使用授权
+## License · Usage Rights
+
+**Personal use is free and unrestricted** — studying, research, creating things for yourself, writing articles, side projects, personal social media. Use it freely, no need to ask.
 
-**个人使用免费、自由**——学习、研究、创作、给自己做东西、写文章、做副业、发微博发公众号，随便用，不用打招呼。
+**Enterprise / commercial use is restricted** — any company, team, or for-profit organization integrating this skill into a product, external service, or client deliverable **must obtain authorization from Huasheng first**. Including but not limited to:
+- Using the skill as part of internal company tooling
+- Using skill outputs as the primary creative method for external deliverables
+- Building a commercial product on top of the skill
+- Using it in paid client projects
 
-**企业商用禁止**——任何公司、团队、或以盈利为目的的组织，想把本 skill 集成到产品、对外服务、给客户交付工作中使用，**必须先和花生联系获得授权**。包括但不限于：
-- 把 skill 作为公司内部工具链的一部分
-- 把 skill 产出物作为对外交付物的主要创作手段
-- 基于 skill 二次开发做成商业产品
-- 在客户商单项目中使用
+**Indicative pricing**: USD 1,800 / year (Annual) or USD 3,500 one-time (Perpetual). Custom enterprise terms available. See [LICENSE](LICENSE) for full terms.
 
-**商用授权联系方式**见下方社交平台。
+**Commercial licensing contact**: email **alchaincyf@gmail.com** (preferred) or DM on any social platform below.
 
 ---
 
-## Connect · 花生（花叔）
+## Connect · Huasheng (Huashu)
 
-花生是 AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star）。自媒体全平台 30 万+ 粉丝。
+Huasheng is an AI-native coder, independent developer, and AI content creator. Notable work: Cat Fill Light (App Store Top 1 in Paid category), *A Book on DeepSeek*, Nüwa.skill (GitHub 12k+ stars). Combined 300k+ followers across platforms.
 
-| 平台 | 账号 | 链接 |
+| Platform | Handle | Link |
 |---|---|---|
 | X / Twitter | @AlchainHust | https://x.com/AlchainHust |
-| 公众号 | 花叔 | 微信搜索「花叔」 |
-| B 站 | 花叔 | https://space.bilibili.com/14097567 |
+| WeChat Official Account | 花叔 | Search "花叔" in WeChat |
+| Bilibili | 花叔 | https://space.bilibili.com/14097567 |
 | YouTube | 花叔 | https://www.youtube.com/@Alchain |
-| 小红书 | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
-| 官网 | huasheng.ai | https://www.huasheng.ai/ |
-| 开发者主页 | bookai.top | https://bookai.top |
+| Xiaohongshu | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
+| Official Site | huasheng.ai | https://www.huasheng.ai/ |
+| Developer Hub | bookai.top | https://bookai.top |
 
-商用授权、合作咨询、自媒体约稿 → 以上任一平台私信花生即可。
+For commercial licensing, collaborations, or sponsored content, DM on any of the above.

README.zh.md

@@ -0,0 +1,327 @@
+<sub>🌐 <a href="README.md">English</a> · <b>中文</b></sub>
+
+<div align="center">
+
+# Huashu Design
+
+> *「打字。回车。一份能交付的设计。」*
+> *"Type. Hit enter. A finished design lands in your lap."*
+
+[![License](https://img.shields.io/badge/License-Personal%20Use%20Only-orange.svg)](LICENSE)
+[![Agent-Agnostic](https://img.shields.io/badge/Agent-Agnostic-blueviolet)](https://skills.sh)
+[![Skills](https://img.shields.io/badge/skills.sh-Compatible-green)](https://skills.sh)
+
+<br>
+
+**在你的 agent 里打一句话，拿回一份能交付的设计。**
+
+<br>
+
+3 到 30 分钟，你能 ship 一段**产品发布动画**、一个能点击的 App 原型、一套能编辑的 PPT、一份印刷级的信息图。
+
+不是「AI 做的还行」那种水平——是看起来像大厂设计团队做的。给 skill 你的品牌资产（logo、色板、UI 截图），它会读懂你的品牌气质；什么都不给，内置的 20 种设计语汇也能兜底到不出 AI slop。
+
+**你看到这篇 README 里的每一个动画，都是 huashu-design 自己做的。** 不是 Figma，不是 AE，就是一句话 prompt + skill 跑通。下次产品发布要做宣传片？现在你也能做。
+
+```
+npx skills add alchaincyf/huashu-design
+```
+
+跨 agent 通用——Claude Code、Cursor、Codex、OpenClaw、Hermes 都能装。
+
+[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)
+
+</div>
+
+---
+
+<p align="center">
+  <img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.gif" alt="huashu-design Hero · 打字 → 选方向 → 画廊展开 → 聚焦 → 品牌显形" width="100%">
+</p>
+
+<p align="center"><sub>
+  ▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal<br>
+  👉 <a href="https://www.huasheng.ai/huashu-design-hero/">访问带音效的 HTML 互动版</a> ·
+  <a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">下载 MP4（含 BGM+SFX · 10MB）</a>
+</sub></p>
+
+---
+
+## 装上就能用
+
+```bash
+npx skills add alchaincyf/huashu-design
+```
+
+然后在 Claude Code 里直接说话：
+
+```
+「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
+「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」
+「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」
+「帮我对这个设计做一个 5 维度评审」
+```
+
+没有按钮、没有面板、没有 Figma 插件。
+
+---
+
+## Star 趋势
+
+<p align="center">
+  <a href="https://star-history.com/#alchaincyf/huashu-design&Date">
+    <img src="https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date" alt="huashu-design Star History" width="80%">
+  </a>
+</p>
+
+---
+
+## 能做什么
+
+| 能力 | 交付物 | 典型耗时 |
+|------|--------|----------|
+| 交互原型（App / Web） | 单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证 | 10–15 min |
+| 演讲幻灯片 | HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留） | 15–25 min |
+| 时间轴动画 | MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM | 8–12 min |
+| 设计变体 | 3+ 并排对比 · Tweaks 实时调参 · 跨维度探索 | 10 min |
+| 信息图 / 可视化 | 印刷级排版 · 可导 PDF/PNG/SVG | 10 min |
+| 设计方向顾问 | 5 流派 × 20 种设计哲学 · 推荐 3 方向 · 并行生成 Demo | 5 min |
+| 5 维度专家评审 | 雷达图 + Keep/Fix/Quick Wins · 可操作修复清单 | 3 min |
+
+---
+
+## Demo 画廊
+
+### 设计方向顾问
+
+模糊需求时的 fallback：从 5 流派 × 20 种设计哲学里挑 3 个差异化方向，并行生成 3 个 Demo 让你选。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor.gif" width="100%"></p>
+
+### iOS App 原型
+
+iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype.gif" width="100%"></p>
+
+### Motion Design 引擎
+
+Stage + Sprite 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design.gif" width="100%"></p>
+
+### HTML Slides → 可编辑 PPTX
+
+HTML deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**，PPT 里双击即可编辑。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx.gif" width="100%"></p>
+
+### Tweaks · 实时变体切换
+
+配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks.gif" width="100%"></p>
+
+### 信息图 / 数据可视化
+
+杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic.gif" width="100%"></p>
+
+### 5 维度专家评审
+
+哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review.gif" width="100%"></p>
+
+### Junior Designer 工作流
+
+不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer.gif" width="100%"></p>
+
+### 品牌资产协议 5 步硬流程
+
+涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 `brand-spec.md`。
+
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol.gif" width="100%"></p>
+
+---
+
+## Showcase · 真实案例
+
+### 「聊聊 skill」 · PM after-party 演讲 deck
+
+> **Live demo · [https://skill-huasheng.vercel.app](https://skill-huasheng.vercel.app)**
+
+13 页 HTML deck，**全部用 huashu-design 完成**：
+
+- 黑底极简衬线视觉系统（cover / about / hook / what / why / closing）
+- 2 个带 BGM + SFX 的 22 秒 cinematic demo（Nuwa skill workflow + Darwin skill workflow），各采用**完全独立的视觉语言**：
+  - **Nuwa**：3D 知识 orbit + Pentagon 提炼 + SKILL.md typewriter + 「21 分钟」hero reveal
+  - **Darwin**：autoresearch loop spin + v1/v5 并列 diff + Hill-Climb 全屏曲线 + Ratchet gear lock
+- 每个 cinematic 默认显示**完整静态 workflow dashboard**（观众随时能看清 skill 怎么跑），点 ▶ 才触发动画，跑完自动 fade 回 dashboard
+- 嵌入 huasheng.ai 的 25 秒 hero 动画（iframe 本地化兜底）
+- 真实数据：14,495 stargazers 真实曲线（gh API 拉取）+ DeepSeek V4 真实 specs（WebSearch 验证）
+- 真实 AI 素材：用 `huashu-gpt-image` 跑 4×2 grid 大图，`extract_grid.py` 抠出 8 张独立透明 PNG，做 3D orbit 漂浮
+
+**适合参考的页面**：
+- `/slides/slide-04b-nuwa-flow.html` · 静态 dashboard + cinematic overlay 双层架构
+- `/slides/slide-06b-darwin-flow.html` · 完全独立视觉语言的对照案例
+- `/slides/slide-03b-deepseek-cover.html` · AI slop vs 真实设计师视角的对比页
+
+详细 cinematic patterns 见 `references/cinematic-patterns.md`。
+
+---
+
+## 核心机制
+
+### 品牌资产协议
+
+skill 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步：
+
+| 步骤 | 动作 | 目的 |
+|------|------|------|
+| 1 · 问 | 用户有 brand guidelines 吗？ | 尊重已有资源 |
+| 2 · 搜官方品牌页 | `<brand>.com/brand` · `brand.<brand>.com` · `<brand>.com/press` | 抓权威色值 |
+| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底，前一条失败立刻走下一条 |
+| 4 · grep 提取色值 | 从资产里抓所有 `#xxxxxx`，按频率排序，过滤黑白灰 | **绝不从记忆猜品牌色** |
+| 5 · 固化 spec | 写 `brand-spec.md` + CSS 变量，所有 HTML 引用 `var(--brand-*)` | 不固化就会忘 |
+
+A/B 测试（v1 vs v2，各跑 6 agent）：**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性，这是 skill 真正的护城河。
+
+### 设计方向顾问（Fallback）
+
+当用户需求模糊到无法着手时触发：
+
+- 不凭通用直觉硬做，进入 Fallback 模式
+- 从 5 流派 × 20 种设计哲学里推荐 3 个**必须来自不同流派**的差异化方向
+- 每个方向配代表作、气质关键词、代表设计师
+- 并行生成 3 个视觉 Demo 让用户选
+- 选定后进入主干 Junior Designer 流程
+
+### Junior Designer 工作流
+
+默认工作模式，贯穿所有任务：
+
+- 开工前 show 问题清单一次性发给用户，等批量答完再动手
+- HTML 里先写 assumptions + placeholders + reasoning comments
+- 尽早 show 给用户（哪怕只是灰色方块）
+- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次
+- 交付前用 Playwright 肉眼过一遍浏览器
+
+### 反 AI slop 规则
+
+避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。
+
+---
+
+## 和 Claude Design 的关系
+
+我大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。
+
+定位差异：
+
+| | Claude Design | huashu-design |
+|---|---|---|
+| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） |
+| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 |
+| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF |
+| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） |
+| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 |
+| 跨 agent | 专属 Claude.ai | 任意 skill 兼容 agent |
+
+Claude Design 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。两条路，不同受众。
+
+---
+
+## Limitations
+
+- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。
+- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。
+- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 last resort。
+
+这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。
+
+---
+
+## 仓库结构
+
+```
+huashu-design/
+├── SKILL.md                 # 主文档（给 agent 读）
+├── README.md                # 英文 README（默认）
+├── README.zh.md             # 本文件（中文 README）
+├── assets/                  # Starter Components
+│   ├── animations.jsx       # Stage + Sprite + Easing + interpolate
+│   ├── ios_frame.jsx        # iPhone 15 Pro bezel
+│   ├── android_frame.jsx
+│   ├── macos_window.jsx
+│   ├── browser_window.jsx
+│   ├── deck_stage.js        # HTML 幻灯片引擎
+│   ├── deck_index.html      # 多文件 deck 拼接器
+│   ├── design_canvas.jsx    # 并排变体展示
+│   ├── showcases/           # 24 个预制样例（8 场景 × 3 风格）
+│   └── bgm-*.mp3            # 6 首场景化背景音乐
+├── references/              # 按任务深入读的子文档
+│   ├── animation-pitfalls.md
+│   ├── design-styles.md     # 20 种设计哲学详细库
+│   ├── slide-decks.md
+│   ├── editable-pptx.md
+│   ├── critique-guide.md
+│   ├── video-export.md
+│   └── ...
+├── scripts/                 # 导出工具链
+│   ├── render-video.js      # HTML → MP4
+│   ├── convert-formats.sh   # MP4 → 60fps + GIF
+│   ├── add-music.sh         # MP4 + BGM
+│   ├── export_deck_pdf.mjs
+│   ├── export_deck_pptx.mjs
+│   ├── html2pptx.js
+│   └── verify.py
+└── demos/                   # 9 个能力演示 (c*/w*)，中英双版 GIF/MP4/HTML + hero v10
+```
+
+---
+
+## 起源
+
+Anthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它，不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面。
+
+于是让 agent 拆解 Claude Design 本身（包括社区流传的系统提示词、品牌资产协议、组件机制），蒸馏成结构化 spec，再写成 skill 装进自己的 Claude Code。
+
+感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态。
+
+---
+
+## License · 使用授权
+
+**个人使用免费、自由**——学习、研究、创作、给自己做东西、写文章、做副业、发微博发公众号，随便用，不用打招呼。
+
+**企业商用禁止**——任何公司、团队、或以盈利为目的的组织，想把本 skill 集成到产品、对外服务、给客户交付工作中使用，**必须先和花生联系获得授权**。包括但不限于：
+- 把 skill 作为公司内部工具链的一部分
+- 把 skill 产出物作为对外交付物的主要创作手段
+- 基于 skill 二次开发做成商业产品
+- 在客户商单项目中使用
+
+**参考价位**：年度授权 USD 1,800 / 年，永久授权 USD 3,500 一次性。可按公司规模和使用范围定制企业条款。完整条款见 [LICENSE](LICENSE)。
+
+**商用授权联系方式**：邮件 **alchaincyf@gmail.com**（优先），或私信下方任一社交平台。
+
+---
+
+## Connect · 花生（花叔）
+
+花生是 AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star）。自媒体全平台 30 万+ 粉丝。
+
+| 平台 | 账号 | 链接 |
+|---|---|---|
+| X / Twitter | @AlchainHust | https://x.com/AlchainHust |
+| 公众号 | 花叔 | 微信搜索「花叔」 |
+| B 站 | 花叔 | https://space.bilibili.com/14097567 |
+| YouTube | 花叔 | https://www.youtube.com/@Alchain |
+| 小红书 | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf |
+| 官网 | huasheng.ai | https://www.huasheng.ai/ |
+| 开发者主页 | bookai.top | https://bookai.top |
+
+商用授权、合作咨询、自媒体约稿 → 以上任一平台私信花生即可。