跳转到使用指南
huashu-design作者 alchaincyf

Huashu Design Skill.

适用于 Claude Code 和 Codex 的 UI 设计 skill:高保真 HTML 原型、幻灯片、动画和可视化;从三个草稿开始。

  • Web & UI
  • HTML
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由:一张表定入口 ## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程) ## 核心哲学(优先级从高到低) ## 设计方向顾问(Fallback 模式)
前置信息和章节标题读取自上游文件,日期为 2026-09-14 · 完整内容共 33,602 字符

01 功能说明

huashu-design Skill 在 Claude Code 与 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

Huashu-Design 将 Agent 转变为基于 HTML 的设计工作室,用于制作高保真原型、幻灯片、动效演示和可视化内容。在开始任何新的视觉工作之前,它会强制生成三份差异化的方向草案(即便已指定风格或品牌),让用户从真实渲染出的选项中挑选,而不是由 AI 单独决定一个答案。

它运行一套品牌资产协议(логотипы、产品照片、真实色值——此处应为中文,见下),而非凭空猜测,会在设计前通过 WebSearch 核实关于产品的事实性说法,并针对色彩、图标、卡片和图像明确应用反 AI 俗套规则。它并不适用于生产环境的 Web 应用或后端驱动系统。

它产出什么

  • 具有描述性命名的 HTML 设计文件,在大幅修订时进行版本管理
  • 多页 HTML 幻灯片集,含总览墙面,自动导出为 PDF,并可选导出为可编辑的 PPTX
  • 默认带有 BGM 和 SFX 的 MP4 动画导出
  • 如 brand-spec.md 和 direction-approved.md 等关卡文件,用于记录资产与用户所选方向
查看示例提示词 ↗

工作方式

  1. 01
    先核实事实

    在设计任何与真实产品、技术或事件相关的内容之前,Agent 必须通过 WebSearch 核实其存在性、发布状态、版本与规格,而不是依赖训练记忆。

  2. 02
    任务路由

    一个信号表会在工作开始前,将任务线索(品牌名称、幻灯片/PPT、动画/导出、应用/iOS 原型、评审)映射到正确的入口点和参考文件。

  3. 03
    运行三方向兜底流程

    任何产生新视觉内容的任务都会经过第 1-6 阶段:澄清需求、复述 brief、锁定设计规范、获取真实图像、并行生成三种设计逻辑,然后等待用户选择。

  4. 04
    回答五个形式问题

    对于每个页面或镜头,Agent 必须先回答叙事角色、观看距离、视觉温度、内容容量与视觉主题,然后才能构建设计系统。

  5. 05
    带校验的导出

    动画默认渲染为带 BGM 和 SFX 的 MP4,并通过 ffprobe 检查音频流;幻灯片集自动导出为 PDF,并可选导出为可编辑的 PPTX。

02 找到适合场景

何时使用 huashu-design Skill

在 Claude Code 或 Codex 中处理此类 UI 设计工作时使用 huashu-design skill。适用范围和限制取自该 skill 自身的文件。

适合场景

  • 用户可以点击体验交互流程的高保真产品原型
  • 1920x1080 的 HTML 幻灯片,效果类似 PPT
  • 基于时间轴的动态设计,用作视频素材或概念演示
  • 印刷级信息图与数据可视化
  • 并排比较多个设计方向,或使用 Tweaks 进行微调

了解边界

  • 需要后端的生产级 Web 应用或系统不在范围内
  • SEO 网站和依赖动态后端的系统不会经过此 skill

需要提供的信息

  • 品牌资产清单在查找官方渠道之前,一次性索要 logo、产品图片、界面截图、色彩方案、字体以及禁用区域。
  • 风格或品牌参考一个喜欢的网站链接、截图,或是想要匹配感觉的产品;如果没有,Agent 会明确给出假设后继续。
  • 已有设计系统或代码库在从零开始做高保真设计之前,Agent 会先检查是否已存在设计系统、UI 套件、代码库或 Figma 文件。

03 Skill 内部

