From fed775c4478d1bdfbbce6a24a296fb1c0663e88c Mon Sep 17 00:00:00 2001 From: alchain Date: Tue, 21 Apr 2026 09:42:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20V2=20=E9=87=8D=E5=88=B6=209=20=E4=B8=AA?= =?UTF-8?q?=E6=BC=94=E7=A4=BA=20GIF=20+=20=E6=96=B0=E5=A2=9E=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E7=89=88=20+=20hero=20=E5=8D=87=E7=BA=A7=E5=88=B0=20v?= =?UTF-8?q?10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 亮点： - 统一 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) --- README.en.md | 30 +- README.md | 4 +- demos/c1-ios-prototype-en.html | 1145 +++++++++++++++++ demos/c1-ios-prototype.html | 1827 ++++++++++++++++---------- demos/c2-slides-pptx-en.html | 1055 +++++++++++++++ demos/c2-slides-pptx.html | 1973 +++++++++++++++-------------- demos/c3-motion-design-en.html | 1134 +++++++++++++++++ demos/c3-motion-design.html | 1628 ++++++++++++++++-------- demos/c4-tweaks-en.html | 989 +++++++++++++++ demos/c4-tweaks.html | 1701 ++++++++++++++----------- demos/c5-infographic-en.html | 816 ++++++++++++ demos/c5-infographic.html | 1544 +++++++++++----------- demos/c6-expert-review-en.html | 885 +++++++++++++ demos/c6-expert-review.html | 1458 ++++++++++++--------- demos/hero-animation-v10-en.html | 1498 ++++++++++++++++++++++ demos/hero-animation-v10.html | 1498 ++++++++++++++++++++++ demos/w1-brand-protocol-en.html | 684 ++++++++++ demos/w1-brand-protocol.html | 1375 ++++++++++---------- demos/w2-junior-designer-en.html | 983 ++++++++++++++ demos/w2-junior-designer.html | 1750 +++++++++++++------------ demos/w3-fallback-advisor-en.html | 647 ++++++++++ demos/w3-fallback-advisor.html | 1399 ++++++++++---------- 22 files changed, 19476 insertions(+), 6547 deletions(-) create mode 100644 demos/c1-ios-prototype-en.html create mode 100644 demos/c2-slides-pptx-en.html create mode 100644 demos/c3-motion-design-en.html create mode 100644 demos/c4-tweaks-en.html create mode 100644 demos/c5-infographic-en.html create mode 100644 demos/c6-expert-review-en.html create mode 100644 demos/hero-animation-v10-en.html create mode 100644 demos/hero-animation-v10.html create mode 100644 demos/w1-brand-protocol-en.html create mode 100644 demos/w2-junior-designer-en.html create mode 100644 demos/w3-fallback-advisor-en.html diff --git a/README.en.md b/README.en.md index 910ba3d..016835d 100644 --- a/README.en.md +++ b/README.en.md @@ -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)). ---

-

-

