agentmods.dev

huashu-design

huashu-design is a skill for Claude Code, Codex from davidtoby/agent-skills. It costs 503 tokens per session (16,868 once invoked), scanned A, a copy of huashu-design, MIT.

A design guide for making high-fidelity prototypes, interactive demos, slides, animations, and visual explorations with HTML.

In plain words
What is it for?
Use it to build clickable product mockups, presentation decks, animation demos, and data visualisations.
Why use it?
It provides a design process for choosing the right visual approach and reviewing the result for usability and quality.

Skill for Claude CodeCodex

Which agent this was written for is unclear — built for openclaw. Also seen: reads .claude/ paths; mentions subagents; mentions Claude Code.

not rated 10repo 1mo ago A scan 503 tokens copy · 92% MIT

Good fit Use it to build clickable product mockups, presentation decks, animation demos, and data visualisations.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/davidtoby/agent-skills/huashu-design
View source ↗ davidtoby/agent-skills
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.

Any agent
npx skills add davidtoby/agent-skills --skill huashu-design
Clone the repo
git clone --depth 1 https://github.com/davidtoby/agent-skills

Made for: Claude Code, Codex.

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.

agentmods badge for huashu-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/davidtoby/agent-skills/huashu-design/github.svg)](https://agentmods.dev/skills/davidtoby/agent-skills/huashu-design)
Your own site
<a href="https://agentmods.dev/skills/davidtoby/agent-skills/huashu-design"><img src="https://agentmods.dev/badge/skills/davidtoby/agent-skills/huashu-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for huashu-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/davidtoby/agent-skills/huashu-design"><img src="https://agentmods.dev/badge/skills/davidtoby/agent-skills/huashu-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 503 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 16,868 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin 92% 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00503 $0.16868
Opus 5 $0.00251 $0.08434
Sonnet 5 $0.00101 $0.03374
Haiku 4.5 $0.00050 $0.01687

Measured 6d ago against content hash 148e14bc7da4, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, 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 6d 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

92% identical to huashu-design — 13 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.

skills/huashu-design/SKILL.md · 803 lines

How it starts

The opening of the file, as written. The whole thing — 803 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）：

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

反例（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 · 803 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.

  1. 6d ago First seen · 803 lines · 503 tokens per session scan A 148e14bc7da4

Subscribe to this mod's changes

huashu-design is a skill published in the GitHub repository davidtoby/agent-skills (10 stars, last pushed 1mo ago), licensed MIT. It adds 503 tokens to every session and 16,868 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 92% identical to huashu-design, differing in 13 lines, and is treated as a copy.

Design and UXagentai-agentsautomationclaudeopenclawskills
Related

Other skills, from other repositories

canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

danstrem2/clawdbot-skill-master-pack · 59 tokens

agent-browser

Headless browser automation CLI optimized for AI agents with accessibility tree snapshots and ref-based element selection.

danstrem2/clawdbot-skill-master-pack · 21 tokens

canva

Manage Canva designs, assets, and folders via the Connect API. WHAT IT CAN DO: List/search/organize designs and folders Export finished designs (PNG/PDF/JPG) Upload images to asset library Autofill brand templates with data Create blank designs (doc/presentation/whiteboard/custom) WHAT IT CANNOT DO: Add content to…

danstrem2/clawdbot-skill-master-pack · 147 tokens

canva

Create, export, and manage Canva designs via the Connect API. Generate social posts, carousels, and graphics programmatically.

danstrem2/clawdbot-skill-master-pack · 29 tokens

core-components

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

danstrem2/clawdbot-skill-master-pack · 27 tokens

avalonia-layout-zafiro

Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.

danstrem2/clawdbot-skill-master-pack · 36 tokens