让 AI 做的设计，不再千篇一律

看懂观鸟案例，也看懂它适合做什么

对 AI 做的设计不满意，却说不清该怎么改？下面用 huashu-design 制作观鸟记录原型，练习先比较方向、再完善界面。

3.0 会参考真实作品和 84 种风格样张，先探索六个候选，再挑出三套设计初稿。

上方是作者的“鸣迹”观鸟 App 展示图，可以观察两点：

• 素材处理：真实鸟类照片变成贴纸，与记录本的视觉风格结合。
• 信息组织：鸟种详情、附近地点和季节信息围绕观鸟任务安排。

与同类技能的区别

• Emil 界面技能合集：也能探索多种原型，侧重界面动效、交互细节和代码评审。huashu-design 则把网页、PPT、App 原型等视觉设计放在同一套流程中，重点是先选方向、再完成设计。
• huashu-motion：同样先比较方向，但主要做宣传片，支持在视频预览中点选画面提出修改；要做网页、PPT 或 App 原型的视觉设计，可以选 huashu-design。

安装技能，确认配套文件齐全

1. 准备 Claude Code、Codex 或 Cursor 等支持技能的 AI 编程工具，以及 Node.js 22.20 或更新版本。这个版本要求来自 skills 安装器，不是原型文件的运行要求。
2. 在准备存放设计文件的项目目录中打开终端，执行：

npx skills@latest add alchaincyf/huashu-design

3. 按安装提示选择当前使用的 AI 编程工具。查看安装器显示的目标目录，确认除了 SKILL.md，还有 references/、assets/、scripts/ 和 demos/。旧安装器曾只复制单文件，缺目录时用上面的最新安装命令重新安装。
4. 在同一项目中打开 AI 编程工具，明确要求使用 huashu-design。技能会按任务读取原型、网页或幻灯片等模块，不需要手工运行每个脚本。

技能会把参考作品的截图整理成“参考板”，供 AI 查看设计。生成参考板及部分设计检查需要 Python 版 Playwright、Pillow 等依赖。

缺依赖时，相关脚本会提示安装或跳过。需要这些功能时，让 AI 按提示补齐依赖，再重跑相关步骤。“已跳过”不等于“检查通过”。

先比较三套设计，再确定方向

以下练习请求由本站编写，不是作者原案例的完整提示词；本文未重跑该案例。你可以先练习观鸟记录原型，再把主题换成自己的产品。

先准备产品用途、主要使用者、四个核心界面，以及可使用的图片或品牌素材。不必一开始就报出设计师名字；“户外使用、单手记录、重点看清鸟种和时间”比“高级、有质感”更能帮助确定设计。

在 AI 编程工具的对话中发送：

使用 huashu-design，设计一个观鸟记录 App 原型。
使用者是刚开始观鸟的人，主要任务是查看鸟种、记录见到的鸟、回看记录。
四个主要界面：记录本、鸟种详情、附近地点、季节日历。
素材优先用我提供的鸟类照片；不足时找有明确来源和许可的真实照片。
先探索六个候选，再挑三套有明显区别的 HTML 原型初稿，并附参考截图。
三套要在布局、素材呈现和信息层级上有差别，不要只换配色。
使用示例数据，标清它们；不接麦克风、识鸟接口或真实定位服务。
给我能打开的初稿和截图，展示后停下来，等我选择再完善。

比较时先看两个问题：能否一眼找到“记录一只鸟”的入口？进入详情后，照片、辨认特征和已有记录谁更突出？如果三版只是换了颜色，就让它重新拉开结构和素材处理的差别，而不是马上选一版继续。

三套初稿都应能打开查看。只列风格名称和形容词，还不足以让你作选择。

选定方向，完善可点击的原型

看过初稿后，说出要保留什么、要调整什么。例如：

选第二套。保留照片贴纸、清晰的鸟种标题和记录本结构。
记录本按时间显示观察记录，点一张鸟卡进入对应详情。
详情页可以添加一条示例记录，返回后能在记录本看到它。
附近地点和季节日历也要能切换；仍使用已标明的示例数据。
新增记录暂存在当前页面状态中，刷新即可重置，不需要数据库。
不要重做另外两套，也不要改掉已选定的视觉方向。
交付 HTML 原型、打开方式和相关素材来源，并检查主要点击流程。

技能会把设计偏好和近期项目的外观保存在本机的 ~/.huashu-design/ 中，帮助后续项目减少重复。记录偏好时会告知你，不想记录可以拒绝。

设计检查能找图片失效、文字过小、对比度不足等问题。视觉是否合适仍由你判断，点击流程则按下面步骤检查：

1. 按 AI 给出的方式打开原型。默认单文件通常可直接用浏览器打开；如果它拆成多个文件，就使用交付说明中的本地预览命令，不要只打开截图。
2. 点一张鸟卡进入详情。添加一条示例记录。返回记录本，确认显示的是同一鸟种和新增记录。
3. 分别打开附近地点和季节日历，检查返回和导航是否正常。刷新页面后，示例记录应按本次要求重置。
4. 在手机宽度下检查标题、按钮和图片，确认没有被设备外框遮住。把具体问题交回 AI 修改，再重走一次受影响的流程。

只改必要部分，换成自己的产品

想把黄色改成偏森林的配色，可以直接提出局部修改：

保持选定版本的界面结构、文案和点击流程。
只调整配色：从现有鸟类照片中提取绿色作强调色，背景保持易读。
同步检查按钮、选中状态、标签和文字对比度，不要顺手更换字体或重排界面。
改完给我新旧截图，说明改动范围。

如果换成植物养护产品，就需要重新组织内容：鸟种详情换成植物档案，观鸟记录换成浇水、施肥记录，季节日历换成养护提醒。不要只替换名词，却留下“听声识鸟”这样的旧入口。

可以用下面的需求模板开始自己的项目：

使用 huashu-design，为 [产品或主题] 设计 [网页 / PPT / App 原型 / 信息图]。
读者或使用者：[谁，在什么场景使用]。
要完成的任务：[最重要的两三件事]。
已有材料：[内容、品牌规范、真实图片、参考链接]。
必须保留：[品牌要求、功能、已有界面或数据结构]。
先给可比较的三套设计初稿，我选定后再完成。
交付：[文件形式与预览方式]。
原型数据与真实服务的范围：[哪些用示例，哪些确实需要接入]。

技能代码采用 MIT 许可。项目里使用的照片、录音和字体仍按各自来源的许可处理；作者案例可用来理解方法，换成自己的素材时也要保留来源记录。