技能说明
适用：需要快速制作可点击 HTML 原型、产品动效、演示文稿、信息图和设计变体的 Codex、Claude Code、Cursor、OpenClaw、Hermes 等兼容 Agent。能力：网页 / App 原型、HTML 幻灯片与可编辑 PPTX、MP4 / GIF 动画、信息图与数据可视化、并排视觉变体、五维设计评审。场景：概念验证、产品发布演示、视觉方向探索；不适合直接替代生产级网站或动态后端系统。边界与安全：核心流程本地运行；可选云端 TTS / AI 视频评审使用自有密钥，只在显式同意后调用对应厂商官方接口；Wikimedia 图片检索发送关键词，浏览器资源可从 CDN 加载。详细数据流见来源仓库 SECURITY.md。MIT 协议（仓库标注自 2026-05-14 生效）。
关于此技能
Huashu Design 是一款以 HTML 为核心的创意设计 Agent Skill，可将文字需求转成可点击的网页 / App 原型、HTML 幻灯片与可编辑 PPTX、时间轴动画（MP4/GIF）、信息图和多套视觉变体，并提供五维设计评审。适合需要快速呈现视觉方案与产品故事的任务；它不是生产级网站或动态后端系统的替代品。遇到具体品牌时，应先确认品牌资料并核对官方视觉资产；空白需求可先展示三种差异明显的方向再由用户选择。
核心能力
交互原型与演示内容
生成可点击的 HTML 网页 / App 原型、HTML 演讲稿及可编辑 PPTX。
动效与视觉输出
通过内置脚本导出 MP4 / GIF，并制作信息图、数据可视化和并排设计变体。
设计评审与品牌一致性
按哲学一致性、视觉层级、细节执行、功能性、创新性五方面评审；优先核对真实品牌资产而非凭记忆猜颜色。
适用场景
网页或 App 概念验证
需要快速呈现、点击体验和比较视觉路线，但当前交付重点是原型而非上线网站。
产品发布与演讲素材
制作时间轴动画、HTML 演示稿、可编辑 PPTX、信息图或可导出的视觉素材。
设计方向探索
需求尚未锁定视觉方向时，先呈现多套实际视觉稿供用户选择。
使用步骤
- 01
安装并准备素材
用 npx skills@latest add alchaincyf/huashu-design 安装；准备需求、品牌标志、色板、界面截图等。安装后确认 references、assets、scripts、demos 子目录完整。
- 02
说明目标与交付物
告诉 Agent 受众、产品目标、所需屏幕 / 时长 / 文件格式、品牌限制及需要的交互状态。
- 03
选择方向并生成
品牌项目先核对官方素材；方向不明确时要求三套差异方向，再选定一套生成 HTML 原型、演示或动效。
- 04
检查并导出
在浏览器检查交互与布局，选用对应脚本导出；涉及外部云服务前查看它将发送的内容并明确同意。
常见问题
能直接做可上线的完整网站吗？+
不适合作为生产级网站或动态后端系统的替代方案。它更适合原型、演示、动画、信息图和设计评审；生产网站应使用相应建站 / 前端工作流。
安装后只有 SKILL.md 一个文件怎么办？+
该技能需要 references、assets、scripts、demos 等目录。旧版 skills CLI（≤1.5.15）可能只复制主文件；更新至 skills@latest（README 提到修复版 1.5.19）后重装，或按仓库说明用 git clone 安装。
必须配置 API Key 吗？+
核心设计、渲染和导出流程无需 API Key；可选豆包 TTS 或 AI 视频评审会在首次运行前展示数据目的地，并要求 --yes 或 HUASHU_CLOUD_OK=1。不要把密钥贴进输出内容，使用前请核对仓库 SECURITY.md。
它会上传项目内容吗？+
仓库安全说明称核心设计 / 渲染 / 导出本地运行且无遥测；可选云脚本在明确同意后将对应文本或视频片段发往火山引擎 / 字节跳动官方 API。图片检索会向 Wikimedia 发送关键词，浏览器可能从 Google Fonts、unpkg 等 CDN 加载资源。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/20
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills@latest add alchaincyf/huashu-design