小程序UI设计·一次出三稿

概述

方法和对比页思路来自 oil-oil 的开源项目 oil-ui（MIT）。核心：先认品类再设计——从产品事实看清这类产品该长什么样，出几个真正不同的方向让人亲眼比较，选定后才深化，最后看真实画面验收。

需要：Node 22+ 或 Python 3.8+（WorkBuddy 都自带）任一个即可生成对比页；截图、提案长图、体检需要 Node 22+ 和本机 Chrome 或 Edge。全程不联网、不下载浏览器、不装字体。

下文 <技能> 指本技能目录（本文件所在目录）。命令里的路径一律加英文双引号，中文和空格都没问题。

最常见的请求：“做三稿让我选”——最短路径

1. 建任务目录，写 设计说明.md 的产品事实（用户没给就自己假设并写明）。
2. 读 references/品类卡.md 找到对应品类，再读 references/方向.md，写三张方向卡（必填 6 栏：名称、北极星、首屏骨架、字体、色彩、主视觉）。
3. 在 第01轮/ 写三个首屏 HTML + manifest.json（小程序加 "platform": "wechat"）。
4. 跑两条命令：build-explorer.mjs（对比页）和 shoot.mjs（截图 + 提案长图 + 体检）。
5. 读 shots/report.txt 末尾“汇总”：还要改的改完重跑；然后按第 4 步的格式交给用户，这一轮结束。

下面是完整说明。

先判断是哪种活

用户已定的品牌、参考、页面结构优先。缺的信息只有会改变核心方向、又推断不出来时才问一次；其余自己假设并写明。回复和界面文案用用户的语言。

第 1 步：产品事实 + 任务目录

1. 定任务目录：用户指定了文件夹（例如“客户 项目”）就在里面建 <任务名>/；没指定就在当前工作目录建 UI设计/<任务名>/。新任务遇到同名目录已存在时，不覆盖旧文件：名字后加日期（茶店小程序首页-1028）另建；用户说的是“继续/选稿/改”时才进已有目录。目录结构见 references/对比页.md 第 1 节。
2. 在任务目录写 设计说明.md，先写产品事实（用户、场合、品牌、首屏要完成的一件事、真实内容、主视口、限制）。写法见 references/方向.md 第 1 节。小程序/手机默认主视口 390×844，网站/后台 1440×900。

第 2 步：认品类 → 删减 → 三张方向卡

1. 先读 references/品类卡.md：基线（照搬）、套路（至少一稿不用）、品类默认色（至少一稿跳出）、起步引擎。能上网就再看真实画面核对；不能就写“参考品类卡，未看图”。
2. 读 references/方向.md，按顺序做：删除清单 + 唯一主角 + 唯一主动作 → 调性 → 三张方向卡 → 差异检验（三个都要适配可落地，不许陪跑；骨架、字体、色彩、主视觉四项任意两稿至多一项相同；至少一稿打破品类套路）。
3. 方向卡写进 设计说明.md（下一步深化要用）。字体只用系统字体（references/视觉语言.md 有字体栈表）。

第 3 步：做三个首屏

在 <任务目录>/第01轮/ 写三个独立 HTML：01-方向名.html、02-方向名.html、03-方向名.html。

• 只做首屏、一个视口、只有主状态；不写交互、不做动效。
• 三稿共用同一份产品事实和示例数据，结构和样式各写各的——不许用一个模板换几组颜色。
• 示例数据要像真的；画面上不写“示例/示意”；不伪造评价和销量背书。
• 图标和主视觉用内联 SVG 或排版；没有实拍就用取色色块占位并记下“待换实拍”。不引用任何网络资源。细则见 references/视觉语言.md。
• 小程序首页通常用自定义导航：页面顶部先留 47px 状态栏，标题栏内容放在 47–91px 之间，右上角约 100×40 的胶囊区只放背景，底部固定栏留出 34px。细则见 references/品类卡.md 末尾。
• 写 manifest.json：方向卡的名字、北极星、字体、色板、特征填进去；小程序加 "platform": "wechat"（抖音 douyin、支付宝 alipay）；写上你推荐哪稿 "recommend": "02" 和一句 "recommendReason"。格式见 references/对比页.md 第 2 节。

