/ 目录 / 演练场 / Huashu Design
← 全部服务器 ↗ GitHub
● 社区 alchaincyf ⚡ 即开即用

Huashu Design

作者 alchaincyf · alchaincyf/huashu-design

适用于 Claude 的 HTML 原生设计 skill——高保真原型、幻灯片、动画、MP4 导出，内置 20 条设计原则。

华术（Huashu Design）是一个 Claude Code skill，将 HTML/CSS 作为设计画布。无需 Figma，直接交付原型、幻灯片和动态说明视频。内置 20 条固定设计原则、五维审查机制和 MP4 渲染能力。框架无关；可从一句简短的创意 brief 开始工作。

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： Huashu Design

快速在 HTML 中原型化产品落地页

👤 创始人、偏好写代码而非用 Figma 的设计师 ⏱ ~60 min intermediate

何时使用： 你有一份 brief，想要一个可点击、可度量的原型，而非静态 mock。

步骤
  1. 确定风格基调
    使用 huashu-design。Brief：极简 B2B SaaS 落地页，瑞士风格影响，衬线字标题，单一强调色。按你的 20 条原则生成布局方案。✓ 已复制
    → 布局方案引用了具体的应用原则
  2. 构建
    输出 HTML/CSS。单文件。响应式。不用 JS 框架。✓ 已复制
    → 单文件交付物，通过基本无障碍检查
  3. 五维审查
    对你刚交付的内容运行五维审查。哪里不足？✓ 已复制
    → 批判性的自我审查，不是自我吹捧

结果： 一个可以用代码迭代做 A/B 测试的原型。

注意事项
  • Skill 回退到通用的「hero + features + CTA」模板 — 在每次 prompt 中都锁定风格参考（瑞士、包豪斯、编辑风格）
搭配使用： filesystem

制作动态说明视频并导出为 MP4

👤 需要产品视频的开发者/创作者 ⏱ ~120 min advanced

何时使用： 你想要一个 30 秒的产品说明视频，但不值得为此学 After Effects。

步骤
  1. 分镜
    使用 huashu-design。为我的产品制作一个 30 秒的说明视频分镜：问题（8s）/ 解决方案（14s）/ CTA（8s）。✓ 已复制
    → 逐帧的计划
  2. 用 HTML 制作动画
    将每个场景实现为 CSS keyframe 动画。渲染为一个带时间轴的 HTML 文件。✓ 已复制
    → HTML 在浏览器中流畅播放
  3. 导出
    渲染为 1080p MP4。✓ 已复制
    → MP4 已写入磁盘；时长吻合

结果： 通过一条 prompt 输出可发布的 MP4 说明视频，无需视频编辑软件。

注意事项
  • 字体在无头 Chrome 中渲染不一致 — 内联 Web 字体；不要依赖系统字体
搭配使用： filesystem · after-effects

组合

与其他 MCP 搭配，撬动十倍杠杆

huashu-design-skill + after-effects

在 HTML 中起草分镜，在 AE 中精修达到广播级品质

在 huashu-design 中起草；导出帧供 AE 合成。✓ 已复制
huashu-design-skill + filesystem

将迭代版本与 brief 一起保存

创建 /designs/landing-v1/ 到 v3/，全部保留。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
plan_layout brief, style_ref 每次新设计的起点 0
generate_html plan 按方案构建 0
review_5d html 构建完成后自我审查 0
render_mp4 html, duration 动态交付物 0

成本与限制

运行它的成本

API 配额
N/A
每次调用 Token 数
高保真设计会产生大量 HTML——保持范围紧凑
费用
免费
提示
分阶段生成：先结构，再样式，最后精修

安全

权限、密钥、影响范围

最小权限： filesystem-write
凭据存储： 无
数据出站： 无

故障排查

常见错误与修复

MP4 render fails (ffmpeg missing)

brew install ffmpeg——skill 使用它进行帧合成

验证： `ffmpeg -version`
Design looks generic

你没有锁定风格参考——每次都要明确说明一个（瑞士、包豪斯、Pentagram……）

Review gives happy feedback on bad design

明确 prompt：「请批判性评价；先列出问题」

替代方案

Huashu Design 对比其他方案

替代方案何时用它替代权衡
cc-frontend-skill你想要有主见的风格指导，而非方法论审查流程结构性较弱
Figma团队工作流要求使用 Figma不是代码；动画方式不同

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills