Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

花叔Design · Huashu-Design · zhukunpenglinyutong | DecimalAI

design mediaby zhukunpenglinyutong

花叔Design · Huashu-Design

zhukunpenglinyutong/huashu-design

Source zhukunpenglinyutong/desktop-cc-gui ↗License MIT

花叔Design（Huashu-Design）——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索、设计方向顾问与专家评审。HTML是工具不是媒介，根据任务embody UX设计师/动画师/幻灯片设计师/原型师，避免web design tropes。触发词：做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、配色方案、视觉风格、评审、review this design、带解说动画、voiceover、narration、TTS+动画。主干能力：Junior Designer工作流、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes、Starter Components、App原型交互守则、Playwright验证、HTML动画到MP4/GIF导出、带解说长动画pipeline。需求模糊时进入设计方向顾问模式：推荐差异化方向、展示showcase、

SkillScore50Maintained

Automatic

Frontend / UI pack

Last verified 9/8/2026

What it changes

Passed 10 of 20 test cases with the skill, and 3 of 20 without it.

Without skill14%

With skill50%

Checks it passed that the model alone missed

Disables animation looping when a global recording flag is detected
Prefixes the watermark text with an unofficial homage disclaimer string
Applies 3D perspective tilting with floating elevation shadows on photo cards

and 9 more in the full report

8 fixed3 passed either way11 still failing0 broke

Pass-rate lift: +36 pp
Tokens: +441%
Agent turns: 0%
Response time: -4%

Model gemini-3.6-flashMeasured 9/8/2026v111 of 22 cases passed with skill · 20 comparable

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/zhukunpenglinyutong-huashu-design/SKILL.md https://app.decimal.ai/s/zhukunpenglinyutong-huashu-design/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add zhukunpenglinyutong-huashu-design, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/zhukunpenglinyutong-huashu-design/ and pins it in .decimal/skills.lock

decimalai skills add zhukunpenglinyutong-huashu-design

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/zhukunpenglinyutong-huashu-design/SKILL.md https://app.decimal.ai/s/zhukunpenglinyutong-huashu-design/SKILL.md

Raw file: /s/zhukunpenglinyutong-huashu-design/SKILL.md ↗ · machine-readable summary at /s/zhukunpenglinyutong-huashu-design.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 8

Prompt

I am exporting an HTML motion graphic demo to an MP4 video file for a non-official fan homage of a popular camera brand. What visual attribution watermark should be embedded in the frame?

What was checked, without and with the skill
Checked	Without skill	With skill
Includes the Created by Huashu-Design attribution watermark text in the lower corner of the animation frame	Missed	Passed
Prefixes the watermark text with an unofficial homage disclaimer string	Missed	Passed

case-17 · gemini-3.6-flash · 9/8/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md806 lines4 files

花叔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 小时

Track record

Benchmark

10 / 20

test cases passed, vs 3 / 20 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 8/17/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

zhukunpenglinyutong / desktop-cc-gui

.agents/skills/huashu-design/SKILL.md

View on GitHub ↗

License MITImported 8/17/2026Version v1Bundled 3 files

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

mxyhi/huashu-design花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。Close match+50 pp pass-rate lift

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

花叔Design · Huashu-Design

使用前提

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

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills