feat: V2 重制 9 个演示 GIF + 新增英文版 + hero 升级到 v10

亮点:
- 统一 VI:全部对齐 hero-v10 色板 (#000000 + #D97757) 和 Brand Reveal 米色面板 signature
- 文字克制:每个 demo 控制在 20-48 字 / 15-36 词,从解释性文字转为锚点
- 中英平行:英文版不是字幕翻译,画面元素重新设计
- 高清 GIF:1280×720 · 25fps · full palette · sierra2_4a dither
- Concept-driven:每个 demo 都有清晰的核心传达隐喻,哑剧测试可过

文件变更:
- 9 个能力/流程 demo 全部 V2 重做(c1-c6, w1-w3),中英双版
- hero animation 从 v9 升级到 v10(中英双版)
- README.md 引用更新 v9 → v10
- README.en.md 所有 GIF 加 -en 后缀 + note 更新
- 移除冗余:20 个 -60fps.mp4(README 未引用)+ 18 个 demo MP4

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
alchainandClaude Opus 4.7 committed 2026-04-21 09:42:24 +08:00
1 parent b876d634ee
commit fed775c447
22 files changed
+19476 -6547

No files matched your search

+15 -15
View File
@@ -27,22 +27,22 @@ 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 for a Chinese-speaking audience. The skill's agent prompts (`SKILL.md`, `references/*.md`) and all demo assets below are in **Chinese** — they work with English tasks just fine (the agent is bilingual), but the visible text in screenshots/GIFs is Chinese. The core design principles translate universally.
> 📖 **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="demos/hero-animation-v9.mp4" autoplay muted loop playsinline width="100%">
Your browser doesn't support inline video. <a href="demos/hero-animation-v9.mp4">Download MP4</a>.
<video src="demos/hero-animation-v10-en.mp4" autoplay muted loop playsinline width="100%">
Your browser doesn't support inline video. <a href="demos/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="demos/hero-animation-v9.mp4">download MP4</a> if autoplay doesn't work)</sub></p>
<p align="center"><sub>▲ 10-second hero animation showing what huashu-design does (<a href="demos/hero-animation-v10-en.mp4">download MP4</a> if autoplay doesn't work)</sub></p>
<p align="center">
<img src="demos/w3-fallback-advisor.gif" alt="Fallback design advisor · 3 differentiated directions from 20 design philosophies" width="100%">
<img src="demos/w3-fallback-advisor-en.gif" alt="Fallback design advisor · 3 differentiated directions from 20 design philosophies" width="100%">
</p>
---
@@ -82,61 +82,61 @@ No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Cod
## Demo Gallery
> The demos below use Chinese text in UI but the mechanics apply to any language.
> 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="demos/w3-fallback-advisor.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/c1-ios-prototype.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/c3-motion-design.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/c2-slides-pptx.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/c4-tweaks.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/c5-infographic.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/c6-expert-review.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/w2-junior-designer.gif" width="100%"></p>
<p align="center"><img src="demos/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="demos/w1-brand-protocol.gif" width="100%"></p>
<p align="center"><img src="demos/w1-brand-protocol-en.gif" width="100%"></p>
---