前言¶

用大模型写 HTML 页面，常见的失败有两种：一种是把幻灯片写成网页、把动画 Demo 写成 Dashboard，产出看着像「能看的页面」，不像交付物；另一种是需求其实很模糊，模型不问风格就直接动手，最后拿出一套通用科技蓝。这两个问题都出在「角色错位」上——模型把自己当成程序员在写页面，而不是当成设计师在交付作品。

下面介绍的 Skill 解决的就是这件事。它把 HTML 当工具而不是媒介，按任务性质切换角色：做原型时是原型师，做动画时是动画师，做幻灯片时是幻灯片设计师。

说明：这个 Skill 在一些入口里显示为「画术设计 HTML原型 高保真 幻灯片」，官方名称为「花叔Design」，坐标 @swang066/huashu-design，以下按官方名称介绍。

这是什么¶

花叔Design（Huashu-Design）是一个基于 SKILL.md 的设计类 Skill，用于「用 HTML 做视觉产出」的场景。定位一句话：产出高保真交互原型、演示幻灯片、时间轴动画与设计变体探索，并提供设计方向顾问与交付后专家评审。

• 出品/维护方：swang066，发布在 ClawHub
• 版本：1.0.0
• 来源：clawhub，分类 design-media
• 需要 API Key：否（requires_api_key=false）
• 上游仓库：https://clawhub.ai/swang066/huashu-design
• 官方地址：https://api.skillhub.cn/org-k6bcf2fv/huashu-design

官方介绍写的是：使用 HTML 实现高保真原型、交互演示、幻灯片、动画与设计变体探索，提供设计方向顾问和专家评审。触发词为「原型」「设计」等。

核心能力¶

这个 Skill 的能力分成五块，下面按实际写清每块做什么。

1. 按产出形态切换角色¶

官方 SKILL.md 明确要求：做幻灯片时不要像网页，做动画时不要像 Dashboard，做 App 原型时不要像说明书。模型需要依据任务 embody 对应领域的专家角色，而不是统一生成「HTML 页面」。

官方列出的适用产出形态包括：交互原型（可点击、可切换、能感受到流程的高保真 mockup）、设计变体探索（并排对比多个方向，或用 Tweaks 实时调参）、1920×1080 的 HTML deck、时间轴驱动的 motion design 动画 Demo、信息图与可视化。

2. 事实验证先于假设¶

这是优先级最高的一条原则，官方原文说明它「凌驾所有其他流程」。规则是：凡是涉及具体产品/技术/事件/人物的存在性、发布状态、版本号、规格参数，第一步必须 WebSearch 验证，禁止凭训练语料下断言。

官方给出的做法：

1、WebSearch 产品名 + 最新时间词（如 “2026 latest”、”launch date”、”release”、”specs”）。
2、读 1-3 条权威结果，确认存在性、发布状态、最新版本号、关键规格。
3、把事实写进项目的 product-facts.md，不靠记忆。
4、搜不到或结果模糊 → 问用户，而不是自行假设。

官方列了禁止句式，例如「我记得 X 还没发布」「X 目前是 vN 版本」「X 这个产品可能不存在」「据我所知 X 的规格是…」；对应可用句式是「我 WebSearch 一下 X 最新状态」「搜到的权威来源说 X 是 …」。

3. 核心资产协议（涉及具体品牌时强制执行）¶

官方把这条称为 v1 最核心的约束，也是稳定性的生命线。核心理念是「资产 > 规范」：品牌的本质是「它被认出来」，按识别度排序，logo 最高，其次是产品图/渲染图与 UI 截图，色值与字体只是辅助。

官方给的执行规则很明确：

• logo 有就必须用；没有就停下问用户，不要用 CSS/SVG 手画代替
• 实体产品必须有产品图，数字产品必须有 UI 截图
• 只抽色值和字体、不找 logo 与产品图，属于违反协议
• 找不到资产时，宁可停下要素材，也不要用 generic 素材填充

配套的素材质量门槛是「5-10-2-8」原则：多渠道交叉搜 5 轮、至少凑 10 个候选、从中精选 2 个作为最终素材、每个素材评分需达 8/10 以上。8/10 的评分维度包括分辨率（≥2000px，印刷或大屏场景 ≥3000px）、版权清晰度、与品牌气质契合度、光线/构图/风格一致性、独立叙事能力。

logo 是例外：不适用 5-10-2-8，因为 logo 是识别度根基，即使只有 6 分也比没有强。

4. 带解说的长动画与视频导出¶

官方主干能力里包含 HTML 动画转视频导出：25fps 基础帧率、60fps 插帧、palette 优化 GIF、6 首场景化 BGM、自动 fade。

另有一套「带解说的长动画 pipeline」：用豆包 TTS 生成人声，实测时长后生成 timeline.json，用 NarrationStage 驱动画面，做 ducking 混音，最终交付两种形态——HTML 实播与发布 MP4。官方为此立了一条铁律：整片是一个连续的运动叙事，禁止用 PowerPoint 式切换。

