文章正文
这套源码是花叔出品的 HTML 原生设计 Skill，定位是用 HTML 干活的设计师，而不是程序员。
它能做高保真原型、1920×1080 的幻灯片、时间轴动画，也能做信息图和数据可视化，审美把控是它最大的卖点。
风格库按温度分级，总共四十种（网页二十加 PPT 二十），需求模糊时先用”设计方向顾问”给你三版不同方向挑。
它最有辨识度的一点是内置了 5 维评审机制：哲学一致性、视觉层级、细节执行、功能性、创新性各打 0-10 分，并给出雷达图式反馈，帮你判断这版设计到底行不行。
幻灯片默认是多文件加概览墙的玩法，做完能直接导出 PDF，需要可编辑文件时还能调 html2pptx 转成原生可编辑 PPTX。
对大多数”既要画得好、又要交得出”的用户来说，这份源码比纯图片卡片方案要友好得多。
源码简介
这是 huashu-design（花叔 Design）的 AI Skill 源码，用 HTML 做高保真原型、幻灯片、动画与可视化。
内置 40 种风格库与 5 维评审机制（雷达图反馈），幻灯片支持导出 PDF 与可编辑 PPTX。
源码结构清晰、参考文档齐全，适合想研究”AI 辅助高质感设计”实现方式、或需要产出可交付设计稿的开发者下载参考。
适用场景
- 需要高保真、强审美的网页原型或幻灯片输出
- 希望有客观评审反馈（雷达图）来甄选设计方向
- 需要把 HTML deck 导出为 PDF 或可编辑 PPTX 交付
技术栈与运行环境
- 前端：HTML / CSS / JS，部分组件用 React + Babel（pinned 版本）
- 导出依赖：Node.js + Playwright、pdf-lib、sharp（scripts/ 下 .mjs 脚本）
- 配图脚本：Python（scripts/fetch_images.py 取真实图片）
- 运行环境：支持 markdown skill 的 agent（Claude Code / Codex / Cursor 等）
- 其他：package.json 管理脚本依赖，按 references 路由按需加载
功能亮点
- HTML 原生 40 种风格库：SKILL.md 与 references/design-styles.md 提供网页 20 + PPT 20 套风格，按温度分级。
- 可编辑 PPTX 导出：scripts/export_deck_pptx.mjs 调用 scripts/html2pptx.js，把 DOM 逐元素翻译成 PowerPoint 文本框/形状。
- 多文件概览墙 + PDF 导出：assets/deck_index.html 为默认拼接器，scripts/export_deck_pdf.mjs 用 Playwright 合成可搜 PDF。
- 5 维专家评审 + 雷达图反馈：references/critique-guide.md 定义哲学一致性/视觉层级/细节执行/功能性/创新性五维 0-10 评分。
- 动画导出 MP4/GIF 带音效：scripts/render-video.js、convert-formats.sh、add-music.sh 支持带 BGM+SFX 的视频产出。
- 实时 Tweaks 与真实配图：references/tweaks-system.md 调参颜色排版，scripts/fetch_images.py 取真实图片避免 placeholder。
安装与部署提示
- 在支持 skill 的 agent 环境按 SKILL.md 运行，先读对应 references 路由表。
- 导出 PDF / PPTX 前安装 Node 依赖：npm i playwright pdf-lib sharp，并按需 npx playwright install chromium。
- 取真实配图可用 scripts/fetch_images.py，需自行配置网络与合规 UA。
- 幻灯片默认走多文件 + 概览墙（deck_index.html），单文件仅用于 ≤5 页极简场景。
截图与演示说明
- 幻灯片默认产物 assets/deck_index.html 概览墙（网格 iframe / 画廊两种自适应视图）。
- 单文件 deck 用 assets/deck_stage.js，含键盘翻页与页码。
- references/design-styles.md 的 40 种风格库说明页。
- references/critique-guide.md 的 5 维评审结果与雷达图反馈页。
- scripts/export_deck_pptx.mjs / export_deck_pdf.mjs 。
常见问题
#### 生成需要哪些运行环境？
核心是支持 markdown skill 的 agent 环境；导出 PPTX / PDF 需要 Node.js 与 Playwright 等依赖，取图脚本用 Python。
#### 适合二次开发吗？
参考文档（references/）与 Starter 组件（assets/）齐全，html2pptx.js、deck_index.html 等都是可读源码，方便改造导出与渲染逻辑。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本项目为 AI Skill 加前端模板，运行依赖对应 agent 环境与 Node.js / Playwright 等工具。
GitHub项目开源地址：https://github.com/alchaincyf/huashu-design