▲ 10-second hero animation showing what huashu-design does (download MP4 if autoplay doesn't work)

+

▲ 10-second hero animation showing what huashu-design does (download MP4 if autoplay doesn't work)

- Fallback design advisor · 3 differentiated directions from 20 design philosophies + Fallback design advisor · 3 differentiated directions from 20 design philosophies

--- @@ -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. -

+

### 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. -

+

### 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. -

+

### 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. -

+

### Tweaks · Live Variation Switching Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload. -

+

### 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. -

+

### 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. -

+

### 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. -

+

### 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. -

+

--- diff --git a/README.md b/README.md index 251a3d6..b5f46e0 100644 --- a/README.md +++ b/README.md @@ -34,13 +34,13 @@ npx skills add alchaincyf/huashu-design ---

- huashu-design Hero · 打字 → 选方向 → 画廊展开 → 聚焦 → 品牌显形 + huashu-design Hero · 打字 → 选方向 → 画廊展开 → 聚焦 → 品牌显形

▲ 25 秒 · Terminal → 4 方向 → Gallery ripple → 4 次 Focus → Brand reveal
👉 访问带音效的 HTML 互动版 · - 下载 MP4（含 BGM+SFX · 10MB） + 下载 MP4（含 BGM+SFX · 10MB）

diff --git a/demos/c1-ios-prototype-en.html b/demos/c1-ios-prototype-en.html new file mode 100644 index 0000000..df3a605 --- /dev/null +++ b/demos/c1-ios-prototype-en.html @@ -0,0 +1,1145 @@ + + + + +huashu-design V2 · c1-ios-prototype · EN + + + + + + + +

+ +
HUASHU · DESIGN
+ + +
+
+
+
+
+
~/projects
+
+
+
> Type a sentence, get a clickable app.
+
+ $ +
+
+
+ +
+ + +
+
+
+ + +
+ 9:41 +
+
+
+
+
+
+
+
+
+
+ +
+ +
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
POMODORO
+
Next up.
+
25:00
+
Write one section. Rest five minutes.
+
Focus now
+
+
+ + +
+
+
FOCUS · ROUND 1
+
+ + + + +
+
24:12
+
REMAINING
+
+
+
+
Pause
+
Skip
+
+
+
+ + +
+
+
THIS WEEK
+
23rounds
+
+5 from last week
+
+
+
+
+
+
+
+
+
+
+ MTWTFSS +
+
+
+ + +
+
+
Settings
+
+
+ Focus length + 25 MIN +
+
+ White noise +
+
+
+ Ring alert +
+
+
+ Theme + CLAUDE MIST +
+
+
+
+ + + + +
+ +
+ + +
+
+
+
+ +
+
+
+ + +
+
huashu·design
+
+
Say it. Get an app.
+
+ +
+ + + + + diff --git a/demos/c1-ios-prototype.html b/demos/c1-ios-prototype.html index 49df325..fecc506 100644 --- a/demos/c1-ios-prototype.html +++ b/demos/c1-ios-prototype.html @@ -1,721 +1,1142 @@ - - + + - -Huashu-Design · iOS App Prototype - - - + +huashu-design V2 · c1-ios-prototype · 中文版 - + -
- - - - diff --git a/demos/c2-slides-pptx-en.html b/demos/c2-slides-pptx-en.html new file mode 100644 index 0000000..b403574 --- /dev/null +++ b/demos/c2-slides-pptx-en.html @@ -0,0 +1,1055 @@ + + + + +c2-slides-pptx · English · v2 + + + + + + + +
+
HUASHU · DESIGN
+ + +
+
+
+
+
localhost:8080 / deck · presenting
+
3 / 12
+
+ +
+
+
AI PSYCHOLOGY · 03
+

The Mind
is Plastic

+
Agents aren't tools. They have preferences.
+
+
+ +
+
AI PSYCHOLOGY · 04
+

Injection
& Steering

+
A world hides in the parameters.
+
+
+
+
+ +
+ PRESS + → +
+
+ + +
+ +
+
HTML · READ-ONLY
+
+
+ + localhost:8080/deck +
+
+
AI PSYCHOLOGY · 03
+
The Mind
is Plastic
+
Agents aren't tools. They have preferences.
+
+
+
+
+ + +
+ + + + +
+
html2pptx.js
+ + +
+
PowerPoint · EDITABLE TEXT
+
+
+ +
ai-psychology-talk.pptx - PowerPoint
+
+
+
+
+ + Source Serif 4▾ +
+
+
B
+
I
+
U
+
+
+
+ +
+
+
AI PSYCHOLOGY · 03
+
+ + + + + The Mind is Plastic +
+
Agents aren't tools. They have preferences.
+
+
+ + +
+ + + +
+ +
+
+
+
+
+ + +
+
+
huashu-design
+
+
+ +
+ + + + diff --git a/demos/c2-slides-pptx.html b/demos/c2-slides-pptx.html index 3cb82f2..05e7b4f 100644 --- a/demos/c2-slides-pptx.html +++ b/demos/c2-slides-pptx.html @@ -1,978 +1,1055 @@ - - + + - -Huashu-Design · Slides → PPTX - - - + +c2-slides-pptx · 中文版 · v2 - + -
- - - - - diff --git a/demos/c3-motion-design-en.html b/demos/c3-motion-design-en.html new file mode 100644 index 0000000..ef44882 --- /dev/null +++ b/demos/c3-motion-design-en.html @@ -0,0 +1,1134 @@ + + + + +huashu-design · c3 motion design (EN) + + + + + + + +
+ + +
HUASHU · DESIGN
+ + +
+
Timeline = Code
+
MOTION · ENGINE · ANIMATED
+
+ + +
+
+ + +
+
TIMELINE · PLAYHEAD
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ +
0s
+
2s
+
4s
+
6s
+
8s
+
10s
+ + + + +
+
+ 01useTime +
+ + +
+
+ 02interpolate +
+ + +
+
+ 03Easing +
+ + +
+
+ 04useSprite +
+ + +
+
+
+
+ + +
+ + +
+
DRIVEN · STAGE
+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ t = 0.00s +
+
+
+ + +
+
+
+
+
FROM · 0 → 100
+
+
──────→
+
+
+
INTERPOLATE · 0.00
+
+
+
+ + +
+
+ + + + + + + 0 + 1 + t + + + + + + +
linear
+
cubicOut
+
expoOut
+
+
+ + +
+
+ +
+
+
+
+ +
+
+ + +
+
+
huashu-design
+
+
+ + +
V2 · 2026
+ + + + +
+ + + + diff --git a/demos/c3-motion-design.html b/demos/c3-motion-design.html index d724aaa..79f106e 100644 --- a/demos/c3-motion-design.html +++ b/demos/c3-motion-design.html @@ -1,556 +1,1134 @@ - - + + - -Huashu-Design · Motion Design - - - + +huashu-design · c3 motion design（中文版） - + -
- - - - - diff --git a/demos/c4-tweaks-en.html b/demos/c4-tweaks-en.html new file mode 100644 index 0000000..284e47d --- /dev/null +++ b/demos/c4-tweaks-en.html @@ -0,0 +1,989 @@ + + + + +c4-tweaks · Slide. See it morph. (English) + + + + + + + +
+ +
+
HUASHU · DESIGN
+
V2 · 2026
+ +
+ + +
+
+ +
yourbrand.design
+
+
+
Agent Studio
+
Built for them.
Who never sleep.
+
A design system that ships while you rest — ready before you open the file.
+ +
+
+
+
Brand Assets
+
Logos, palettes, type — one source of truth.
+
+
+
+
Prototype
+
One sentence in, a clickable app out.
+
+
+
+
Motion
+
Timeline is code. Swap 25 for 60 fps.
+
+
+
+
Slides
+
HTML is PPTX.
+
+
+
+
Infographic
+
Data in, magazine out.
+
+
+
+
Review
+
Five axes. Honest punch list.
+
+
+
+
Advisor
+
Three roads. You pick.
+
+
+
+
Junior
+
Show first. Polish later.
+
+
+
+
Protocol
+
Five steps. No skip.
+
+
+
+
+ + +
+ +
+ Slide. See it morph. +
+ + +
+
+ Palette + warm +
+
+
+ + +
+
+
+
+
+ + +
+
+ Type + serif +
+
+
+ + +
+
+
+
+
+ + +
+
+ Density + sparse +
+
+
+ + +
+
+
+
+
+ +
+ + +
+ + + +
+
+ + +
+ + +
+
huashu-design
+
+
+ +
+ + + + + diff --git a/demos/c4-tweaks.html b/demos/c4-tweaks.html index ee9242e..640c41a 100644 --- a/demos/c4-tweaks.html +++ b/demos/c4-tweaks.html @@ -1,762 +1,989 @@ - - + + - -Huashu-Design · Tweaks 实时变体 - - - + +c4-tweaks · 拨动即所得（中文版） - + -
- - - - diff --git a/demos/c5-infographic-en.html b/demos/c5-infographic-en.html new file mode 100644 index 0000000..c016679 --- /dev/null +++ b/demos/c5-infographic-en.html @@ -0,0 +1,816 @@ + + + + +c5-infographic · Data → Typography (EN) + + + + + + + +
+ +
HUASHU · DESIGN
+
V2 · 2026
+ + +
+
DATA → benchmarks.json
+ 

+  

+
+  
+  

+
+  
+  

+
+    

+      
Issue № 05 · AI Benchmarks · Q2 2026

+      
FRONTIER REPORT

+    

+
+    

+      The Age of

+      benchmarks.
+    

+
+    

+      Five frontier models, five numbers, one uncomfortable truth.
+    

+
+    

+      

+        
Leader · Q2

+        
Claude 4.7

+        
Sonnet, 1M ctx · Anthropic

+      

+      

+        
SWE-bench

+        
77.2%

+        
coding, verified split

+      

+      

+        
GPQA

+        
84.5

+        
diamond, graduate science

+      

+      

+        
Price · input

+        
$3/M

+        
per million tokens, typical

+      

+    

+
+    

+      
Claude 4.7 Sonnet

+      

+      
77.2

+
+      
GPT-5 Turbo

+      

+      
74.8

+
+      
Gemini 3 Pro

+      

+      
71.3

+
+      
GLM-5

+      

+      
68.9

+
+      
Kimi k3

+      

+      
66.4

+    

+
+    
+
+  

+
+  
+  

+    
benchmarks

+    
+    

+      SOURCE SERIF 4 · ITALIC · OLDSTYLE FIGURES
+    

+  

+
+  
+  

+    
huashu·design

+    

+    
D A T A · T Y P O G R A P H Y

+  

+
+

+
+
+
+
+
diff --git a/demos/c5-infographic.html b/demos/c5-infographic.html
index 6ecf5b2..619e419 100644
--- a/demos/c5-infographic.html
+++ b/demos/c5-infographic.html
@@ -1,767 +1,813 @@
-
-
+
+
 
-
-Huashu-Design · Infographic Demo
-
-
-
+
+c5-infographic · 数据 → 印刷级排版（中文版）
 
 
-
+
 
 
 
-

 
-
-
 
-
-
 
 
diff --git a/demos/c6-expert-review-en.html b/demos/c6-expert-review-en.html
new file mode 100644
index 0000000..6471b2f
--- /dev/null
+++ b/demos/c6-expert-review-en.html
@@ -0,0 +1,885 @@
+
+
+
+
+c6 · Five Axes · One Punch List
+
+
+
+
+
+
+  

+    
HUASHU · DESIGN

+    
V2 · 2026

+
+    
c6 · Expert Review · Five Axes

+
+    

+      
+      

+        
SUBJECT · DRAFT_V3

+        

+        

+          

+          

+          

+          

+          

+            

+            

+            

+          

+          

+            

+            

+            

+          

+        

+      

+
+      
+      

+      

+
+      
+      
Five-Axis Diagnosis · Radar

+      

+        
+          
+          
+          
+          
+          
+          
+          
+          
+          
+          
+        
+      

+
+      

+        

+          
0/50

+          

+            
OVERALL · PASSED

+            
WEIGHTED · 7.4

+          

+        

+      

+
+      
+      

+        

+          FIX
+          Fix
+          01 / 01
+        

+        

+          01
+          ⚡Tracking 0.02 → 0.04em
+          

+        

+      

+    

+
+    
+    

+    

+      
huashu-design

+      

+    

+  

+
+
+
+
diff --git a/demos/c6-expert-review.html b/demos/c6-expert-review.html
index d62468e..ab3489d 100644
--- a/demos/c6-expert-review.html
+++ b/demos/c6-expert-review.html
@@ -1,652 +1,894 @@
-
-
+
+
 
-
-Huashu-Design · Expert Review
-
-
-
+
+c6 · 五个维度，给你一份手术单
 
 
-
+
 
 
 
-

+  

+    
HUASHU · DESIGN

+    
V2 · 2026

 
-
-
-
-
-
 
 
diff --git a/demos/hero-animation-v10-en.html b/demos/hero-animation-v10-en.html
new file mode 100644
index 0000000..be8b925
--- /dev/null
+++ b/demos/hero-animation-v10-en.html
@@ -0,0 +1,1498 @@
+
+
+
+
+Huashu Design · Here's to the Agents (v10)
+
+
+
+
+
+
+
+

+
+  
Created by Huashu-Design

+
+  
+  

+    

+      
+      

+        

+          
+        

+        
claude.ai/design

+        

+      

+      
+      

+        
Company offsite html

+        
Dashboard exploration

+        
Landing v2

+        

+          100%
+          Export
+          Share
+        

+      

+      
+      

+        

+          

+            
Y

+            
Make a welcome guide for our company retreat.

+          

+          

+            
C

+            
I've designed a 1-page landscape welcome guide for your planning day. It includes a branded cover with pine trees, a two-column schedule, and activity cards.

Toggle the Tweaks to adjust accent color, headline size, and density.

+          

+          

+            
Tweaks

+            

+              
Accent

+              

+                

+                

+                

+                

+              

+            

+            

+              
Headline

+              

+            

+            

+              
Density

+              

+            

+          

+          
Describe what you want next…

+        

+        

+          

+            

+              
Anthropic Labs · Planning Day

+              
HEMLARK
RETREAT '26

+              
June 14 · Full Day
Pine Valley Lodge

+              

+                

+                

+                

+                

+              

+            

+            

+              
Schedule

+              
Breakfast9:00

+              
Kickoff10:00

+              
Workshops10:30

+              
Lunch12:30

+              
Hike14:00

+              
Dinner18:00

+            

+          

+        

+      

+    

+    
It's beautiful.

+  

+
+  
+  

+    

+      But it isn't the future.
+    

+  

+
+  
+  

+    

+      Here's to the Agents.
+    

+  

+
+  

+    
+    

+      
+        
+      
+    

+    

+      Not the ones who click.
+    

+  

+
+  

+    
+    

+      

+        

+        

+      

+    

+    

+      Not the ones who drag.
+    

+  

+
+  

+    
+    

+      

+        
+      

+      
design-v1.fig42 KB

+      
design-v2-final.fig58 KB

+      
design-v2-FINAL-final.fig61 KB

+      
design-v3.fig65 KB

+    

+    

+      Not the ones who wait for you to open the file.
+    

+  

+
+  
+  

+    

+      

+        
+        
+        
+        huashu — claude code
+      

+      

+        $
+      

+    

+  

+
+  

+    

+      
+    

+  

+
+  

+    
The ones who design
while you sleep.

+  

+
+  

+    
The ones who ship
while you're in a meeting.

+  

+
+  
+  

+    

+      Agent is the
new medium.
+    

+  

+
+  

+    
huashu-design

+    
For them, we built this.

+    
· 为 他 们 · 我 们 造 了 这 个 ·

+    
huasheng.ai/huashu-design-hero

+  

+
+

+
+
+
+
diff --git a/demos/hero-animation-v10.html b/demos/hero-animation-v10.html
new file mode 100644
index 0000000..5cf0988
--- /dev/null
+++ b/demos/hero-animation-v10.html
@@ -0,0 +1,1498 @@
+
+
+
+
+huashu-design · 敬 Agent 时代（v10 中文版）
+
+
+
+
+
+
+
+

+
+  
Created by Huashu-Design

+
+  
+  

+    

+      
+      

+        

+          
+        

+        
claude.ai/design

+        

+      

+      
+      

+        
Company offsite html

+        
Dashboard exploration

+        
Landing v2

+        

+          100%
+          Export
+          Share
+        

+      

+      
+      

+        

+          

+            
Y

+            
帮我做一份公司团建的欢迎手册。

+          

+          

+            
C

+            
我帮你设计了一份横版单页欢迎手册，包含带松树插画的品牌封面、双列日程表和活动卡片。

拖动 Tweaks 可以调整强调色、标题大小和密度。

+          

+          

+            
Tweaks

+            

+              
Accent

+              

+                

+                

+                

+                

+              

+            

+            

+              
Headline

+              

+            

+            

+              
Density

+              

+            

+          

+          
告诉我下一步想要什么…

+        

+        

+          

+            

+              
Anthropic Labs · Planning Day

+              
HEMLARK
RETREAT '26

+              
June 14 · Full Day
Pine Valley Lodge

+              

+                

+                

+                

+                

+              

+            

+            

+              
Schedule

+              
Breakfast9:00

+              
Kickoff10:00

+              
Workshops10:30

+              
Lunch12:30

+              
Hike14:00

+              
Dinner18:00

+            

+          

+        

+      

+    

+    
它做得确实好。

+  

+
+  
+  

+    

+      但那不是未来。
+    

+  

+
+  
+  

+    

+      敬 Agent 时代。
+    

+  

+
+  

+    
+    

+      
+        
+      
+    

+    

+      不是那些点击的。
+    

+  

+
+  

+    
+    

+      

+        

+        

+      

+    

+    

+      不是那些拖拽的。
+    

+  

+
+  

+    
+    

+      

+        
+      

+      
design-v1.fig42 KB

+      
design-v2-final.fig58 KB

+      
design-v2-FINAL-final.fig61 KB

+      
design-v3.fig65 KB

+    

+    

+      不是那些等你打开文件的。
+    

+  

+
+  
+  

+    

+      

+        
+        
+        
+        huashu — claude code
+      

+      

+        $
+      

+    

+  

+
+  

+    

+      
+    

+  

+
+  

+    
是那些在你睡觉时
设计的。

+  

+
+  

+    
是那些在你开会时
交付的。

+  

+
+  
+  

+    

+      Agent 是
新的媒介。
+    

+  

+
+  

+    
huashu-design

+    
为他们，我们造了这个。

+    
· FOR THE AGENTS · WE BUILT THIS ·

+    
huasheng.ai/huashu-design-hero

+  

+
+

+
+
+
+
diff --git a/demos/w1-brand-protocol-en.html b/demos/w1-brand-protocol-en.html
new file mode 100644
index 0000000..2eb967b
--- /dev/null
+++ b/demos/w1-brand-protocol-en.html
@@ -0,0 +1,684 @@
+
+
+
+
+w1 · Brand Protocol · Five steps, no skipping
+
+
+
+
+
+
+  

+    
HUASHU · DESIGN

+    
V2 · 2026

+
+    
w1 · brand protocol

+
+    

+      

+
+      

+        
STEP 01

+        
?

+        

+          
Ask

+        

+      

+
+      

+        
STEP 02

+        

+          

+            

+            

+            

+          

+        

+        

+          
Search

+        

+      

+
+      

+        
STEP 03

+        

+          

+            

+            

+          

+        

+        

+          
Grab

+        

+      

+
+      

+        
STEP 04

+        

+          

+            
#F5F4F0

+            
#D97757

+            
#1A1918

+            
#FFFFFF

+          

+        

+        

+          
Grep

+        

+      

+
+      

+        
STEP 05

+        

+          

+            

+            

+            

+            

+            

+            

+            

+          

+        

+        

+          
Lock

+        

+      

+    

+
+    

+      
brand-spec.md

+      
Assets locked in

+      

+        
logo · assets/logo.svg

+        
hero · product-hero.png

+        
accent · #D97757

+        
bg · #000000

+      

+    

+
+    

+    

+      
huashu · design

+      

+    

+  

+
+
+
+
diff --git a/demos/w1-brand-protocol.html b/demos/w1-brand-protocol.html
index ad3f4ae..dc38e4d 100644
--- a/demos/w1-brand-protocol.html
+++ b/demos/w1-brand-protocol.html
@@ -1,787 +1,696 @@
-
-
+
+
 
-
-Huashu-Design · 品牌资产协议 5 步硬流程
-
-
-
+
+w1 · 品牌协议 · 五步不能跳
 
 
-
+
 
 
 
-

+  

+    
HUASHU · DESIGN

+    
V2 · 2026

 
-
-
-
-
-
 
 
diff --git a/demos/w2-junior-designer-en.html b/demos/w2-junior-designer-en.html
new file mode 100644
index 0000000..88438f8
--- /dev/null
+++ b/demos/w2-junior-designer-en.html
@@ -0,0 +1,983 @@
+
+
+
+
+w2 · Rough draft now beats perfect draft later
+
+
+
+
+
+
+  

+    
HUASHU · DESIGN

+    
V2 · 2026

+
+    
w2 · rough draft now beats perfect draft later

+
+    
+    

+    
VS

+
+    
+    

+      

+        A
+        All-at-once
+        3 HOUR SESSION
+      

+      

+        

+          

+          
designer@studio · 3h session

+        

+        

+          
$build final_design.html // v1.0 · ship it all at once

+          

+            

+              

+            

+            0%
+            03:00:00
+          

+        

+        

+          
+            
+            
+          
+          
REJECTED

+        

+      

+    

+
+    
+    

+      

+        B
+        Show early
+        SMALL ITERATIONS
+      

+      

+        

+          

+            draft · v1
+            15 min
+          

+          

+            

+            

+            

+          

+          

+            
+          

+        

+        

+          

+            draft · v2
+            25 min
+          

+          

+            

+            

+            

+            

+          

+          

+            
+          

+        

+        

+          

+            draft · v3
+            35 min
+          

+          

+            

+            

+            

+            

+            

+          

+          

+            
+          

+        

+      

+    

+
+    
+    

+      
+        
+        
+        
+
+        
+        QUALITY
+        
+        TIME
+
+        
+        0
+        15m
+        25m
+        35m
+        3h
+
+        
+        
+        
+        
+        
+          
+          
+        
+
+        All-at-once
+        REJECTED
+
+        
+        
+        
+        
+        
+        
+
+        Show early
+        SHIPPED
+
+        — 3 hours silence —
+      
+    

+
+    
+    

+    

+      
huashu · design

+      

+    

+  

+
+
+
+
diff --git a/demos/w2-junior-designer.html b/demos/w2-junior-designer.html
index c01bee8..097bbb7 100644
--- a/demos/w2-junior-designer.html
+++ b/demos/w2-junior-designer.html
@@ -1,856 +1,994 @@
-
-
+
+
 
-
-Huashu-Design · Junior Designer 模式
-
-
-
+
+w2 · 粗糙的第一版，好过完美的大招
 
 
-
+
 
 
 
-

+  

+    
HUASHU · DESIGN

+    
V2 · 2026

 
-
-
-
-
-
 
 
diff --git a/demos/w3-fallback-advisor-en.html b/demos/w3-fallback-advisor-en.html
new file mode 100644
index 0000000..56fe085
--- /dev/null
+++ b/demos/w3-fallback-advisor-en.html
@@ -0,0 +1,647 @@
+
+
+
+
+w3 · Fallback Advisor (English)
+
+
+
+
+
+
+
+

+
+  
HUASHU · DESIGN

+  
V2 · 2026 · w3

+
+  
+  

+    Not sure? Here are 3 roads.
+  

+  
20 Philosophies · 3 Directions

+
+  

+
+  

+    

+      
+    

+  

+
+  

+    

+      

+        
Road 01 · Eastern Space

+        
Kenya Hara

+        
Ma / Emptiness

+        
Terracotta · Vast whitespace · Paper grain

+      

+      

+        demo takram
+      

+    

+    

+      

+        
Road 02 · Information Architecture

+        
Pentagram

+        
Grid / Rigor

+        
Strict grid · High contrast · Editorial

+      

+      

+        demo pentagram
+      

+    

+    

+      

+        
Road 03 · Experimental Edge

+        
David Carson

+        
Raw / Punk

+        
Broken type · Brutal geometry · Visual shock

+      

+      

+        demo build
+      

+    

+  

+
+  

+    
huashu·design

+    

+    
HTML as Designer's Medium

+  

+
+

+
+
+
+
+
diff --git a/demos/w3-fallback-advisor.html b/demos/w3-fallback-advisor.html
index ea01661..d73f84f 100644
--- a/demos/w3-fallback-advisor.html
+++ b/demos/w3-fallback-advisor.html
@@ -1,747 +1,704 @@
-
-
+
+
 
-
-Huashu-Design · Fallback 设计顾问
-
-
-
+
+w3 · Fallback Advisor（中文版）
 
 
-
+
 
 
 
-

 
-
-
 
-
-