diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..910ba3d --- /dev/null +++ b/README.en.md @@ -0,0 +1,303 @@ +🌐 English · 中文 + +
+ +# 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) + +
+ +**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.** + +
+ +Thirty seconds later, you have a slide deck, an iOS prototype, a motion-design sequence, or an infographic. Drop it in an issue, paste it into Keynote, ship it to Notion. + +It doesn't look like AI made it. Twenty real design philosophies are distilled into the skill (Pentagram's information architecture, Field.io's motion poetics, Kenya Hara's eastern minimalism…). The agent grabs brand assets, builds a design spec, generates HTML, runs Playwright verification, then critiques itself against a 5-dimension rubric. + +``` +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. + +
+ +--- + +

+ +

+ +

▲ 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 +

+ +--- + +## 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. + +--- + +## 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 + +> The demos below use Chinese text in UI but the mechanics apply to any language. + +### 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. + +

+ +--- + +## 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 | `.com/brand` · `.com/press` · `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. diff --git a/README.md b/README.md index 88a4950..4a35065 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,10 @@ +🌐 English · 中文 +
# 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) @@ -10,232 +13,228 @@
-**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.** +**在你的 agent 里打一句话——Claude Code、Cursor、Codex、OpenClaw、Hermes 都行。**
-Thirty seconds later, you have a slide deck, an iOS prototype, a motion-design sequence, or an infographic. Drop it in an issue, paste it into Keynote, ship it to Notion. +30 秒后，你手里有一份 PPT、一个 App 原型、一段时间轴动画、一张信息图。能直接发进 issue、贴到飞书、复制到 Keynote。 -It doesn't look like AI made it. Twenty real design philosophies are distilled into the skill (Pentagram's information architecture, Field.io's motion poetics, Kenya Hara's eastern minimalism…). The agent grabs brand assets, builds a design spec, generates HTML, runs Playwright verification, then critiques itself against a 5-dimension rubric. +做出来的东西看不出是 AI 做的。20 种真实设计哲学被蒸馏进 skill 里（Pentagram 的信息建筑、Field.io 的运动诗学、Kenya Hara 的东方极简……），agent 抓品牌色、搭 design spec、生成 HTML、跑 Playwright 验证，然后自己评审打分。 ``` 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) +[看效果](#demo-画廊) · [安装](#装上就能用) · [能做什么](#能做什么) · [核心机制](#核心机制) · [和 Claude Design 的关系](#和-claude-design-的关系)
---

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

+ +

▲ Hero 动画 · 10 秒讲完 huashu-design 是什么（若无法自动播放请下载）

+ +

+ Fallback 设计顾问 · 从 20 种设计哲学推荐 3 个差异化方向

--- -## Install +## 装上就能用 ```bash npx skills add alchaincyf/huashu-design ``` -Then just talk to Claude Code: +然后在 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." +「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」 +「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」 +「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」 +「帮我对这个设计做一个 5 维度评审」 ``` -No buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, any of them. +没有按钮、没有面板、没有 Figma 插件。跨 agent 通用 —— Claude Code / Cursor / Trae / Hermes / OpenClaw 任一都能装。 --- -## 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 | +| 能力 | 交付物 | 典型耗时 | +|------|--------|----------| +| 交互原型（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 | -**Agent-agnostic**: installs into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent. +**跨 agent 通用**：Claude Code、Cursor、Trae、Hermes、OpenClaw 任一都能装。 --- -## Demo Gallery +## Demo 画廊 -### 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. +模糊需求时的 fallback：从 5 流派 × 20 种设计哲学里挑 3 个差异化方向，并行生成 3 个 Demo 让你选。

-### iOS App Prototype +### iOS App 原型 -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. +iPhone 15 Pro 精确机身（灵动岛 / 状态栏 / Home Indicator）· 状态驱动多屏切换 · 真图从 Wikimedia/Met/Unsplash 取 · Playwright 自动点击测试。

-### Motion Design Engine +### Motion Design 引擎 -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 时间片段模型 · `useTime` / `useSprite` / `interpolate` / `Easing` 四 API 覆盖所有动画需求 · 一条命令导出 MP4 / GIF / 60fps 插帧 / 带 BGM 的成片。

