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๏ผˆไธญๆ–‡็‰ˆ๏ผ‰
 
 
-
+
 
 
 
-

 
-
-
 
-
-