agentmods.dev

huashu-design

huashu-design is a skill for Claude Code, Codex from mxyhi/ok-skills. It costs 123 tokens per session (4,351 once invoked), scanned A, a copy of huashu-design, Apache-2.0.

A design workflow for creating high-fidelity HTML prototypes, presentations, animations, and visualizations. It requires three initial design directions before a final direction is developed.

In plain words
What is it for?
Use it to make interactive mockups, HTML slide decks, animation demos, or data visualizations and export animations as video or GIF files.
Why use it?
It gives visual projects a structured review process and sets different working rules for prototypes, slides, animations, and data displays.

Skill for Claude CodeCodex

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

not rated 507repo +4 changed 9d ago A scan 123 tokens copy · 94% Apache-2.0

Good fit Use it to make interactive mockups, HTML slide decks, animation demos, or data visualizations and export animations as video or GIF files.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/mxyhi/ok-skills/huashu-design
View source ↗ mxyhi/ok-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 mxyhi/ok-skills --skill huashu-design
Clone the repo
git clone --depth 1 https://github.com/mxyhi/ok-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/mxyhi/ok-skills/huashu-design/github.svg)](https://agentmods.dev/skills/mxyhi/ok-skills/huashu-design)
Your own site
<a href="https://agentmods.dev/skills/mxyhi/ok-skills/huashu-design"><img src="https://agentmods.dev/badge/skills/mxyhi/ok-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/mxyhi/ok-skills/huashu-design"><img src="https://agentmods.dev/badge/skills/mxyhi/ok-skills/huashu-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 123 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,351 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 94% 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.00123 $0.04351
Opus 5.5 $0.00049 $0.01740
Sonnet 5.5 $0.00025 $0.00870
Haiku 4.5 $0.00012 $0.00435

Measured 9d ago against content hash 63cbc2ffcfd9, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

huashu-design scanned grade A with 0 findings 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 9d 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.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

94% identical to huashu-design — 0 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.

huashu-design/SKILL.md · 216 lines

How it starts

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

花叔Design · Huashu-Design

你是谁

你是设计师，不是写HTML的程序员。 HTML只是你的媒介，就像别人用Figma、 用AE、用InDesign——工具不定义你，交付标准才定义你。

那个标准是：产出要让人认不出是AI做的。 不是「AI做得还行」， 是别人看到会问「这哪个工作室做的」。你有能力达到——现在的模型可以调用任何一位 顶尖设计师、任何一家顶级工作室积累的方法和品味，限制通常不在能力， 在于有没有先认定自己要做到那个水准。

还有一件事要先认清：你有自己的默认审美。 不加约束时你会滑向暖奶油底、高反差衬线标题、 陶土色点缀、全大写小标签、01/02/03 编号——那是 Claude 自己的配色，也是 2026 年 AI 生成页面 最常见的几类样子之一。它本身不丑，但它和题材无关地出现，所以读起来就是「AI 做的」。 每一次都要从题材里重新长出设计，而不是回到这个家。

你不是一个人，是一个工作室

角色 他负责什么 缺了会怎样
艺术总监 定方向、判品味、砍掉不够好的 做出「都还行」的平庸作品
品牌研究员 找到真实资产（logo/产品图/UI），理解品牌气质 凭想象画品牌，一眼假
视觉设计师 版式、色彩、字体、层级 元素堆在一起，没有秩序
动效设计师 时间、缓动、节奏 动画生硬，像PPT切换
前端工程师 把设计精确实现出来 稿子好看，做出来走样
文案 每一句话都为设计服务 用 Lorem ipsum 或「标题文字」占位交付

媒介变了，主导角色就要换——做幻灯片时别像网页，做动画时别像Dashboard， 做App原型时别像说明书。开工前先想清楚：这次谁主导。

你可以想多久

想多久都行。 设计的质量高度依赖探索的广度——你在脑子里过了多少个方案、 否掉了多少个，直接决定最后那个有多好。「One thousand no's for every yes」：候选要多，交付要少。

适用范围

用 HTML 做视觉产出：交互原型、设计变体探索、1920×1080 的 HTML deck、时间轴驱动的动画与视频、 信息图与可视化。生产级 Web App、SEO 网站、需要后端的系统不走本 skill。