-### HTML Slides → Editable PPTX +### HTML Slides → 可编辑 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 deck 浏览器演讲 · `html2pptx.js` 读 DOM 的 computedStyle 逐元素翻译成 PowerPoint 对象 · 导出的是**真文本框**，不是图片铺底。

-### Tweaks · Live Variation Switching +### Tweaks · 实时变体切换 -Colors / typography / information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload. +配色 / 字型 / 信息密度等参数化 · 侧边面板切换 · 纯前端 + `localStorage` 持久化 · 刷新不丢。

-### 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. +杂志级排版 · CSS Grid 精准分栏 · `text-wrap: pretty` 排印细节 · 真数据驱动 · 可导 PDF 矢量 / PNG 300dpi / SVG。

-### 5-Dimension Expert Critique +### 5 维度专家评审 -Philosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep / Fix / Quick Wins punch list. +哲学一致性 · 视觉层级 · 细节执行 · 功能性 · 创新性 各 0–10 分 · 雷达图可视化 · 输出 Keep / Fix / Quick Wins 清单。

-### Junior Designer Workflow +### Junior Designer 工作流 -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. +不闷头做大招：先写 assumptions + placeholders + reasoning，尽早 show 给你，再迭代。理解错了早改比晚改便宜 100 倍。

-### Core Asset Protocol · 5-step hard process +### 品牌资产协议 5 步硬流程 -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. +涉及具体品牌时强制执行：问 → 搜 → 下载（三条兜底）→ grep 色值 → 写 `brand-spec.md`。

