huashu-design 怎么安装？AI 高保真原型与 PPT 生成教程

安装 huashu-design 之前，先确认你要解决的是哪件事：让 Codex 生成高保真原型，还是把 HTML 动画继续导出成 MP4。两种需求都从同一个 Skill 开始，区别在于后续是否需要安装 Playwright、ffmpeg、PPTX 或音频相关依赖。

安装前需要准备什么

• 一台能运行 Node.js 和 npm 的电脑。
• 已经安装并能正常启动 Claude Code、Codex、Cursor 或其他支持 markdown-based skill 的 agent。
• 一个项目目录。建议把 Skill 装到项目可访问的位置，便于检查版本和引用脚本。

这个工具本身不要求你先申请 huashu-design 专用 API Key。若生成的 HTML 里要调用外部模型或语音服务，密钥应按对应文档放入环境变量或 agent 配置，不要直接写进业务项目的 HTML。

用官方命令安装

在终端进入项目目录，执行官方仓库 README 给出的命令：

npx skills add alchaincyf/huashu-design

命令会根据当前环境把 Skill 加入支持的 agent。Claude Code 的项目级目标通常是 .claude/skills/huashu-design/，如果 CLI 输出了不同路径，以终端提示为准。安装后，可以在目标目录看到 SKILL.md、assets、references 和 scripts 等内容。

这张官方演示图对应的是幻灯片工作流。它的作用不是证明安装已经成功，而是帮助你确认下载到的确实是 huashu-design 仓库，而不是同名的第三方模板。

安装后怎么试跑

测试一：生成一个原型

重新打开 agent 会话，输入“做一个四屏、可点击的番茄钟 App 原型，先给出三种设计方向”。能看到方向选择、页面文件或可运行 HTML，说明 Skill 已被识别。

测试二：确认文件结构

检查项目中是否出现 HTML 源文件，以及是否能从 Skill 根目录找到 assets 和 references。如果只生成了一段聊天文本，却没有文件，通常是 agent 没有在正确的项目目录工作。

Tweaks 演示可以作为第二个验收方向：它强调配色、字型和信息密度的参数化调整。真正验收时应以你的项目里是否产生可修改文件为准。

常见问题

安装命令报错怎么办

先执行 node -v 和 npm -v，再确认网络能访问 GitHub。如果是权限问题，换到有写入权限的项目目录；如果 agent 不识别 Skill，关闭旧会话并重新启动。

需要安装 Playwright 吗

只做静态 HTML 时不一定需要。要做浏览器点击验证、录制动画或截图，则按仓库文档安装 Playwright 和 Chromium；要导出 MP4，还要准备 ffmpeg。

安装成功检查清单

1. 命令来源是官方仓库，目标目录里存在 SKILL.md。
2. 新会话能响应原型、幻灯片或动画任务。
3. 项目目录产生了可打开的 HTML 文件。
4. 需要导出视频时，Playwright、Chromium 和 ffmpeg 均已按文档验证。