AI UI 设计师：直接在你的代码里打磨统一的界面

AI UI 设计师能做什么

它的产出就是代码，所以你一审核通过，改动就能上线。

• 排查页面上不一致的字体、间距和颜色，用你的设计 token 修好。
• 把零散的一次性标记抽成共享组件。
• 补上深色模式并逐一检查。
• 修复无障碍问题：对比度、焦点状态、标签和键盘操作。
• 在桌面和手机宽度下截取前后对比图，供你审核。

给它定什么目标

像对待新员工一样，给 AI 员工一个要推动的数字，每周复盘一次。先从下面挑一个开始。

它的每日工作流程

• 从看板或自己的排查清单里领下一个界面。
• 在桌面和手机宽度、浅色和深色模式下各截一张图。
• 用设计系统的 token 和组件修好它；某个写法反复出现，就抽成组件。
• 回到浏览器再检查一遍，并跑无障碍检查。
• 提交附带前后对比截图的 Pull Request。

如何用 Claude Code 或 Codex 搭建 AI UI 设计师

1. 写好岗位说明

   把它保存为员工所在仓库里的 CLAUDE.md（Claude Code）或 AGENTS.md（Codex），这样每次会话一开始，它就知道自己的职责、目标和规则。详见 CLAUDE.md 指南。

   # 岗位：UI 设计师
   目标：每周打磨 3 个界面。
   
   ## 每个界面
   1. 截图：桌面和手机，浅色和深色。
   2. 只用我们的 token 修正字体、间距和颜色。
   3. 复用组件；某个写法反复出现就抽成组件。
   4. 检查对比度、焦点状态和标签。
   5. 提交附带前后对比截图的 PR。
   
   ## 规则
   - 不在 token 之外新增颜色、字体或间距值。
   - 改文案、关键流程的布局或品牌之前，先问人。

2. 给它配齐需要的工具

   前端仓库和本地开发服务器、一个它能操控来截图的浏览器、你的设计 token 和组件库，以及一个无障碍检测工具。

3. 定好哪些事要你点头

   修改品牌（logo、颜色、字体）、文案、注册或结账流程的布局，或者在转化页面上做任何客户会注意到的改动之前，都要先问。

4. 给它排好班

   一个岗位需要的是节奏，而不是一条提示词。单个定期执行的提示词可以用 /loop 或定时任务；要让它真正上岗，就给它工作时间、心跳和一块任务看板。详见如何让 Claude Code 主动工作。

相关指南

想让设计师和工程师并行工作，请看同时运行多个 Claude Code agent。想让它自己领活，请看如何让 Claude Code 主动工作。要装哪些 skill，请看最好用的网站与 UI 设计 Claude skill。

直接招一位 AI UI 设计师，不用自己写脚本

Crewmark 上有现成的 AI UI 设计师可以直接招聘。它跑在你的 Claude Code、Codex、DeepSeek Harness 或 OpenCode 会话里，用的是你已经付费的订阅；工作时间内按心跳醒来，从共享看板上领下一个任务，需要你拍板时会给你发消息。

1. 选好岗位

   技能、目标和排班都已配好，把目标改成你自己的数字就行。

2. 接入你的项目

   在它要工作的仓库或文件夹里运行安装命令。它会有自己独立的会话和代码副本。

3. 审核就好，不用盯着

   它边做边在任务下留言，碰到你审批清单上的事会先问你。了解什么是 AI 员工。

AI UI 设计师常见问题