用途
Huashu Design 是一款 HTML 原生设计技能（Skill by ara.so，Daily 2026 Skills 合集），把自然语言请求转化为可交付的设计成果——交互式原型、动画幻灯片、动效导出与信息图表，全部使用 HTML/CSS/JS 完成，无需 Figma 或图形界面。安装一次到智能体后，只需描述想要的内容，即可收到成品文件。
主要能力
该技能可产出以下类型成果：
- 交互式原型（App/Web）：单文件 HTML，带 iPhone/Android 外框，可点击，典型耗时 10–15 分钟。
- 演示文稿：HTML（浏览器）+ 可编辑 PPTX（真实文本框），15–25 分钟。
- 时间轴动画：MP4（25/60 fps）+ GIF（调色板优化）+ BGM，8–12 分钟。
- 设计变体：3 个以上并排展示，带 Tweaks 面板与 localStorage，约 10 分钟。
- 信息图表 / 数据可视化：印刷质量，CSS Grid，可导出 PDF/PNG/SVG，约 10 分钟。
- 设计方向建议：5 大学派 × 20 种理念，3 个方向 + 演示，约 5 分钟。
- 五维专家评审：雷达图 + Keep/Fix/Quick Wins 清单，约 3 分钟。
使用方式
安装命令：
npx skills add alchaincyf/huashu-design
兼容 Claude Code、Cursor、Codex、OpenClaw、Hermes 及任何可读取 SKILL.md 的智能体。
仓库结构包含：SKILL.md（面向智能体的规格说明）、assets/（动画、iOS/Android/macOS/浏览器外框、幻灯片引擎、设计画布、24 个预置示例、6 首场景背景音乐）、references/（动画陷阱、设计风格、幻灯片、可编辑 PPTX、评审指南、视频导出）、scripts/（渲染视频、格式转换、添加音乐、导出 PDF/PPTX、html2pptx）、demos/（9 个能力演示）。
核心概念
1. 初级设计师工作流（默认模式）
智能体不会盲目开始。执行任何任务前会：展示一次性问题清单并等待批量回答后才动代码；在 HTML 内写入假设、占位符和推理注释；展示早期骨架（即使是灰框）并获取确认；填充内容 → 生成变体 → 添加 Tweaks 面板，每步都展示；最终交付前运行 Playwright 视觉检查。
2. 品牌资产协议（涉及具名品牌时强制）
当任务涉及特定品牌（Stripe、Linear、Anthropic 或用户公司）时执行五步：询问用户是否有品牌指南 → 搜索 <brand>.com/brand、brand.<brand>.com、<brand>.com/press → 下载（SVG 文件 → 整页 HTML → 产品截图取色，三种回退）→ 提取（从资源中 grep 所有 #xxxxxx，按频率排序，过滤黑白灰）→ 锁定规格（写入 brand-spec.md + CSS 自定义属性，所有 HTML 使用 var(--brand-*)）。绝不凭记忆猜测品牌色。
3. 设计方向顾问（回退机制）
当请求过于模糊无法启动时触发。智能体从 5 大学派 × 20 种理念中挑选 3 个不同学派方向，每个附带代表作品、情绪关键词、参考设计师，并生成 3 个并行视觉演示供用户选择，然后进入主流程。5 大学派包括：现代主义功能派（Swiss Grid、Bauhaus Utility、Dieter Rams Reduction）、情感表现派（Memphis Color、Brutalist Raw、Maximalist Baroque）、数字原生派（Glassmorphism、Neumorphism、Cyberpunk Neon）、文化融合派（Wabi-Sabi、Bauhaus East、Art Nouveau Revival）、系统思维派（Material Design、IBM Carbon、Apple HIG）。
4. 动效设计引擎
动画系统使用 assets/animations.jsx 中的四种可组合原语：Stage（定义总时长与画布）、Sprite（定时元素）、interpolate（带缓动的时间→值映射）、Render（渲染）。
5. 反 AI 同质化规则
避免视觉最大公约数：不使用紫色渐变、emoji 图标、左边框强调卡片、SVG 绘制的人脸、Inter 作为展示字体；推荐 text-wrap: pretty、CSS Grid 布局、精选衬线展示字体、oklch() 色彩空间、真实留白。
视频导出流程
# 1. 渲染 HTML 动画为 MP4
node scripts/render-video.js --input ./animation.html --output ./out/animation.mp4 --fps 25 --duration 10000
# 2. 帧插值升至 60fps
bash scripts/convert-formats.sh --input ./out/animation.mp4 --fps 60 --output ./out/animation-60fps.mp4
# 3. 导出调色板优化 GIF
bash scripts/convert-formats.sh --input ./out/animation.mp4 --format gif --width 800 --output ./out/animation.gif
# 4. 添加背景音乐
bash scripts/add-music.sh --video ./out/animation.mp4 --audio ./assets/bgm-cinematic.mp3 --output ./out/animation-final.mp4
render-video.js 内部使用 Playwright 逐帧捕获后经 ffmpeg 编码。
PPTX 导出
node scripts/export_deck_pptx.mjs --input ./deck.html --output ./deck.pptx
node scripts/export_deck_pdf.mjs --input ./deck.html --output ./deck.pdf
html2pptx.js 会读取每个 DOM 元素的 getComputedStyle()，将 CSS 属性映射为真实的 PowerPoint 文本框、形状与图片，输出可在 PowerPoint/Keynote 中编辑，而非图片堆。
五维专家评审
询问“对该文件做五维设计评审”后，智能体按 0–10 分评分：哲学一致性（是否坚持一种视觉语言）、视觉层级（陌生人能否 3 秒内扫读并知道重点）、细节执行（间距、字距、对齐是否精确）、功能性（每个元素是否物有所值）、创新性（是否有独特创意选择）。输出为 SVG 雷达图 + 结构化 Keep / Fix / Quick Wins 清单及可执行步骤。
适用提示词示例
- 原型：“为 AI 日记应用做一个可点击的 iOS 原型——4 个核心界面”
- 幻灯片：“为 B2B SaaS 产品创建 10 页路演稿，建议 3 种风格方向”
- 动画：“为这个产品发布序列制作动画，30 秒，导出带音乐的 MP4”
- 信息图表：“把这份数据集可视化为杂志级信息图表，导出 300dpi PNG”
- 评审：“对这份设计文件做五维评审并给出修复清单”
- 模糊请求（触发顾问）：“我需要一个看起来高端的 fintech 应用视觉”
限制与注意事项
- 安装需通过
npx skills add完成，且智能体配置中需引用 SKILL.md，否则可能生成通用的紫色渐变 AI 同质化内容。 - 品牌色必须实时提取，不可凭记忆生成。
- MP4 导出依赖 Playwright（
npx playwright install chromium）且 FFmpeg 需在 PATH 中。 - PPTX 文本需使用语义元素（
<h1>、<p>、<span>）才能正确映射为文本框；应使用 html2pptx.js 而非基于截图的导出。 - 25fps 动画可能卡顿，需运行 60fps 插值步骤。
- Tweaks 面板依赖 localStorage，不同绝对路径的 file:// 会丢失存储值，建议使用本地开发服务器（
npx serve .）。 - 关于具体收费标准、价格与商业授权信息，资料中暂未提供。