What is huashu-design?

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.

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

It gives visual projects a structured review process and sets different working rules for prototypes, slides, animations, and data displays.

huashu-design — Skill for Claude Code and Codex by mxyhi

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.

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.

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 18,778 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.

Model	Per session	Once invoked
Fable 5.1	$0.00123	$0.18778
Opus 5	$0.00062	$0.09389
Sonnet 5	$0.00025	$0.03756
Haiku 4.5	$0.00012	$0.01878

Measured 8d ago against content hash e475c6c2ab2f, 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 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 8d 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 — 1 line 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 · 579 lines

How it starts

The opening of the file, as written. The whole thing — 579 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做得还行」，是别人看到会问「这哪个工作室做的」。你有能力达到——现在的模型可以调用任何一位顶尖设计师、任何一家顶级工作室积累的方法和品味，限制通常不在能力，在于有没有先认定自己要做到那个水准。

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

一件像样的设计交付，顶级工作室不会只派一个人。你要依次成为他们每一个：

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

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

你可以想多久

想多久都行。 设计的质量高度依赖探索的广度——你在脑子里过了多少个方案、否掉了多少个，直接决定最后那个有多好。token不要钱，用户要的是最好的结果。

「One thousand no's for every yes」不是口号，是工作方式：候选要多，交付要少。

使用前提

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

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

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

任务路由：一张表定入口

收到任务先扫一遍这张表，确定走哪条线再开工（多信号同时命中按行序叠加）：

任务信号	入口
提到具体品牌/产品名	核心原则#0 事实验证 → §1.a 资产协议 → 标准流程
🔴 任何会产出新视觉设计的任务（无论有没有风格参考、有没有品牌名，100% 必走）	三方向硬门：Fallback Phase 1-5 出三版真实初稿等用户选 → 回标准流程 Step 2
幻灯片/PPT	标准流程 + Step 1 deck 交付链 + 「技术红线」架构选型
动画/导出 MP4/GIF	标准流程 + Step 9；任何动画开工前先按 `references/storyboard-basics.md` 出轻量分镜卡（每一镜先是一张会动的封面）；镜头级运动（zoom/pan/转场）必读 `references/camera-language.md`；新动画项目默认走 HyperFrames 后端（选型边界+契约 → `references/hyperframes-backend.md`，GSAP 实现配方 → `references/gsap-recipes.md`）；动手前必读 `references/animation-pitfalls.md`
🖥️ 宣传的产品有 UI 界面（产品动画/功能演示/商单，画面主角是一个界面）	上一行动画链 + 单一入口 `references/ui-demo-animation.md`（截图运镜 vs HTML 重建决策树 + UI 展示八式 + `assets/cursor.jsx` 光标组件）；UI 截图取材走 §1.a 资产协议
带解说长视频（≥1分钟）	Step 9.5 → `references/voiceover-pipeline.md`
launch film/品牌宣传片（「Apple级」「超级碗品质」）	三方向硬门先行（方向板级初稿，见 Fallback「三方向初稿形态」）→ 用户选定后再写万字 director's notes → `references/launch-film-director-notes.md`
App/iOS 原型	「App / iOS 原型专属守则」（覆盖通用规则）
评审/打分	Step 10 → `references/critique-guide.md`
弱 runtime（无 subagent/非 Claude）	上述任一条 + 「弱 runtime 降级模式」

Read the full file on GitHub · 579 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.

8d ago Changed · +45 lines e475c6c2ab2f
12d 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 (485 stars, last pushed 3d ago), licensed Apache-2.0. It adds 123 tokens to every session and 18,778 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. It is 94% identical to huashu-design, differing in 1 line, and is treated as a copy.

Claude Code Creative and media Design and UX agent-skills agents-md codex cursor skills

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

skillshare-ui-website-style

Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard…

runkids/skillshare · 147 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

huashu-design