|
@@ -36,12 +36,12 @@ npx skills add alchaincyf/huashu-design
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
<p align="center">
|
|
<p align="center">
|
|
|
- <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 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>
|
|
</video>
|
|
|
</p>
|
|
</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"><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>
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|
|
@@ -86,55 +86,55 @@ No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Cod
|
|
|
|
|
|
|
|
The fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### Tweaks · Live Variation Switching
|
|
|
|
|
|
|
|
Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.
|
|
Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.
|
|
|
|
|
|
|
|
-<p align="center"><img src="demos/c4-tweaks-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<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
|
|
### 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.
|
|
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-en.gif" width="100%"></p>
|
|
|
|
|
|
|
+<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol-en.gif" width="100%"></p>
|
|
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
|