花叔Design / 开源设计工作流
Huashu Design：
在Agent里，把想法做成设计。
你提供内容和参考，它引导Agent探索方向、制作HTML、检查效果，再按需要导出。适合产品原型、演讲幻灯片、信息图和演示动画。
作者：花叔 / Alchain · MIT开源 · 本页资料核对于
先挑一份你真要交付的东西。
让人看懂产品
做可点击的App或网页原型，讨论页面、按钮和用户流程。
把观点讲清楚
把内容组织成HTML幻灯片，或按导出要求制作可编辑PPTX。
把信息排明白
用真实素材与数据做信息图，检查层级、来源和可读性。
把过程演出来
做时间轴演示动画；需要视频文件时，再使用仓库中的渲染与导出流程。
第一次使用
从一套6页幻灯片开始。
1. 在你使用的Agent环境里安装
README列出了Claude Code、Cursor、Codex、OpenClaw和Hermes。先在安装了Node.js的终端运行下方命令，按安装器提示选择你的工具。
npx skills add alchaincyf/huashu-design确认安装目录除了SKILL.md，还包含references、assets、scripts和demos。
2. 把材料和目标一起交给它
准备产品介绍、Logo、真实截图与想保留的句子。说清楚谁来看、看完要明白什么，以及最终需要HTML、PDF还是PPTX。
用huashu-design，把我提供的产品介绍做成一套6页演示幻灯片。观众是第一次接触产品的人，目标是让他们看懂用途。先给我3个视觉方向的真实初稿，等我选定后再完成；最后检查文字溢出、图片来源和每页是否清楚。
3. 看初稿、选方向，再完成交付
公开SKILL.md要求先展示三个视觉方向。选定后继续完成内容、检查浏览器效果。需要导出时，让Agent按仓库对应指南检查依赖和文件，最后打开实际产物验收。
先看真实作品，再决定怎么用。
下面两张图来自本站公开演示中的「AI心理学」幻灯片。可以先比较信息组织与排版，再主动打开完整演示。
开始前，你可能还想知道。
它是一个可以直接打开使用的网站吗？
它是一套安装到Agent里的设计工作流。你在Claude Code、Cursor、Codex等支持Skill的工具中发出任务，由Agent读说明、处理素材并生成文件。它本身不提供网页编辑器或账号服务。
已经有Logo和喜欢的风格，还要准备什么？
把Logo原文件、真实产品截图、要呈现的内容、受众和输出尺寸放在任务目录里。公开SKILL.md要求先结合这些材料探索三个视觉方向，再由你选择；明确的参考会让讨论更具体。
生成的PPT还能改文字吗？
仓库提供HTML演示和可编辑PPTX的导出流程。开始时就说明需要哪种格式，Agent会按对应的结构与脚本制作；不要默认任意HTML都能无损变成可编辑PPTX。导出后仍要在演示软件中检查字体、排版与文本框。
装完只有SKILL.md，找不到素材或导出脚本怎么办？
完整仓库还包含references、assets、scripts和demos目录。先检查安装是否完整；仓库README提供了使用最新版skills安装器重装，以及git clone的备选方法。导出任务还可能需要安装相应脚本依赖。
能拿它开发正式上线的网站吗？
它适合探索视觉、做可点击原型和演示材料。公开SKILL.md把生产级Web App、SEO网站和需要后端的系统列为不适用场景。正式产品仍需按工程流程完成数据、安全、性能和部署工作。
开源免费，是否代表整个生成过程都免费？
Skill以MIT许可证发布，可用于个人或商业项目；使用、复制和分发时按许可证保留要求的声明。运行Agent、使用模型或可选的云服务，仍适用你自己的账号、订阅与服务规则，Skill不包含这些额度。
本页依据
资料核对日期：。功能与安装说明依据公开仓库；后续变化以仓库为准。