← All skills
huashu-design
65 / 100 · Review before installing
Check before installing. Some of what it can do is expected: a coding skill usually runs build and test commands.
By mxyhi/ok-skills (GitHub) · coding · 515 stars · scanned at commit 3ae9eb9
花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 42 places.
Show 17 more
- huashu-design/README.md, line 129
npx skills add alchaincyf/huashu-design - huashu-design/SECURITY.md, line 56
Mainstream registry packages only (`playwright`, `pillow`, `sharp`, `pptxgenjs`, `pdf-lib`, `requests`), installed via standard `npm`/`pip`/`uv` — no binary dow - huashu-design/assets/style-specimens/web/16-terminal-core.html, line 33
<div class="nav mono"><b>ledgr</b><span>文档</span><span>命令</span><span>更新</span><span class="r">$ brew install ledgr</span></div> - huashu-design/assets/style-specimens/web/16-terminal-core.html, line 36
<div class="install mono"><span>$</span><b>brew install ledgr</b><i>复制</i></div> - huashu-design/references/animation-pitfalls.md, line 400
**修法**：暗色电影风产出用 `npx hyperframes check --no-contrast`，lint/runtime/layout/motion 四门仍必须 0 error。**亮底信息型产出不要跳 contrast**——那种场景下的报错通常是真的可读性问题（可读性硬底线见 SKILL.md 窄桥 4 - huashu-design/references/app-prototype.md, line 122
静态截图只能看 layout，交互 bug 要点过才发现。用 Playwright 跑 3 项最小点击测试：进入详情 / 关键标注点 / tab 切换。检查 `pageerror` 为 0 再交付。Playwright 可用 `npx playwright` 调用，或按本机全局安装路径（`npm root -g` + - huashu-design/references/design-context.md, line 28
npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080 - huashu-design/references/directions.md, line 104
- 缩略图存 `design-demos/thumbs.html`，三个完整版存 `design-demos/dir-1.html`、`dir-2.html`、`dir-3.html`（deck 是 `dir-1/` 等子目录），截图 `npx playwright screenshot file:///… out.p - huashu-design/references/gsap-recipes.md, line 631
迁完跑一次 `npx hyperframes check`（暗色 cinematic 用 `--no-contrast`， - huashu-design/references/gsap-recipes.md, line 653
- [ ] `npx hyperframes check` 通过（暗色片 `--no-contrast`，其余 0 error）？ - huashu-design/references/hyperframes-backend.md, line 24
> `npx hyperframes docs` 看本地文档清单再决定是否 init。 - huashu-design/references/hyperframes-backend.md, line 27
npx -y hyperframes init 项目名 --example blank # 非交互必须带 --example - huashu-design/references/hyperframes-backend.md, line 31
生成 index.html / hyperframes.json / meta.json / package.json（pin 了 CLI 版本）+ 项目级 CLAUDE.md。init 会把 19 个 hyperframes skill 装到 `~/.claude/skills/`（本机已装）。合成写法契约读 hyp - huashu-design/references/hyperframes-backend.md, line 33
**版本策略**：项目 package.json 会 pin 精确版本（当前实测过的是 0.7.61）。它迭代极快（300+ releases），升级先 `npx hyperframes@latest upgrade --project . --check` 看 delta，跑一遍回归 demo 再动。 - huashu-design/references/hyperframes-backend.md, line 67
npx hyperframes check --no-contrast # 暗色电影风专用（见下） - huashu-design/references/hyperframes-backend.md, line 68
npx -y hyperframes@<pin版本> render --fps 60 # 终渲；默认 30fps - huashu-design/references/hyperframes-backend.md, line 78
`npx hyperframes render --format mov` 输出 ProRes 4444（yuva444p12le，带alpha，2026-07-17实测叠色底连软阴影都正确半透）；`--format webm` 同样带透明、体积小；`--format png-sequence` 出RGBA帧序列给AE
and 22 more places
Sends data to these websites: api.svgl.app, cdn.simpleicons.org, www.google.com, api.anthropic.com
The author does not mention this.
Found in 19 places.
Show 16 more
- huashu-design/references/brand-asset-protocol.md, line 81
curl -o logo.svg "https://cdn.simpleicons.org/<slug>/<hexcolor>" - huashu-design/references/brand-asset-protocol.md, line 85
curl -A "Mozilla/5.0" -L -o assets/<brand>-brand/logo.svg "<official-logo-url>" - huashu-design/references/brand-asset-protocol.md, line 89
curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html - huashu-design/references/brand-asset-protocol.md, line 94
curl -o logo.png "https://www.google.com/s2/favicons?domain=<brand-domain>&sz=256" # 256px 官方站点图标 - huashu-design/references/brand-asset-protocol.md, line 111
curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png - huashu-design/references/react-setup.md, line 154
const res = await fetch('https://api.anthropic.com/v1/messages', { - huashu-design/scripts/cloud/ai-review-video.py, line 285
session = requests.Session() - huashu-design/scripts/cloud/tts-doubao.mjs, line 221
const res = await fetch(endpoint, { - huashu-design/scripts/fetch_images.py, line 15
import argparse, json, os, re, sys, urllib.parse, urllib.request - huashu-design/scripts/fetch_images.py, line 28
req = urllib.request.Request(url, headers={"User-Agent": UA}) - huashu-design/scripts/fetch_images.py, line 29
with urllib.request.urlopen(req, timeout=30) as r: - huashu-design/scripts/fetch_images.py, line 37
def fetch(query, out, count, width): - huashu-design/scripts/fetch_images.py, line 63
req = urllib.request.Request(thumb, headers={"User-Agent": UA}) - huashu-design/scripts/fetch_images.py, line 64
with urllib.request.urlopen(req, timeout=60) as r, open(path, "wb") as f: - huashu-design/scripts/fetch_images.py, line 85
allgot += fetch(q, a.out, a.count, a.width) - huashu-design/scripts/ref_board.py, line 98
print('没有的话：用 WebSearch 的图片结果或请用户发截图，存进 refs/ 后直接用看图能力打开。')
Runs commands on your computer
The author does not mention this. Expected for a coding skill.
Found in 19 places.
Show 16 more
- huashu-design/scripts/cloud/ai-review-video.py, line 110
r = subprocess.run( - huashu-design/scripts/cloud/ai-review-video.py, line 125
r = subprocess.run( - huashu-design/scripts/cloud/tts-doubao.mjs, line 34
import { execFileSync } from 'node:child_process'; - huashu-design/scripts/cloud/tts-doubao.mjs, line 95
const out = execFileSync('ffprobe', [ - huashu-design/scripts/narrate-pipeline.mjs, line 38
import { execFileSync } from 'node:child_process'; - huashu-design/scripts/narrate-pipeline.mjs, line 128
const out = execFileSync('ffprobe', [ - huashu-design/scripts/narrate-pipeline.mjs, line 147
const out = execFileSync('node', [TTS_SCRIPT, ...args], { - huashu-design/scripts/narrate-pipeline.mjs, line 157
const out = execFileSync('node', [TTS_SCRIPT, ...args.filter((a) => a !== '--timestamps')], { - huashu-design/scripts/narrate-pipeline.mjs, line 172
execFileSync( - huashu-design/scripts/narrate-pipeline.mjs, line 181
execFileSync( - huashu-design/scripts/render-video-seek.js, line 34
const { spawnSync } = require('child_process'); - huashu-design/scripts/render-video-seek.js, line 216
const ffmpeg = spawnSync('ffmpeg', [ - huashu-design/scripts/render-video.js, line 43
const { spawnSync } = require('child_process'); - huashu-design/scripts/render-video.js, line 267
const ffmpeg = spawnSync('ffmpeg', [ - huashu-design/scripts/tests/test_pptx_from_rendered.py, line 26
r = subprocess.run([sys.executable, SCRIPT, FIXTURE, "-o", cls.out, "--selector", ".slide"], - huashu-design/scripts/tests/test_pptx_from_rendered.py, line 65
subprocess.run([sys.executable, SCRIPT, FIXTURE, "-o", out, "--selector", ".slide"],
Can call paid AI services billed to you
The author does not mention this.
Found in 1 place.
Safer alternatives
Low-risk skills in the same category (coding) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'huashu-design' ] || [ -L ~/.agents/skills/'huashu-design' ]; then echo 'A skill folder named huashu-design already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/mxyhi/ok-skills' "$d" && git -C "$d" checkout --quiet '3ae9eb922f9db7b66a5327529afd550d78d60fb0' -- 'huashu-design' && mkdir -p ~/.agents/skills && cp -R "$d"/'huashu-design' ~/.agents/skills/'huashu-design' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'huashu-design' ~/.claude/skills/'huashu-design' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for mxyhi/ok-skills shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/mxyhi/ok-skills/)
Score history
| Date | Version | Score |
|---|
| 2026-11-09 | 3ae9eb9 | 65 |
| 2026-11-07 | 91108cf | 65 |