/ 目录 / 演练场 / Huashu Design
● 社区 alchaincyf ⚡ 即开即用

Huashu Design

作者 alchaincyf · alchaincyf/huashu-design

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

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

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "huashu-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "huashu-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/alchaincyf/huashu-design",
          "~/.claude/skills/huashu-design"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add huashu-design-skill -- git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Huashu Design

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

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

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

前置条件
  • Skill 已安装 — git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design
步骤
  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