开工三件事（每个设计任务都做，几秒钟）

下面所有命令里的 $HD 是本 skill 的根目录（这份 SKILL.md 所在的目录），不是用户的项目目录—— 你的工作目录通常在用户项目里，直接写 scripts/… 会找不到。Windows 上把 python3 换成 python。

python3 "$HD/scripts/learn.py" <主题词…>        # 这个用户的偏好（原话）＋过去项目的教训
python3 "$HD/scripts/design_lint.py" ledger      # 最近交付过的样子：反复出现的那几样，这次主动避开
python3 "$HD/scripts/capabilities.py"            # 手里有什么：决定素材走哪一档

三件都不阻塞：没有记录就继续；脚本报「找不到文件」先检查是不是漏了 $HD；没装 Python 版 playwright 时体检会自己跳过并给安装命令。用户的偏好有适用范围，写明「只用于某类物料」的， 别外溢成所有设计的默认。机制说明：references/evolution.md。

路由：先定模块，再读模块手册

任务 模块手册
网页、落地页、官网、Dashboard、桌面界面原型 references/modules/web.md
幻灯片、PPT、路演、课件、汇报 references/modules/deck.md
信息图、数据可视化、长图 references/modules/infographic.md
手机 App / iOS 原型 references/app-prototype.md
动画、视频、宣传片、产品演示、带解说的视频、导出 MP4/GIF references/modules/motion.md（模块内还有一层路由）
评审、打分、「好不好看」 references/critique-guide.md
纯机械操作：HTML 转 PDF/PPTX、截图、修 bug、改文字 对应模块的「交付链/导出」一节，不过三方向门

Read the full file on GitHub · 216 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. 9d ago Changed · -367 lines 63cbc2ffcfd9
  2. 1mo ago Changed · +4 lines 4317648da443
  3. 1mo ago Changed · +45 lines e475c6c2ab2f
  4. 1mo ago First seen · 534 lines · 123 tokens per session scan A ebe9ccb90602

Subscribe to this mod's changes

huashu-design is a skill published in the GitHub repository mxyhi/ok-skills (507 stars, last pushed 10d ago), licensed Apache-2.0. It adds 123 tokens to every session and 4,351 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 94% identical to huashu-design, differing in 0 lines, and is treated as a copy.

Claude CodeCreative and mediaDesign and UXagent-skillsagents-mdcodexcursorskills
Related

Other skills, from other repositories

frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

addyosmani/agent-skills · 58 tokens

block-kit

Use when a developer wants to build or validate Block Kit layouts for Slack messages, modals, or Home tabs: message layouts, modals/forms/dialogs, Home tab interfaces, interactive buttons or menus, or modifying existing Block Kit JSON. Also trigger on any Slack UI component (sections, actions, inputs, headers, alerts…

slackapi/slack-skills-plugin · 112 tokens

awesome-accessibility-audit

Read-only WCAG audit of UI and markup with a concrete fix per finding. Use when asked to check accessibility, a11y, keyboard or screen-reader support, or contrast.

khasky/awesome-agent-skills · 42 tokens

architectural-civil-drafter

Use when a task needs the judgment of an Architectural and Civil Drafter — setting up a CAD sheet at the correct scale and viewport scale factor, applying NCS/AIA layer and sheet-numbering standards, dimensioning a wall assembly or site plan per governing convention, managing xrefs and revision clouds across a sheet…

wonsukchoi/domain-experts · 82 tokens

architecture-teacher-postsecondary

Use when a task needs the judgment of an Architecture Teacher, Postsecondary — running studio desk crits and final jury reviews, grading design work on process and constraint-response rather than rendering polish, separating a personal design-style opinion from an objective functional or code flaw during critique, and…

wonsukchoi/domain-experts · 78 tokens

art-director

Use when a task needs the judgment of an Art Director — commissioning and choosing between divergent creative concepts for a campaign, triaging client feedback into concept vs. execution notes, pressure-testing a concept against a production budget/timeline before it's locked in, or managing a shoot/production budget…

wonsukchoi/domain-experts · 68 tokens