agentmods.dev

huashu-design

huashu-design is a skill for Claude Code, Codex from Ertinox7711/SGRR-AGI-V2. It costs 503 tokens per session (16,797 once invoked), scanned A, a copy of 设计大师, MIT.

A design workflow that uses HTML to make high-fidelity prototypes, interactive demos, slide decks, animations, and data-driven visualisations. A high-fidelity prototype is a detailed mock-up that people can click or interact with.

In plain words
What is it for?
Use it for clickable product prototypes, presentation decks, motion demos, design variations, infographics, and interactive concept work.
Why use it?
It provides one way to explore visual directions and user flows without treating every output like a production website or a static document.

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 1repo +1 4d ago A scan 503 tokens copy · 97% MIT

Good fit Use it for clickable product prototypes, presentation decks, motion demos, design variations, infographics, and interactive concept work.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/ertinox7711/sgrr-agi-v2/huashu-design
View source ↗ Ertinox7711/SGRR-AGI-V2
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 Ertinox7711/SGRR-AGI-V2 --skill huashu-design
Clone the repo
git clone --depth 1 https://github.com/Ertinox7711/SGRR-AGI-V2

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/ertinox7711/sgrr-agi-v2/huashu-design/github.svg)](https://agentmods.dev/skills/ertinox7711/sgrr-agi-v2/huashu-design)
Your own site
<a href="https://agentmods.dev/skills/ertinox7711/sgrr-agi-v2/huashu-design"><img src="https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/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/ertinox7711/sgrr-agi-v2/huashu-design"><img src="https://agentmods.dev/badge/skills/ertinox7711/sgrr-agi-v2/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,797 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 97% 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.16797
Opus 5 $0.00251 $0.08399
Sonnet 5 $0.00101 $0.03359
Haiku 4.5 $0.00050 $0.01680

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

97% identical to 设计大师 — 29 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 · 802 lines

How it starts

The opening of the file, as written. The whole thing — 802 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 · 802 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. 3d ago First seen · 802 lines · 503 tokens per session scan A de8a88885d6d

Subscribe to this mod's changes

huashu-design is a skill published in the GitHub repository Ertinox7711/SGRR-AGI-V2 (1 stars, last pushed 4d ago), licensed MIT. It adds 503 tokens to every session and 16,797 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 97% identical to 设计大师, differing in 29 lines, and is treated as a copy.

Creative and mediaDesign and UXaiautomationclaudedeveloper-tools
Related

Other skills, from other repositories

taiyi-ui-design

A design-planning guide for describing how an application's user interface should look and behave. It produces a UI-DESIGN.md document covering layouts, components, interactions, accessibility, and error states.

Dong90/oh-my-taiyiforge · 35 tokens

taiyi-diagram-arch

A workflow for turning written system or product architecture into readable, version-controlled diagrams using Mermaid or exported SVG and PNG files. Architecture diagrams show components, boundaries, data flows, and deployment relationships.

Dong90/oh-my-taiyiforge · 48 tokens

taiyi-restyle

A planning guide for breaking a large user-interface redesign into smaller, independently reviewable tasks. A user interface is the part of an application that people see and use.

Dong90/oh-my-taiyiforge · 39 tokens

taiyi-diagram-pipeline

A pipeline that creates and updates architecture diagrams in three stages: a C4 model from the code, an engineering architecture diagram, and an exported PNG image. C4 is a way to describe software architecture at several levels of detail.

Dong90/oh-my-taiyiforge · 52 tokens

taiyi-diagram-render

A tool for rendering existing C4 or architecture Mermaid diagrams as SVG or PNG images. C4 is a way to show software systems at different levels, while Mermaid is a text format for diagrams.

Dong90/oh-my-taiyiforge · 50 tokens

flowchart-creator

Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.

mhattingpete/claude-skills-marketplace · 45 tokens