第 4 步：生成对比页 + 截图体检 + 交给用户

node "<技能>/scripts/build-explorer.mjs" "<任务目录>/第01轮"
node "<技能>/scripts/shoot.mjs" "<任务目录>/第01轮"

没有 Node 时第一条换成 python "<技能>/scripts/build_explorer.py" "<任务目录>/第01轮"，截图跳过并写明“未截图自查”。

shoot.mjs 一次产出（都在 第01轮/shots/）：每稿首屏 PNG（小程序会画上状态栏和胶囊）、sheet.png 并排总览、sheet-squint.png 眯眼版、提案长图.png（可直接发微信给客户）、report.txt 文字体检。

自查（读 report.txt 末尾“汇总”）：

• “还要改”的逐项改掉后重新跑两条命令；误报（例如有意叠字）可以不改，在交付说明里写一句。
• 相似度“结论”说哪两稿雷同，就回第 2 步给其中一稿换首屏骨架。
• 能看图：再看 sheet.png 和 sheet-squint.png。看不了图（例如 DeepSeek）：按 references/评审.md 第 4 节，交付时写“未验证实际视觉”。

交给用户（格式见 references/对比页.md 第 5 节）：对比页路径、提案长图路径、三个方向各一行、推荐哪稿和理由、怎么选（对比页点“选这一稿”，或直接回复数字“选 2”）、自查结论。这一轮到此结束，等用户选。

第 5 步：选定一稿 → 深化成完整页面

1. 核对用户选的是哪一轮哪一稿（references/对比页.md 第 6 节），把选择和意见写进 设计说明.md。设计说明.md 里没有方向卡时，从 manifest.json 和那稿 HTML 源码反推一张补进去。
2. 在任务目录建 深化-<编号>-<方向名>/index.html，从选中那稿出发：保留它的字体、色彩、控件语法和记忆点，并入用户意见；补齐首屏以下的区块和关键状态（例如点单：分类切换、加购后购物车条、售罄、空购物车）。颜色、字体、字号、间距、圆角写成 :root 里的 CSS 变量。
3. 读 references/动效与素材.md，做三处基本动效。
4. 截图评审（--click 后面写你自己页面里按钮的 CSS 选择器，点第一个匹配的元素；--query 先加到地址上再点击）：

   node "<技能>/scripts/shoot.mjs" "<深化目录>/index.html" --size phone --platform wechat
   node "<技能>/scripts/shoot.mjs" "<深化目录>/index.html" --size phone --platform wechat --click ".add" --out "<深化目录>/shots/加购后"
   node "<技能>/scripts/shoot.mjs" "<深化目录>/index.html" --size phone --full --out "<深化目录>/shots/整页"

按 references/评审.md 评一轮（能派独立子 Agent 就派），按清单改完再截一次，最多两轮。整页长图里底部浮动条的位置不准，看浮动条用首屏截图。

1. 导出给开发：

   node "<技能>/scripts/export-tokens.mjs" "<深化目录>/index.html"

在 <深化目录>/开发交接/ 生成 设计规范.md（色板含对比度、字体栈、尺寸）、tokens.css、tokens.wxss（小程序，px 已换 rpx）、tokens.json。

1. 用户想比版式：保持选定方向的字体、色彩、控件，只在骨架和主视觉摆法上拉开，做成首屏放进 第02轮/ 再出一次对比页和提案长图。

交付说明（每次交付都写）

• 选定的方向和理由；
• 做了什么、没做什么、为什么（例如“只做了 HTML 原型，未转成微信小程序 WXML”）；
• 做了哪些动效；
• 评审方式和结果：独立评审 / 自检 / 未验证实际视觉；打分的附分数；
• 哪些是占位（待换实拍、模拟数据）；
• 文件路径：对比页、提案长图、截图、设计说明、开发交接。

能力边界与降级

只用任务已授权的服务，不自己接入付费服务。对比页和截图都留在任务目录，不写进技能目录。