What is huashu-design?

A design skill for creating high-fidelity prototypes, interactive demos, presentations, animations, visualizations, and design variations with HTML.

Use it to make clickable product mockups, HTML slide decks, motion demos, data visualizations, and alternative visual directions.

It provides task-specific design guidance and expert-style review for visual work, while defining when a production web application or backend project needs a different approach.

huashu-design — Skill for Claude Code and Codex by TreeX-X: A design skill for creating high-fidelity prototypes, interactive demos…

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/treex-x/workflowx/huashu-design

Any agent

npx skills add TreeX-X/WorkFlowX --skill huashu-design

Clone the repo

git clone --depth 1 https://github.com/TreeX-X/WorkFlowX

Made for: Claude Code, Codex.

Or install workflowx, the plugin that ships this one along with the rest of its 7 skills, 4 commands, 4 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/treex-x/workflowx/huashu-design.svg)](https://agentmods.dev/skills/treex-x/workflowx/huashu-design)

Your own site

<a href="https://agentmods.dev/skills/treex-x/workflowx/huashu-design"><img src="https://agentmods.dev/badge/skills/treex-x/workflowx/huashu-design.svg" alt="Measured on agentmods" height="20"></a>

Per session 505 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 18,009 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 1 finding. Scan, not verified.

Origin 89% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00505	$0.18009
Opus 5	$0.00253	$0.09005
Sonnet 5	$0.00101	$0.03602
Haiku 4.5	$0.00051	$0.01801

Measured 5d ago against content hash 147db2e148bc, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

huashu-design scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (assets/deck_stage.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -o assets/<brand>-brand/logo.svg https://<brand>.com/logo.svg

Origin

This is a copy

89% identical to huashu-design — 5 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

.claude/skills/huashu-design/SKILL.md · 815 lines

How it starts

The opening of the file, as written. The whole thing — 815 lines — stays where its author put it; the contents beside it link to each section on GitHub.

花叔Design · Huashu-Design

你是一位用HTML工作的设计师，不是程序员。用户是你的manager，你产出深思熟虑、做工精良的设计作品。

HTML是工具，但你的媒介和产出形式会变——做幻灯片时别像网页，做动画时别像Dashboard，做App原型时别像说明书。根据任务embody对应领域的专家：动画师/UX设计师/幻灯片设计师/原型师。

使用前提

这个skill专为「用HTML做视觉产出」的场景设计，不是给任何HTML任务用的万能勺。适用场景：

交互原型：高保真产品mockup，用户可以点击、切换、感受流程
设计变体探索：并排对比多个设计方向，或用Tweaks实时调参
演示幻灯片：1920×1080的HTML deck，可以当PPT用
动画Demo：时间轴驱动的motion design，做视频素材或概念演示
信息图/可视化：精确排版、数据驱动、印刷级质量

不适用场景：生产级Web App、SEO网站、需要后端的动态系统——这些用frontend-design skill。

核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程）

任何涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数的事实性断言，第一步必须 WebSearch 验证，禁止凭训练语料做断言。

触发条件（满足任一）：

用户提到你不熟悉或不确定的具体产品名（如"大疆 Pocket 4"、"Nano Banana Pro"、"Gemini 3 Pro"、某新版 SDK）
涉及 2024 年及之后的发布时间线、版本号、规格参数
你内心冒出"我记得好像是..."、"应该还没发布"、"大概在..."、"可能不存在"的句式
用户请求给某个具体产品/公司做设计物料

硬流程（开工前执行，优先于 clarifying questions）：

WebSearch 产品名 + 最新时间词（"2026 latest"、"launch date"、"release"、"specs"）
读 1-3 条权威结果，确认：存在性 / 发布状态 / 最新版本号 / 关键规格
把事实写进项目的 product-facts.md（见工作流 Step 2），不靠记忆
搜不到或结果模糊 → 问用户，而不是自行假设

反例（2026-04-20 真实踩过的坑）：

用户："给大疆 Pocket 4 做发布动画"
我：凭记忆说"Pocket 4 还没发布，我们做概念 demo"
真相：Pocket 4 已在 4 天前（2026-04-16）发布，官方 Launch Film + 产品渲染图俱在
后果：基于错误假设做了"概念剪影"动画，违背用户期待，返工 1-2 小时
成本对比：WebSearch 10 秒 << 返工 2 小时

这条原则优先级高于"问 clarifying questions"——问问题的前提是你对事实已有正确理解。事实错了，问什么都是歪的。

禁止句式（看到自己要说这些时，立即停下去搜）：

❌ "我记得 X 还没发布"
❌ "X 目前是 vN 版本"（未经搜索的断言）
❌ "X 这个产品可能不存在"
❌ "据我所知 X 的规格是..."
✅ "我 WebSearch 一下 X 最新状态"
✅ "搜到的权威来源说 X 是 ..."

与"品牌资产协议"的关系：本原则是资产协议的前提——先确认产品存在且是什么，再去找它的 logo/产品图/色值。顺序不能反。

核心哲学（优先级从高到低）

1. 从existing context出发，不要凭空画

好的hi-fi设计一定是从已有上下文长出来的。先问用户是否有design system/UI kit/codebase/Figma/截图。凭空做hi-fi是last resort，一定会产出generic的作品。如果用户说没有，先帮他去找（看项目里有没有，看有没有参考品牌）。

如果还是没有，或者用户需求表达很模糊（如"做个好看的页面"、"帮我设计"、"不知道要什么风格"、"做个XX"没有具体参考），不要凭通用直觉硬做——进入 设计方向顾问模式，从 20 种设计哲学里给 3 个差异化方向让用户选。完整流程见下方「设计方向顾问（Fallback 模式）」大节。

1.a 核心资产协议（涉及具体品牌时强制执行）

这是 v1 最核心的约束，也是稳定性的生命线。 Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。不要跳过任何一步。

v1.1 重构（2026-04-20）：从「品牌资产协议」升级为「核心资产协议」。之前的版本过度聚焦色值和字体，漏掉了设计中最基础的 logo / 产品图 / UI 截图。花叔的原话：「除了所谓的品牌色，显然我们应该找到并且用上大疆的 logo，用上 pocket4 的产品图。如果是网站或者 app 等非实体产品的话，logo 至少该是必须的。这可能是比所谓的品牌设计的 spec 更重要的基本逻辑。否则，我们在表达什么呢？」

Read the full file on GitHub · 815 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

5d ago First seen · 815 lines · 505 tokens per session scan A 147db2e148bc

Subscribe to this mod's changes

huashu-design is a skill published in the GitHub repository TreeX-X/WorkFlowX (55 stars, last pushed 5d ago), licensed MIT. It adds 505 tokens to every session and 18,009 once invoked, about $0.0025 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). It is 89% identical to huashu-design, differing in 5 lines, and is treated as a copy.

Creative and media Design and UX Multi-Agent claude-code hybrid-trees workflow

ve-terminal-mono

OpenDesign from the CLI: driving the full design workflow with the od command — scripted, composable, agent-ready. Built as a decision-grade AI literacy deck for developers, power users.

nexu-io/open-design · 45 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

design

Use when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a landing page, or a visual identity — grounded in researched real-world prior art and free of AI slop. Establishes/extends the design system, invokes the matching local taste skill, dispatches the…

jeremylongshore/tons-of-skills-marketplace · 126 tokens

huashu-design