alchaincyf / huashu-design

alchaincyf/huashu-design

open_in_new前往仓库

Huashu Design · 面向 Claude Code 的 HTML 原生设计技能 · 高保真原型/幻灯片/动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · 兼容多种 Agent

项目概览

项目概述

Huashu Design 是一个面向 Claude Code 等 AI 编程助手的 HTML 原生设计技能（skill），由 alchaincyf 开发，采用 MIT 许可证。它允许用户通过自然语言指令，在 3 到 30 分钟内生成高保真原型、幻灯片、动画、信息图等设计交付物，并支持导出 MP4、GIF、可编辑 PPTX、PDF 等格式。该项目强调“打字、回车、一份能交付的设计”，旨在让 AI 直接产出接近专业设计团队水准的作品，同时避免常见的“AI 味”设计。

核心功能

  • 交互原型：生成单文件 HTML 原型，支持真实 iPhone 边框、可点击交互，并通过 Playwright 验证。
  • 演讲幻灯片：生成 HTML 演示文稿，并可导出为可编辑的 PPTX 文件（保留文本框）。
  • 时间轴动画：创建动画并导出为 MP4（25/60fps）、GIF（调色板优化）及带背景音乐的成片。
  • 设计变体：提供 3 个以上并排对比的变体，支持实时参数调整（Tweaks）。
  • 信息图/可视化：生成印刷级排版的信息图，可导出 PDF、PNG、SVG。
  • 设计方向顾问：当需求模糊时，通过三套逻辑并行（秒数轮盘、现实参照、最佳设计师）直接生成 3 版真实视觉供用户选择。
  • 5 维度专家评审：对设计进行哲学一致性、视觉层级、细节执行、功能性、创新性评分，并输出改进清单。
  • 品牌资产协议：强制 5 步流程（问、搜、下载、grep 色值、固化 spec），确保品牌色准确。
  • Junior Designer 工作流：默认工作模式，先展示假设与占位，尽早反馈，迭代改进。

适用与不适用场景

适用场景：

  • 快速生成高保真 UI 原型、演示文稿、产品发布动画、信息图。
  • 需要跨 agent 使用（Claude Code、Cursor、Codex 等）。
  • 用户偏好对话式交互，不愿打开图形设计工具。
  • 需要本地运行、零网络依赖的核心设计流程。

不适用场景：

  • 需要图层级可编辑的 PPTX 到 Figma 的转换。
  • 复杂动画（如 Framer Motion 级别、3D、物理模拟、粒子系统）。
  • 完全空白的品牌从零设计（质量会降至 60-65 分）。

技术架构与依赖

  • 语言：HTML（主要），辅以 JavaScript、CSS。
  • 核心机制：SKILL.md 主文档 + references/ 子文档 + assets/ 组件 + scripts/ 工具链 + demos/ 演示。
  • 依赖：Node.js（运行脚本）、Playwright（浏览器验证）、skills CLI（安装）、可选云服务（豆包 TTS、AI 评审，需用户自备 key）。
  • 导出工具：render-video.js（HTML→MP4）、convert-formats.sh（MP4→GIF）、add-music.sh（加 BGM）、html2pptx.js（HTML→PPTX）等。

安装与快速开始

npx skills add alchaincyf/huashu-design

安装后需检查目录是否包含 references/、assets/、scripts/、demos/ 子目录；若缺失，升级 skills CLI（≥1.5.19）或使用 git clone 兜底：

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

然后在支持 skills 的 agent 中直接输入指令，例如：

「做一份 AI 心理学的演讲 PPT，推荐 3 个风格方向让我选」
「做个 AI 番茄钟 iOS 原型，4 个核心屏幕要真能点击」
「把这段逻辑做成 60 秒动画，导出 MP4 和 GIF」

典型使用方法

  1. 安装 skill：使用 npx skills add 或 git clone。
  2. 发起设计请求：在 agent 对话中描述需求，如“做一份产品发布动画”。
  3. 选择方向：若需求模糊，skill 会生成 3 版视觉供选择。
  4. 迭代反馈：通过 Junior Designer 工作流，逐步完善设计。
  5. 导出交付：使用内置脚本导出 MP4、GIF、PPTX、PDF 等格式。

配置与部署要点

  • 安装完整性：确保所有子目录存在，否则功能不完整。
  • 品牌资产：涉及具体品牌时，skill 会强制遵循品牌资产协议，需提供品牌指南或允许搜索。
  • 云功能：云能力（TTS、AI 评审）默认关闭，需用户显式启用并提供 API key。
  • 本地运行：核心设计、渲染、导出流程完全本地运行，无网络请求。
  • 许可证：MIT，允许商用，无需授权。

限制、风险与许可证

限制：

  • 不支持图层级可编辑的 PPTX 到 Figma。
  • 不支持复杂动画（3D、物理模拟、粒子系统）。
  • 空白品牌从零设计质量下降。

风险：

  • 依赖第三方服务（如 Wikimedia、Unsplash）获取图片，可能受网络影响。
  • 云功能需用户自备 key，且仅发送至对应厂商官方 API。

许可证：MIT（自 2026-05-14 起），允许自由使用、修改、分发，包括商业用途。

官方链接

信息来源和分析时间

  • 信息来源：GitHub 仓库 README（中文版）、仓库元数据、最新 Release 信息。
  • 分析时间：2026-05-14（基于 README 中许可证变更日期）。