Codex 如何用 taste-skill 改前端？AI 页面重设计流程说明

让 Codex 或 Claude Code 改前端时，最难的是把“变好看”翻译成可执行任务。taste-skill 的 guide 给了一个更稳的入口：新建页面和重做旧页面用不同 prompt，不把所有需求都塞进同一句“帮我优化 UI”。

先分清新建还是重做

Guide 页把 v2 用法拆成两个 prompt：一个用于 fresh build，一个用于 redesign。新建页面要先给 brief，说明行业、目标用户、页面目标和可用素材；重做旧页面则要先让 Agent 读取现有页面，识别哪些地方像模板，再决定怎么改。两种任务混在一起，Agent 容易一边保留旧结构，一边套新风格，结果像半成品。

Codex 里怎么用

在 Codex 里，我会先让它读项目结构和已有组件，再声明 taste-skill 已加载，要求它按 brief 做视觉判断。任务要尽量具体：改首页首屏、改 pricing 区、改 dashboard 空状态，而不是全站变高级。每次只改一个区域，才能看清 taste-skill 是否真的影响了布局、文案和图片选择。

在已有项目里，我会先让 Codex 只读页面和组件，不改文件，输出三条设计问题和三条保留项。保留项很重要，说明哪些信息不能动。没有这一步，AI 很容易把可用结构也一起重写，最后页面虽然新了，业务重点却丢了。

重做旧页面的步骤

重做页面时先让 Agent 描述当前问题：首屏是否拥挤，CTA 是否明确，卡片是否重复，移动端是否能读。然后再让它输出改动计划和代码。失败场景是跳过诊断直接生成新页面，这样容易把原本有用的信息也删掉。taste-skill 不是鼓励推倒重来，而是让每一次改动有审美理由。

验收不要只看截图

前端改完后要跑本地页面，检查宽屏、普通桌面和手机视口。taste-skill 能提醒 hero、按钮、文案和装饰问题，但不会自动保证所有 breakpoint 都完美。看起来舒服还不够，按钮要能点，长标题不能溢出，图片不能遮住正文。

改完后再让它列出文件清单和视觉影响：改了哪些组件、影响哪些 breakpoint、还需要人工看哪张截图。能说清这些，才算 taste-skill 真的参与了重设计，而不是只给页面换皮。

如果改动涉及表单、价格表或登录页，还要单独点一遍交互状态。AI 很容易把默认态做得漂亮，却忘了错误提示、禁用按钮、加载状态和长文本。taste-skill 能压住审美跑偏，但交互完整性仍要人工过一遍，尤其是提交失败后的提示位置和手机端输入框高度。

适合的使用节奏

我会按“诊断、改一块、截图检查、再扩展”的节奏来用。一次只让 Codex 改一个具体区域，验证后再进入下一块。这样做慢一点，但返工少。真正的审美增强不是让 AI 一次输出大而全页面，而是让它每一步都有可以检查的视觉判断，也能留下清楚的改动记录。