如果把普通的"AI 写页面"理解成让模型临场拼 HTML 和 CSS，那么 Huashu Design 做的事情更接近给 Agent 装上一套设计部门的标准作业程序：先查事实、找品牌资产、提出多个视觉方向、等待人选择，再实现、验证和导出。它不是新的生成模型，也不是 Figma、After Effects 的完整替代品，而是一个可被 Claude Code、Codex、Cursor 等支持 Skill 的 Agent 读取和执行的开源设计 Skill。
项目的口号是"打字。回车。一份能交付的设计。"其目标产物覆盖可点击的 App/Web 原型、HTML 幻灯片、可编辑 PPTX、时间轴动画、MP4/GIF、信息图、PDF，以及设计评审。项目采用 MIT License；主仓库页面同时给出了安装方法、能力清单与项目结构。项目主页与 README
它究竟是什么：代码、规范，还是提示词？
答案是三者的组合，但核心是"规范驱动的 Agent 工作流"。仓库中的 SKILL.md 不是一句宽泛的系统提示，而是一份五百余行的任务路由和质量协议。它要求 Agent 在不同阶段切换为艺术总监、品牌研究员、视觉设计师、动效设计师、前端工程师和文案；HTML 只是最终承载设计的媒介。SKILL.md 原文
仓库大致分为四层：
| 层次 | 主要内容 | 作用 |
|---|---|---|
| 决策层 | SKILL.md |
识别任务、约束流程、设置检查点 |
| 知识层 | references/ |
品牌资产、幻灯片、动画、评审、导出等专项规范 |
| 组件层 | assets/ |
设备外框、动画 API、Deck 舞台、设计对比画布等 |
| 执行层 | scripts/ |
浏览器渲染、截图、视频、GIF、PDF、PPTX 和质量验证 |
这一区分很重要：模型负责理解意图与生成方案，Skill 负责限制模型的行为，组件负责复用成熟实现，脚本则把浏览器中的结果变成可交付文件。因此，它更像一套"可执行设计方法论"，而不是一个固定 UI 组件库。
核心工作流：先减少错误，再提高审美上限
1. 事实验证先行
只要任务涉及具体产品、人物、技术、版本或发布时间，规则就要求先检索权威来源，把确认后的事实固化下来。这个机制针对的是生成式模型最昂贵的一类错误：界面可以很漂亮，但产品型号、规格或发布状态是错的。对于品牌设计，顺序也是"先确认对象真实存在及其当前状态，再找资产"，而不是依赖模型记忆。
2. 品牌资产协议
涉及真实品牌时，Huashu Design 要求执行"问、搜、下载、验证/提取、固化"五步：先向用户索要已有规范，再从官网、press kit 等来源寻找 Logo、产品图、UI 截图、字体和颜色；拿到资产后验证真实性，并写入 brand-spec.md 和 CSS 变量。其关键观点是"资产大于规范"------只套一个近似品牌色，却没有真实 Logo、产品图和界面，仍然很难形成品牌识别。
这种做法也解释了项目为什么强调 existing context。高保真设计并非从白纸凭空长出，而应继承已有设计系统、代码、截图和内容。若上下文确实不存在，才进入风格探索，而非直接套用通用的科技感模板。
3. 三方向硬门
当前 SKILL.md 把"三个设计方向"设为新视觉任务的硬门：即使用户已经指定品牌或风格，也先输出三个可见的差异化初稿，由用户选择后再进入完整制作。网页或原型需要每个方向给出 HTML 与截图；多页 Deck 给出代表页；动画则给出关键帧方向板，而不是昂贵地先做三支成片。
这个决策把人放在真正需要判断的位置。Agent 擅长快速扩大探索面，人更适合决定哪一种诠释符合业务语境。代价是流程不再"一句话后完全无人值守"，但它显著降低精修了错误方向的风险。用户明确要求直接制作、项目已经选定方向后的迭代、以及纯导出或修 Bug 等机械操作可以豁免。
4. 反 AI Slop
项目把"紫色渐变、Emoji 图标、圆角卡片加彩色左边框、随手用 Inter 当展示字体"等高频模式视为缺乏品牌信息的视觉平均值。它并不是绝对禁止这些元素：如果品牌规范本来如此，使用它们就是一致性；如果只是模型下意识补齐，则会稀释辨识度。
相应的正向策略包括 CSS Grid、精细中文排版、text-wrap: pretty、基于规范的颜色变量，以及真实图片或诚实的占位符。这里最值得借鉴的工程原则是：没有可靠素材或数据时，明确标注待补，比伪造一个看似完整的实现更安全。
HTML 为什么能承担原型、幻灯片和动画？
Huashu Design 所说的"HTML 原生"不是把所有东西做成网站，而是借用浏览器作为统一渲染引擎。CSS 负责排版、字体、颜色和设备外框，JavaScript/React 负责交互与状态，浏览器负责得到稳定画面，Playwright 则负责自动打开页面、点击、截图和逐帧渲染。
交互原型
原型可以用状态驱动多个屏幕，并套用 iPhone、Android、macOS 或浏览器外框。因为产物本身是 HTML，点击、切换、滚动等行为能真实运行，而不只是静态图片。Playwright 可对关键路径做自动点击检查，减少"看起来像按钮但不能用"的交付问题。
幻灯片与 PPTX
HTML Deck 在浏览器中以固定舞台呈现，适合精确控制 16:9 构图与动画。导出 PPTX 时，html2pptx.js 读取 DOM 及 computed styles，再把元素转换为 PowerPoint 对象；文字尽可能保留为文本框，而不是把整页压成位图。项目使用 PptxGenJS 和 pdf-lib 支撑相关导出，Sharp 用于图像处理，Playwright 用于浏览器自动化；这些依赖可从仓库的 package.json 直接核验。
需要注意，"可编辑"不等于无损往返。HTML/CSS 与 PowerPoint 的布局模型不同，复杂滤镜、混合模式、动画和部分字体效果无法天然一一映射。导出后应在 PowerPoint 中复查字体替换、换行、对象位置和动画，而不能把转换当作绝对保真的编译过程。
动画与视频
项目提供 Stage + Sprite 的时间片段抽象，并以 useTime、useSprite、interpolate 和 Easing 等 API 描述时序。设计完成后，渲染脚本通过 Chromium 逐帧取图，再交由 FFmpeg 生成 MP4；附加脚本可完成 60fps 插帧、GIF 调色板优化及 BGM 合成。新版本规范还把分镜、镜头语言和动画陷阱拆成单独参考文档，使"先定节奏和镜头，再写动画代码"成为流程的一部分。
这种方案的优势是设计与成片共享同一个实现，修改文字、颜色或时序后可以重新渲染；不足则是它仍受浏览器渲染和代码动画能力限制。复杂粒子、真实物理模拟、重型 3D 合成和专业后期，仍更适合专用工具。
质量控制不是最后看一眼
Huashu Design 的评审模型包含哲学一致性、视觉层级、细节执行、功能性和创新性五个维度，并输出 Keep、Fix、Quick Wins。更关键的是，质量控制被分散在过程里：前期写 assumptions、reasoning 和 placeholders；中期展示方向与变体；末期用真实浏览器复查，并用自动脚本检查溢出、资源和交互。
这体现了一个很工程化的判断：设计质量不能只依赖最后一次主观打分。事实、资产、方向、实现和导出各自设门，比成片后再找问题更便宜。五维评分可以辅助讨论，但不应被误解为客观审美测量；它的价值主要在于让反馈结构化、可行动。
安装与运行
最简安装命令是：
bash
npx skills add alchaincyf/huashu-design安装后应检查 references/、assets/、scripts/ 和 demos/ 是否一并存在；只有 SKILL.md 会导致大量引用失效。仓库 README 建议在旧版 CLI 同步不完整时升级 skills，或者把完整仓库克隆到 Agent 的 Skills 目录。随后可直接提出诸如"为某主题做三套 PPT 方向""制作四屏可点击 iOS 原型"或"把这段流程做成动画并导出 MP4"的请求。
本地工具链通常还需要 Node.js、浏览器运行环境，以及按输出类型安装 FFmpeg、Python 依赖或 PowerPoint 查看工具。安装 Skill 只代表 Agent 获得了流程与脚本，并不保证机器已经具备所有媒体编解码器和字体。用于团队或 CI 时，最好锁定依赖版本、字体和 Chromium 版本，并用一份基准项目验证导出结果。
安全与数据边界
项目安全声明称，HTML 设计到 MP4/PDF/PPTX 的核心链路可完全在本地运行，不需要 API Key，也没有遥测；云端 TTS 和 AI 视频评审被隔离在 scripts/cloud/，需要显式同意才会调用。声明还列出了 Wikimedia、品牌官网、字体/CDN 及字节跳动相关接口等可能的网络目的地，并说明临时文件删除范围与子进程类型。安全与数据流声明
但"核心链路本地"不等于每次任务都离线。搜索品牌资产、下载公共图片、加载 CDN 字体，或启用云端 TTS/评审都会发生外部通信。处理未发布产品或客户机密时，应审阅生成 HTML 的外链、关闭可选云功能、使用本地字体和素材，并在隔离环境中运行浏览器及媒体脚本。安全声明是良好的审计入口，不是替代代码审查的保证。
适用边界与技术判断
Huashu Design 最适合一次性交付或阶段性视觉产出：概念验证、路演 Deck、营销动画、信息图、交互原型和设计评审。它不适合直接代替生产级 Web 应用工程，因为后端、权限、数据库、可观测性、长期组件治理、SEO 和无障碍合规并非其主轴。项目自身也明确把生产 Web App、需要后端的系统排除在 Skill 的适用范围之外。
它真正有价值的地方，不是声称 HTML 可以取代所有设计软件，而是把容易被忽略的设计决策变成 Agent 必须执行的检查点：不要猜事实，不要伪造品牌，不要在没选方向前精修，不要用视觉平均值掩盖内容问题，并且让输出经过真实运行环境验证。
从技术架构看，Huashu Design 是"规范层 + 资产层 + 浏览器运行时 + 导出工具链"的组合；从协作方式看，它是人负责方向判断、Agent 负责研究与批量实现的闭环。对偏爱终端、希望把设计过程自动化的个人或团队，这套方法很有吸引力；对需要自由拖拽、复杂合成或长期维护产品系统的人，它更适合作为前期探索和自动化交付助手，而不是唯一工具。
在iThinkAir里如何使用
iThinkAir是一个"所想即所得 所得皆所愿"的面向思考者的AI Agent工具平台。Huashu Design已经包含在iThinkAir里，搜索huashu-design，选中'使用技能'。这样在做任务时，会根据任务的需求描述自动使用这个技能。