Agent Skill。给微信小程序做 UI 方案时，先判断产品任务，再给出三个骨架不同的方向、一套可观察的视觉 DNA，以及一段能直接丢进 ImageGen 的英文 Prompt。

默认一次生成一张横向总览图，把 3–5 个核心 Tab 页完整铺开。

它解决什么

通用模型很容易把「高级、简约、科技感」堆进 Prompt，画面几乎不变。ui-adviser 要求每个方向在这些地方真正不同：

• 布局骨架
• 信息密度
• 图片或插画角色
• 组件几何
• 第一视觉焦点

忽略配色之后，三个方向仍应能被区分。推荐方向还会编译成视觉 DNA，并包含一个由业务产生的识别组件，而不是换个行业仍完全成立的通用皮肤。

一次会交付什么

1. 产品判断：产品类型、核心用户、页面任务；推断会标明。
2. 三个 UI 方向：视觉策略、适配原因、主要风险。
3. 推荐方案：相对另外两个方向说明取舍。
4. 视觉 DNA：布局签名、主导组件、密度、几何、字体、色彩职责、图像规则、状态语言、产品专属识别组件。
5. Tab 结构：每个 Tab 的任务、第一焦点、核心 CTA 和关键模块。
6. 一段 ImageGen Prompt：只出现一个英文代码块，可整段用于一次出图。
7. 开发落地提醒：3–6 条当前方案最重要的实现约束。

没有明确说「出效果图」时，只给 Prompt，不调用生图。

怎么判断

产品与功能 → 场景与用户心理 → 页面任务 → 三个方向 → 推荐视觉 DNA → 单张 Prompt

场景知识在 references/scene-style-knowledge.md。Prompt 契约在 references/prompt-contract.md。

安装

把仓库放到对应 Agent 的 skills 目录。Codex 示例：

git clone https://github.com/Dvsx/ui-adviser.git `
  "$env:USERPROFILE\.codex\skills\ui-adviser"

Cursor / Claude Code 把同一仓库放到各自的 skills 目录即可。刷新会话后，用 $ui-adviser 调用。

使用

最低只要说清「小程序做什么」和「有哪些核心功能」。

$ui-adviser

我做了一个给小商家用的 AI 发票整理小程序，可以上传发票、自动识别、按月份归档、导出报表。

想先比较风格时说清楚，会切到风格探索模式：

$ui-adviser

先看风格，比较方向。
校园二手交易社区，功能有发布闲置、搜索、私聊和同校认证。

选定方向后再要全部 Tab 总览图时，沿用已确认的视觉 DNA，不会重新问诊。

指定唯一风格时会保留该方向，只修正和任务冲突的可用性，不强迫重选。

仓库结构

SKILL.md                         技能正文
agents/openai.yaml               Codex 调用入口
references/scene-style-knowledge.md
references/prompt-contract.md
references/evaluation-cases.md

边界

• 默认只设计稳定底部 Tab 对应的 3–5 个核心一级页面，不自动展开详情、编辑或流程中间态。
• 没有合理 TabBar 的单任务小程序保持单页，不为了凑页而加导航。
• 不直接写前端代码。
• 不把玻璃拟态、粒子、3D 或难复现光影当成默认「设计感」。
• 不把关键内容烘焙成背景图；页面仍应能用常规小程序组件实现。

许可

MIT License