Claude Code UI 设计指南：安装 Oil UI Skill、提示词模板与多屏走查
Claude Code 擅长读懂代码库结构、拆解多步任务并调用子 Agent，但在没有设计约束时，直接让它写界面常会落回蓝紫渐变、圆角卡片套卡片和虚构数据指标。把 Oil UI Skill 装进 Claude Code 后，模型会先按品类做方向探索、生成同屏对比页，再基于真实视口截图和盲审反馈逐轮打磨。
核心要点
- 运行 npx skills add oil-oil/oil-ui 一键把开源设计流程装入 Claude Code，无需改动项目框架或绑定特定组件库。
- 提示词优先交代产品是什么、谁在用、核心任务有哪几步、目标视口尺寸（如 1440×900 或 390×844），少堆砌空泛形容词。
- 遇到新产品或首页改版时，先让 Claude Code 输出 3 至 4 个方向的同屏对比页，选定一个后再深入交互与状态。
- 利用 Claude Code 的子 Agent 能力做“无上下文盲审”，只给全页截图与 200% 局部裁切图，抓出字号、间距和对比度问题。
npx skills add oil-oil/oil-ui也可以直接对 Claude Code 说：“帮我安装这个 Skill：运行 npx skills add oil-oil/oil-ui”。
为什么在 Claude Code 里做界面需要设计 Skill
很多开发者习惯在 Claude Code 里直接输入“帮我做一个现代、简洁、高级的 SaaS 首页”。模型收到这类指令后，通常会调取训练数据里最常见的一套模板：居中大标题上方放一个胶囊小标签，下方排三张等宽圆角卡片，右侧塞满生造的百分比涨跌和折线图。代码能跑通，但页面看起来像随手生成的演示稿。
Oil UI 给 Claude Code 补上了一套贴近人类设计师的工作顺序：先根据产品品类和用户任务找参考坐标，再把几个截然不同的视觉方向放到同一张网页里对比；选定方向后，在真实浏览器视口里检查首屏重心、长文阅读、表单报错和手机端折行。
| 环节 | 直接让 Claude Code 写界面 | 搭配 Oil UI Skill 后的做法 |
|---|---|---|
| 起点 | 凭空套用通用 SaaS 模板与默认配色 | 先梳理品类特征、目标用户与主操作，提出多个不同方向 |
| 方向选择 | 一次只给一版，不满意只能重写 | 内置同屏对比页，在 1440px 或 390px 下并排挑方向 |
| 内容与数据 | 容易生造 99.9%、+24% 等假指标充版面 | 围绕真实业务字段排布层级，删掉无意义的装饰数字 |
| 质量验收 | 写完代码即结束，靠肉眼刷新排查 | 启动无上下文子 Agent 看真实截图盲审，逐项修完再交付 |
三步完成安装与环境准备
Oil UI 支持个人全局安装与项目级安装。全局安装适合日常在不同仓库间切换；项目级安装适合把设计规范随代码库共享给团队成员。
运行安装器并勾选 Claude Code
在终端执行安装命令，按提示选择 Claude Code 以及安装范围（全局 ~/.claude 或当前项目目录）。
npx skills add oil-oil/oil-ui准备可截图的本地浏览器环境
Oil UI 的视觉检验依赖真实页面渲染。确保本机可以通过 Playwright、本地开发服或浏览器工具打开页面并截取 1440×900（桌面）与 390×844（手机）视口图片。
需要完整交互、老项目改造与深度走查时安装 Pro
如果已经购买 Oil UI Pro，直接运行 CLI 安装并完成设备授权。已装 Pro 时无需同时保留开源版，避免两个 Skill 争抢同一类请求。
npx github:oil-oil/oil-cli install oil-ui-pro
给 Claude Code 的高信噪比提示词写法
在画廊收录的 Claude 系列作品里（如 Claude Opus 5.5 制作的平板阅读器《页边》、语音助手《应声》，以及 Claude Sonnet 5.5 制作的打车应用《来接》与《Pinch 结账》），提示词都遵循同一个结构：先写产品与受众，再写核心交互与关键状态，最后标明视口尺寸和交付物。
- 交代清楚谁在什么场景下用
- 比如做打车 App，直接写明“乘客从上车点确认、等待司机接驾到行程中改目的地的三屏流程”，比写“做一个好看的出行软件”清楚得多。
- 点出最值得打磨的那一个动作
- 每个界面都应该有一个视觉和交互重心。例如结账模块的重心是优惠码展开、运费重算与支付按钮的状态反馈；阅读器的重心是正文排版、目录抽屉与批注高亮。
- 明确视口尺寸与需要覆盖的状态
- 写明桌面端从 1440×900 到 390 宽响应式，或移动端 390×844 三屏并排（screens.html），并列出需要看到的 3 个真实状态。
用 Oil UI 为我们的 [产品类型，例如：独立书店在线结账模块] 设计界面。
- 目标用户与任务：[例如：买书读者在单栏或双栏结账页核对书目、切换自提或快递、输入优惠码并完成支付]
- 核心交互与状态：重点打磨 [最关键的操作]，需要覆盖 [状态 1：默认填写]、[状态 2：运费与折扣实时更新]、[状态 3：卡号校验报错与恢复]。
- 技术与环境约束：沿用当前仓库技术栈，桌面视口 1440×900 并兼容 390 宽手机视口。
请先提出几个不同的设计方向供我对比，选定后再进入实现与截图走查。把方括号里的内容换成你的真实业务字段，直接发给 Claude Code。
用 Claude Code 子 Agent 做真实截图盲审
写完代码的 Agent 往往对自己刚写出的布局有滤镜，看到拥挤的卡片或看不清的浅灰小字也会觉得合理。Oil UI 的做法是让主 Agent 截取渲染后的页面图片，再启动一个完全不知道刚才写过什么代码的独立子 Agent 来挑毛病。
子 Agent 会同时查看三类画面：100% 原始比例的首屏与长滚截图、200% 放大的高频交互局部（如导航栏、表格行、表单输入区），以及把文字模糊成色块后的版面结构图。只有当盲审不再指出层级混乱、溢出截断或 AI 俗套痕迹时，这一轮打磨才算完成。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
页边
电子阅读器（平板）
一个长篇阅读 App 在平板上的阅读界面（按 1024×1366 竖屏设计，放在展示画布中）：正文排版、划线、批注、目录、阅读进度。 中文长文排版是重点：字号、行距、段距、标点挤压都要讲究，读十分钟不累。划线后可以写一句批注。 截阅读中、划线并写批注、打开目录三个状态。
查看作品与提示词 →
来接
打车 App
打车 App 里下单之后的界面（390×844）：地图上车辆正在靠近、司机和车辆信息、预计到达、上车后的行程进度。 地图用代码画（路网、路线），不用真实地图截图。最焦虑的时刻是等车，让“车还有多远”一眼可见。 截等车、车到了、行程中三个状态。交付 `index.html` 和三屏并排的 `screens.html`。
查看作品与提示词 →
Pinch 结账
电商结账模块
一个独立设计师品牌网店的结账模块（桌面 1440×900，结账面板居中）：购物清单、收货地址、支付方式、下单成功。 每一步都顺、每个输入都有清楚的状态（填写中、出错、完成）。下单成功那一下要让人开心，而不是弹一个对勾。 截填写中、校验出错、下单成功三个状态。
查看作品与提示词 →
应声
AI 语音助手
一个 AI 语音助手在手机上的全屏界面（390×844），重点是声音的可视化：等你说话、正在听、正在想、正在回答四个状态各有自己的形态。 回答时下方出现一张结果卡（例如帮你订好的会议），不要只是一个发光的球。紫蓝发光球是最常见的默认，不要做成那样。 截四个状态，交付 `index.html` 和并排展示的 `screens.html`。
查看作品与提示词 →什么时候从开源版升级到 Oil UI Pro？
开源版已经包含品类调研、多方向同屏对比、去 AI 塑料感清单和截图还原。如果你在用 Claude Code 改造正在运行的复杂老项目、设计多面板后台工作台，或者需要最多 3 轮冲 9 分的子 Agent 盲审与按点击次数计步的真实任务走查，可以升级到 Oil UI Pro。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
Oil UI 会强制 Claude Code 使用 React、Tailwind 或某套组件库吗？
不会。Oil UI 提供的是设计方法、版式判断和视觉走查流程。无论你的仓库用 Next.js、Vue、Svelte、原生 HTML/CSS 还是现有组件库，Claude Code 都会在你的工程约束内实现界面。
Claude Opus 和 Claude Sonnet 搭配 Oil UI 有什么差别？
Opus 在字号比例、留白节奏和长页面的整体视觉叙事上通常更稳；Sonnet 响应速度更快，适合单模块打磨、组件状态补齐或已有设计方向下的页面扩展。两者都能直接读取同一套 Skill。
如果我想参考某张现有的参考图或截图，该怎么和 Claude Code 说？
直接把参考图路径发给 Claude Code，并说明是“按原图高保真还原（通过像素差异比对逐轮收敛）”还是“只借用这张图的色调与排版节奏，换成我自己的产品内容”。Oil UI 针对这两种场景有专门的执行分支。
装好后怎么确认 Claude Code 已经用上了 Oil UI？
你可以在提示词开头直接写“用 Oil UI 设计……”。正常工作时，Claude Code 不会一上来直接改业务代码，而会先梳理任务焦点、给出方向建议或生成方向对比页，并在实现后主动打开浏览器截图检查。