用HTML做高保真原型、演示幻灯片、动画和可视化作品，支持导出MP4/GIF。小红书封面、B站视频封面、YouTube缩略图、公众号配图均可快速生成。提供三方向初稿对比、真实素材优先、反AI slop等专业设计流程。

花叔Design：HTML高保真原型·PPT·动画·可视化一站式设计工具

【适用场景】

- 自媒体封面设计：小红书笔记封面、B站视频封面、抖音视频缩略图、公众号文章配图、YouTube视频缩略图——用HTML快速生成可编辑的高质量视觉作品 - 演示幻灯片：用HTML做1920×1080的演示deck，可导出PDF/PDFX，适合产品发布会、工作汇报、商业计划演示 - 动画视频制作：用HTML做动画导出MP4/GIF，适合产品功能演示、品牌宣传片、知识区视频素材 - 高保真交互原型：可点击的App/网页产品原型，用户可以感受完整产品流程 - 信息图与数据可视化：精确排版的数据图表、信息图，适合内容营销素材

不适用：需要后端的动态系统、生产级Web App、纯SEO网站

【操作步骤】

第一步：明确任务类型（路由判断）

收到任务后，先对照路由表判断走哪条线。涉及具体品牌要先做事实验证；任何新视觉设计必须先出三个方向初稿。

第二步：设计方向三选一（硬门）

任何新视觉设计，必须先出三方向真实初稿： - 逻辑一（随机）：从20种风格库随机抽取 - 逻辑二（标杆）：找Awwwards/Apple Design Award级参照迁移到你的内容 - 逻辑三（定制）：顶级设计师思维定制

三版同时展示，用户选定方向后再深化执行。

第三步：核心资产采集（如涉及具体品牌）

1. 询问logo、产品图、UI截图、色板、字体 2. 从官网/press kit/官方社媒下载 3. 验证并提取品牌元素 4. 固化为brand-spec.md

第四步：构建设计系统（Form推导五问）

每个页面开工前必答：叙事角色、观众距离、视觉温度、容量估算、视觉母题。

第五步：构建并交付

1. 构建HTML，尽早展示给用户确认 2. 做variations对比 3. 验证Playwright截图 4. 动画导出MP4/GIF，PPT导出PDF

【代码模板】

HTML封面原型

```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>封面设计</title> <style> body { width: 1080px; height: 1080px; background: linear-gradient(135deg, #1a1a2e, #16213e); font-family: -apple-system, 'PingFang SC', sans-serif; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; } .title { font-size: 72px; font-weight: 700; text-align: center; max-width: 900px; line-height: 1.2; } .cta { margin-top: 64px; padding: 20px 48px; background: #e94560; color: #fff; font-size: 24px; border-radius: 8px; } </style> </head> <body> <div class="title">小红书爆款笔记创作公式</div> <div class="cta">立即生成</div> </body> </html> ```

【复盘要点】

1. 反AI slop是关键门槛：紫渐变、emoji图标是视觉噪音，必须用真实品牌资产替换 2. 三方向门绝对不能跳过：风格词收窄解释空间，不转移选择权 3. 素材比规范更重要：logo、产品图比色值重要，不要用CSS色块糊弄 4. 可读性有硬底线：正文≥14px，对比度≥4.5:1 5. 动画必须带音频：默认交付带BGM+SFX的MP4

【技能信息】

来源：GitHub https://github.com/mxyhi/ok-skills 分支：main 原始文件：huashu-design/SKILL.md