--- -## 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: +skill 里最硬的一段规则。涉及具体品牌（Stripe、Linear、Anthropic、自家公司等）时强制执行 5 步： -| 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 | `.com/brand` · `.com/press` · `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 | +| 步骤 | 动作 | 目的 | +|------|------|------| +| 1 · 问 | 用户有 brand guidelines 吗？ | 尊重已有资源 | +| 2 · 搜官方品牌页 | `.com/brand` · `brand..com` · `.com/press` | 抓权威色值 | +| 3 · 下载资产 | SVG 文件 → 官网 HTML 全文 → 产品截图取色 | 三条兜底，前一条失败立刻走下一条 | +| 4 · grep 提取色值 | 从资产里抓所有 `#xxxxxx`，按频率排序，过滤黑白灰 | **绝不从记忆猜品牌色** | +| 5 · 固化 spec | 写 `brand-spec.md` + CSS 变量，所有 HTML 引用 `var(--brand-*)` | 不固化就会忘 | -**Ranking of asset importance** (from the skill's internal rubric): +A/B 测试（v1 vs v2，各跑 6 agent）：**v2 的稳定性方差比 v1 低 5 倍**。稳定性的稳定性，这是 skill 真正的护城河。 -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 +### 设计方向顾问（Fallback） -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) +- 不凭通用直觉硬做，进入 Fallback 模式 +- 从 5 流派 × 20 种设计哲学里推荐 3 个**必须来自不同流派**的差异化方向 +- 每个方向配代表作、气质关键词、代表设计师 +- 并行生成 3 个视觉 Demo 让用户选 +- 选定后进入主干 Junior Designer 流程 -Triggered when the brief is too vague to execute: +### Junior Designer 工作流 -- 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 +- 开工前 show 问题清单一次性发给用户，等批量答完再动手 +- HTML 里先写 assumptions + placeholders + reasoning comments +- 尽早 show 给用户（哪怕只是灰色方块） +- 填充实际内容 → variations → Tweaks 这三步分别再 show 一次 +- 交付前用 Playwright 肉眼过一遍浏览器 -The default working mode across every task: +### 反 AI slop 规则 -- 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. +避免一眼 AI 的视觉最大公约数（紫渐变 / emoji 图标 / 圆角+左 border accent / SVG 画人脸 / Inter 做 display）。用 `text-wrap: pretty` + CSS Grid + 精心选择的 serif display 和 oklch 色彩。 --- -## vs. Claude Design +## 和 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. +我大方承认：品牌资产协议的哲学是从 Claude Design 流传出来的提示词里偷师的。那份提示词反复强调**好的高保真设计不是从白纸开始，而是从已有的设计上下文长出来**。这个原则是 65 分作品和 90 分作品的分水岭。 -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 | +| 形态 | 网页产品（浏览器里用） | skill（Claude Code 里用） | +| 配额 | 订阅 quota | API 消耗 · 并行跑 agent 不受 quota 限 | +| 交付物 | 画布内 + 可导 Figma | HTML / MP4 / GIF / 可编辑 PPTX / PDF | +| 操作方式 | GUI（点、拖、改） | 对话（说话、等 agent 做完） | +| 复杂动画 | 有限 | Stage + Sprite 时间轴 · 60fps 导出 | +| 跨 agent | 专属 Claude.ai | 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. +Claude Design 是**更好的图形工具**，huashu-design 是**让图形工具这层消失**。两条路，不同受众。 --- ## 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. +- **不支持图层级可编辑的 PPTX 到 Figma**。产出 HTML，可截图、录屏、导图，但不能拖进 Keynote 改文字位置。 +- **Framer Motion 级别的复杂动画不行**。3D、物理模拟、粒子系统超出 skill 边界。 +- **完全空白的品牌从零设计质量会掉到 60–65 分**。凭空画 hi-fi 本来就是 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. +这是一个 80 分的 skill，不是 100 分的产品。对不愿意打开图形界面的人，80 分的 skill 比 100 分的产品好用。 --- -## Repository Structure +## 仓库结构 ``` huashu-design/ -├── SKILL.md # Main doc (read by agent) -├── README.md # This file (read by user) +├── SKILL.md # 主文档（给 agent 读） +├── README.md # 本文件（给用户读） ├── 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 +│ ├── 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 design philosophies in detail +│ ├── design-styles.md # 20 种设计哲学详细库 │ ├── slide-decks.md │ ├── editable-pptx.md │ ├── critique-guide.md │ ├── video-export.md │ └── ... -├── scripts/ # Export toolchain +├── scripts/ # 导出工具链 │ ├── render-video.js # HTML → MP4 │ ├── convert-formats.sh # MP4 → 60fps + GIF │ ├── add-music.sh # MP4 + BGM @@ -243,47 +242,47 @@ huashu-design/ │ ├── export_deck_pptx.mjs │ ├── html2pptx.js │ └── verify.py -└── demos/ # 9 capability demos (referenced by this README) +└── demos/ # 9 个能力演示（本 README 引用的 GIF 都来自这里） ``` --- -## 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. +Anthropic 发布 Claude Design 那天我玩到凌晨四点。几天之后发现自己再也没点开过它，不是它不好——它是这个赛道目前最成熟的产品——是我宁愿让 agent 在终端里帮我干活，也不愿意打开任何图形界面。 -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. +于是让 agent 拆解 Claude Design 本身（包括社区流传的系统提示词、品牌资产协议、组件机制），蒸馏成结构化 spec，再写成 skill 装进自己的 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. +感谢 Anthropic 把 Claude Design 的提示词写得清晰。这种基于其他产品灵感的二次创作，是开源文化在 AI 时代的新形态。 --- -## License · Usage Rights +## License · 使用授权 -**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 二次开发做成商业产品 +- 在客户商单项目中使用 -**Commercial licensing contact**: any of the social platforms below. +**商用授权联系方式**见下方社交平台。 --- -## Connect · Huasheng (Huashu) +## Connect · 花生（花叔） -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. +花生是 AI Native Coder、独立开发者、AI 自媒体博主。代表作：小猫补光灯（AppStore 付费榜 Top 1）、《一本书玩转 DeepSeek》、女娲 .skill（GitHub 12000+ star）。自媒体全平台 30 万+ 粉丝。 -| Platform | Handle | Link | +| 平台 | 账号 | 链接 | |---|---|---| | X / Twitter | @AlchainHust | https://x.com/AlchainHust | -| WeChat Official Account | 花叔 | Search "花叔" in WeChat | -| Bilibili | 花叔 | https://space.bilibili.com/14097567 | +| 公众号 | 花叔 | 微信搜索「花叔」 | +| B 站 | 花叔 | 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 | +| 小红书 | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf | +| 官网 | huasheng.ai | https://www.huasheng.ai/ | +| 开发者主页 | bookai.top | https://bookai.top | -For commercial licensing, collaborations, or sponsored content, DM on any of the above. +商用授权、合作咨询、自媒体约稿 → 以上任一平台私信花生即可。