已有项目 UI 改造与体验翻新：在不改坏业务逻辑的前提下重整界面
从零生成一个新演示页很容易，难的是改造一个已经在跑的真实项目：接口字段不能随便改、已有表单校验和路由参数不能丢、改了首页还得让列表页和设置页长成一家人。针对老项目翻新，最稳妥的做法是先锁定业务不变量、按需要选择改造幅度，并在首个标杆页定稿后提炼出 DESIGN.md，再推广到其余页面。
核心要点
- 动手前先划清红线：列出绝对不能改动的接口字段、路由参数、权限判断与核心提交流程。
- 按实际痛点选择改造幅度：第一级只清视觉噪音，第二级重排单页布局与状态，第三级重梳跨步骤难用流程。
- 用“数点击次数”的真实任务走查检验改造效果：高频操作如果从 6 次点击缩减到 2 次，比单纯换个配色更有价值。
- 标杆页走查通过后，将色彩变量、字号梯度、间距与边线规则写成仓库里的 DESIGN.md，让后续页面自动对齐。
npx github:oil-oil/oil-cli install oil-ui-pro如果只想先在单个页面试试基础方向对比与去塑料感，也可先运行 npx skills add oil-oil/oil-ui 安装免费开源版。
老项目改造的三个层级：别把小修做成伤筋动骨的重构
很多团队不敢让 AI 碰老项目，是因为一句“帮我美化一下这个页面”下去，模型常常把组件拆得七零八落，甚至顺手删掉了原本好用的筛选器和导出按钮。在 Oil UI（特别是 Oil UI Pro 的老项目改造模块）中，我们会先根据项目现状把改造明确分为三级：
| 改造层级 | 适用现状 | 改动范围 | 不改动的部分 |
|---|---|---|---|
| 第一级：收拾视觉噪音 (Tidy up) | 功能流程没问题，但框线过多、字号混乱、配色显脏或充满早期 AI 套路 | 统一字号行高、删掉多余外框与嵌套卡片、收敛色彩、对齐表格与表单间距 | DOM 主结构、路由、状态管理与所有交互流程保持原样 |
| 第二级：单页布局与状态升级 (Upgrade) | 页面信息主次颠倒、首屏抓不住重点，或缺少空状态、加载态与报错恢复 | 重排页面区块主次、调整多栏比例、补齐加载/空/错误/完成四态与移动端适配 | 后端 API 契约、已有业务规则与跨页面跳转关系保持不变 |
| 第三级：重梳任务流与设计规范 (Rework flow) | 操作路径绕远路、弹窗套弹窗、多页风格割裂，用户完成一次任务要多点好几步 | 合并冗余步骤、把深埋的高频操作拿到明面、确立标杆页并生成全站 DESIGN.md | 底层数据模型与核心商业逻辑不变，前端交互路径做减法重构 |
四步稳妥翻新一个正在运行的项目
无论你的项目是合同审阅工具（可参考画廊中的《墨契 MOQI》）、迭代看板（《Relay》）、邮件客户端（《Post》）还是电商结账页（《Pinch 结账》），都可以按下面四步推进改造：
对当前页面截图，做带编号的单页诊断
先让 Agent 打开本地运行中的旧页面截图，标出真正影响阅读和操作的病灶（例如：1. 顶部三个同色按钮分不清主次；2. 表格 12 列挤在 1000px 内导致文字竖排；3. 报错只弹 alert 不标红具体输入框）。
选定一个代表性标杆页，做方向探索
不要一上来同时改 20 个路由。挑出用户每天停留最久的那一个页面（如主工作台或核心详情页），用真实业务数据跑出 2 至 3 个改造方向，在浏览器里并排比对。
走完一次真实任务，并数一数点击次数
在改好的页面上模拟真实用户从进入到完成任务的全过程：填表、筛选、触发一次报错并恢复、提交保存。检查是否减少了不必要的弹窗确认和来回跳转。
把标杆页沉淀为 DESIGN.md，再批量统一其余页面
标杆页验收通过后，让 Agent 把这套页面的背景色阶、正文字号、表格密度、按钮样式和禁用套路写进项目根目录的 DESIGN.md，再按同一份规范依次改造相邻页面。
老项目单页改造提示词模板
在 Claude Code、Codex 或 Cursor 里改造现有页面时，用下面的提示词可以把风险锁在可控范围内：
用 Oil UI 改造当前项目中的 [页面路由或组件路径，例如：app/billing/page.tsx]。
- 严禁改动的业务行为：完整保留现有的 [数据拉取钩子、筛选参数、表单校验规则、导出与提交事件]，不要删减任何已有业务字段。
- 当前页面痛点：[例如：信息全部堆在等宽卡片里分不清主次；表格列太挤；缺少筛选为空和扣款失败时的界面反馈]。
- 本次改造级别：[选择：1) 仅清理视觉噪音与对齐间距 / 2) 重排单页主次布局并补齐状态 / 3) 简化操作步骤并提炼 DESIGN.md]。
请先截取当前旧页面做问题诊断，给出改造方案对比，完成后在 1440×900 与 390×844 下截图核对。先把“严禁改动的业务行为”列在第一条，能有效防止 Agent 误删业务代码。
画廊真实案例与提示词参考
打开在线演示查看 1440px 或 390px 下的实际页面，对比不同模型与提示词做出的最终效果。
墨契
AI 合同审阅官网
一个给企业法务团队用的 AI 合同审阅产品的官网。做首页。
查看作品与提示词 →
Relay
项目与迭代管理
产品：「Relay」，一个给 20–200 人软件团队用的任务和迭代管理工具。 做它的主工作界面（1440×900）： - 左侧导航（团队、项目、我的任务、收件箱），中间是当前迭代的任务列表或看板，任务有编号、标题、状态、优先级、负责人头像、预计时间。数据要多、要真实（二三十条任务，名字像真实的软件开发任务）。 - 气质：深色、精致、高密度，像每天用 8 小时的专业工具。行高紧凑、键盘快捷键随处可见、状态图标统一且有辨识度。 - 记忆点：按下快捷键弹出的命令面板，输入几个字就能跳转、改状态、指派人。截一张命令面板打开、正在输入的状态。 - 再截一张任务详情侧栏打开的状态。
查看作品与提示词 →
Post
邮件客户端
产品：「Post」，一个给每天处理上百封邮件的人用的邮件客户端。 做它的主界面（1440×900）：收件箱、正在读的一封邮件、快速回复。邮件内容要真实（工作往来、账单、通知混在一起）。 记忆点：清空收件箱的手感，例如处理完一封邮件时它当场收走、计数减少。 再截一张收件箱清零时的状态。
查看作品与提示词 →
Pinch 结账
电商结账模块
一个独立设计师品牌网店的结账模块（桌面 1440×900，结账面板居中）：购物清单、收货地址、支付方式、下单成功。 每一步都顺、每个输入都有清楚的状态（填写中、出错、完成）。下单成功那一下要让人开心，而不是弹一个对勾。 截填写中、校验出错、下单成功三个状态。
查看作品与提示词 →Oil UI Pro 老项目改造套件
Oil UI Pro 内置了专门针对存量项目的“单页截图诊断标注”“三级改造流程”“按点击计步的任务走查”以及“跨页面 DESIGN.md 提取与一致性检查”，非常适合正在迭代线上产品的独立开发者与工程团队。
npx github:oil-oil/oil-cli install oil-ui-pro常见问题
改造老项目时，应该先改全局 CSS 变量还是先改某一个具体页面？
先改一个最有代表性的具体页面。凭空定一套全局 CSS 变量往往脱离真实业务密度；先把核心工作台或核心落地页改到顺眼、好用，再从这个真实页面里反推出 DESIGN.md 和全局样式变量，准确率高得多。
老项目里用了很多第三方历史组件，能一点点渐进改造吗？
可以。使用第一级（收拾视觉噪音）或第二级（单页布局升级）改造时，可以让 Agent 只调整外层网格布局、间距、字号和颜色变量，保留内部复杂的历史组件不动，按页面逐个推进。
怎么判断一次老项目改造是真的变好用了，而不只是换了层皮？
看两件事：第一，遮住文字看版面色块，首屏主操作和异常告警是否一眼能扫到；第二，亲自走一遍最常用的任务，看点击次数、视线跳跃和表单报错恢复是不是比旧版更顺手。
DESIGN.md 生成后放在哪里？之后怎么用？
放在项目根目录或 docs/ 下。之后无论你或团队成员在 Claude Code、Codex 还是 Cursor 里新写页面，只需带上一句“遵循项目 DESIGN.md 并使用 Oil UI”，新页面就会自动沿用统一的视觉语言。