5. 需求模糊时的设计方向顾问与交付后评审¶

当用户需求表达模糊（例如「做个好看的页面」「帮我设计」「不知道要什么风格」），官方要求不要凭通用直觉硬做，而是进入设计方向顾问模式：从 5 流派 × 20 种设计哲学（官方举例 Pentagram 信息建筑、Field.io 运动诗学、Kenya Hara 东方极简、Sagmeister 实验先锋等）推荐 3 个差异化方向，展示 24 个预制 showcase（8 场景 × 3 风格），并行生成 3 个视觉 Demo 让用户选。

交付之后可选做专家级评审，按 5 个维度各打 10 分并给出修复清单：哲学一致性、视觉层级、细节执行、功能性、创新性。

安装与启用¶

安装走 ClawHub CLI，官方页面给出的命令是：

openclaw skills install @swang066/huashu-design

官方页面同时列出 npx skills Prompt 作为另一条入口。安装后在对话里用触发词唤起即可，官方给出的触发词包括：原型、设计 Demo、交互原型、HTML 演示、动画 Demo、设计变体、hi-fi 设计、UI mockup、prototype、设计探索、做个 HTML 页面、app 原型、iOS 原型、导出 MP4、导出 GIF、设计风格、配色方案、做个好看的、评审等。

需要 API Key：否。也就是说不涉及外部付费模型密钥的配置项。

典型用法¶

下面是从官方 SKILL.md 提炼的可复现流程，适用于「需求不明确 + 涉及具体品牌」的典型场景。

第一步，开工前先验证事实，把产品状态写进 product-facts.md。官方示例的踩坑场景是：用户要求给大疆 Pocket 4 做发布动画，模型凭记忆判断「Pocket 4 还没发布」做了概念剪影，实际该产品已于四天前发布，导致返工 1-2 小时。

第二步，按资产清单一次问全，官方给的问法模板是：

关于 <brand/product>，你手上有以下哪些资料？我按优先级列：
1. Logo（SVG / 高清 PNG）—— 任何品牌必备
2. 产品图 / 官方渲染图 —— 实体产品必备
3. UI 截图 / 界面素材 —— 数字产品必备
4. 色值清单（HEX / RGB / 品牌色盘）
5. 字体清单（Display / Body）
6. Brand guidelines PDF / Figma design system / 品牌官网链接

第三步，从官方渠道抓资产。官方给出的搜索路径按资产类型区分：logo 走官网 brand/press 页面与 header 内联 SVG，产品图走产品详情页 hero image、官方 press kit、官方 launch video 截帧，UI 截图走 App Store / Google Play 产品页截图。下载示例：

curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html
# 然后 grep <svg>...</svg> 提取 logo 节点

第四步，验证并提取。色值用 grep 提取并按出现频次排序：

grep -hoE '#[0-9A-Fa-f]{6}' assets/<brand>-brand/*.{svg,html,css} | sort | uniq -c | sort -rn | head -20

官方提醒两点：警惕示范品牌污染（产品截图里演示的其他品牌色不是该品牌的色），以及品牌多切面（同一品牌的官网营销色与产品 UI 色经常不同，两套都真实，需按交付场景选）。

第五步，把资产固化为 brand-spec.md 文件。

第六步，App 原型场景下交付前跑 Playwright 点击测试验证可交互性。

适用场景与注意¶

适合的场景：交互原型、设计变体探索、HTML deck 演示幻灯片、时间轴驱动的动画 Demo、信息图与可视化。

官方明确写出不适用的场景：生产级 Web App、SEO 网站、需要后端的动态系统——这些应使用 frontend-design skill。

使用时要注意的坑：

• 它不是给任何 HTML 任务用的万能勺。只是写个表单、写个落地页，用这个 Skill 会走偏。
• 需求模糊时不要跳过设计方向顾问模式。官方原话是「不要凭通用直觉硬做」。
• 涉及具体品牌时，协议的每一步都不能跳过。官方说明 Agent 是否走通这个协议，直接决定输出质量是 40 分还是 90 分。
• 搜索不到资产时，官方的处理顺序是：问用户 → 用诚实 placeholder（灰块+文字标签）→ AI 生成兜底（以官方参考图为基底），而不是用 CSS/SVG 手画代替产品图。

结尾¶

花叔Design 的价值不在「又一个 HTML 生成器」，而在把 HTML 当工具、把角色按产出形态切换，同时用事实验证前置和核心资产协议把 AI 生成最容易翻车的两类错误（凭记忆断言、用通用素材凑数）拦在开工之前。

官方地址：https://api.skillhub.cn/org-k6bcf2fv/huashu-design
上游仓库：https://clawhub.ai/swang066/huashu-design

注意：本文所有能力描述、命令、触发词与流程均来自上游仓库公开页面，未添加未经核实的案例与数据。