huashu-design Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 三方向门槛 100% 强制

    任何生成新视觉内容的任务,在执行前都必须展示三个有明显差异的方向草案,即便用户已指定风格或品牌;仅有三种狭义的例外情况。

  2. Logo 是必需资产

    如果设计中出现可识别的产品或品牌名称,获取其官方 logo 是强制要求,而非可选项;出现多少个产品就需要获取多少个 logo。

  3. 占位优于粗劣执行

    缺失的图标用灰色方块加文字标签代替,而不是画一个粗劣的 SVG;缺失的数据要如实说明,绝不能编造数字。

  4. 没有填充内容

    每个元素都必须有存在的理由;空白应通过版式构图来解决,而不是靠编造数据、给每个标题都加图标或到处使用渐变。

  5. 避免典型的 AI 俗套模式

    紫色渐变、表情符号图标、带彩色左边框的圆角卡片,以及 AI 画的 SVG 人物/面孔,都被标记为应避免的默认 AI 视觉套路,除非品牌本身就在使用它们。

  6. React 作用域限制

    不要将样式对象命名为 const styles = {...},因为多个组件会发生冲突;组件必须通过 Object.assign(window, {...}) 跨 script 标签导出。

  7. 动画导出默认带音频

    动画 HTML 默认以带 BGM 和 SFX 的 MP4 形式交付;除非用户明确要求不带音频,否则静音版本会被视为未完成的交付物。

  8. 幻灯片默认采用多文件 + 总览页(Overview Wall)

    幻灯片默认使用多个 HTML 文件加上 assets/deck_index.html 作为总览;单文件架构仅适用于明确不需要总览的、≤5 页的简单提案。

04 投入使用

在 Claude Code 或 Codex 中安装 huashu-design

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 huashu-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

用于 SKILL.md 的通用 skills CLI 形式;仓库可能会记录自己的路径。

给 Skill 一个首次 UI 设计任务

使用你自己的内容和约束调整此提示,然后在 Claude Code 或 Codex 中运行它。

Example prompt
做个咖啡主题的 PPT

来源:SKILL.md 示例(原文照录)。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 在交付前用 Playwright 截图并检查控制台错误
  • 交付前亲自在浏览器中查看结果,因为 AI 生成的代码常有交互 bug
  • 在应用原型上运行三个 Playwright 点击测试(详情视图、关键热点、切换标签),要求零 pageerror
  • 检查可读性底线:正文字号至少 14px,标签字号至少 12px,对比度至少 4.5:1

在 OpenDesign 中通过其 SKILL.md 链接导入 huashu-design:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/alchaincyf/huashu-design 分支 master
Skill 文件
SKILL.md 验证时已记录内容校验和;提交 a790f70
License
MIT 来自 LICENSE。
仓库星标数
24,121 GitHub 快照拍摄于 2026-09-14,针对整个 alchaincyf/huashu-design 仓库。不是 huashu-design 的评分或使用量。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 你是谁将 Agent 定位为一个扮演六种角色的工作室:艺术总监、品牌研究员、视觉/动效设计师、工程师、文案。
  2. 使用前提说明该 skill 覆盖哪些输出类型,以及生产环境的 Web 应用不在其列。
  3. 任务路由:一张表定入口用表格将任务信号匹配到正确的入口及参考文件。
  4. 核心原则 #0 · 事实验证先于假设要求在任何设计工作开始前,先通过 WebSearch 验证产品事实。
  5. 核心哲学(优先级从高到低)六条有序原则:利用现有上下文、先对齐再构建、提供多种变体、优先使用占位符、避免填充内容、避免 AI 感的套路化产出。
  6. 设计方向顾问(Fallback 模式)定义了强制性的七阶段流程,在执行前产出三个并行的设计方向。
  7. App / iOS 原型专属守则(速查版)针对移动应用原型的专项覆盖规则,涵盖架构、图片、设备边框、点击测试。
  8. 工作流程带检查点、gate-file 协议和提问模板的编号标准工作流。
  9. 异常处理针对模糊需求、被拒绝的问题、冲突上下文、紧迫截止日期的预定义 fallback 动作。
  10. 技术红线(必读 references/react-setup.md)不可妥协的 React/Babel 与 Stage/Sprite 实现约束。
  11. Starter Components(assets/ 下)列出预制组件(deck_index.html、animations.jsx、ios_frame.jsx 等)以及各自的使用场景。
  12. 产出要求命名规范、版本管理、文件位置以及最终浏览器/Playwright 检查要求。
Skill 自身的描述
"花叔 Design——用 HTML 做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计 100% 先出三个方向初稿给用户选(指定风格 / 品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个 HTML 页面、UI mockup、导出 MP4/GIF、做个好看的。生产级 Web App / 需后端的系统不适用。"

来自 SKILL.md 的 front-matter 描述。完整文件约 33,602 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 huashu-design Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

这个 skill 只能在 Claude Code 中使用吗?

不是,该 skill 被定义为与具体 Agent 无关,可在 Claude Code、Codex、Cursor、Trae、OpenClaw、Hermes Agent 或任何基于 markdown 的 skill agent 中运行,并为不支持子代理生成的较弱运行时提供了明确记录的降级模式。

Huashu Design

在真实 UI 设计任务上运行 huashu-design。

下载 OpenDesign,从其 SKILL.md 链接导入 huashu-design,粘贴上面的提示,在结果前先阅读计划。

终端
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows