Abstract
随着诸如 Claude Code、Cursor 等 AI 编程助手（AI Coding Assistants）的崛起，UI/UX 设计师的角色正在发生转变。本文梳理了在使用此类智能体工具时，设计师所需掌握的核心技能与工作流转变。
1. 结构化提示语设计（Prompt Engineering for UI）
传统工作流中，设计师可能仅仅处理“推像素”的工作；而在 AI 时代，如何将视觉规范准确地“翻译”并输入给 Claude Code 成了关键技能。
- 规范的语义化传达：设计师需要能够用清晰的语言描述 Padding、Margin、Typography（排版缩放系统）以及色彩 Token。比如不仅要求“这里设计一个按钮”，而是需要说明“按照我们的 Design System，运用 Tailwind 中
slate-800色值与gap-4，构建出带有hover:scale-105微动效的响应式按钮”。 - 借助项目治理文件：熟练通过
CLAUDE.md、.cursorrules或是SKILL.md等系统设定，将自己的设计体系与限制要求系统化地投喂给 AI。
2. 掌握 MCP 生态（如 Figma MCP 整合整合）
现代 AI 助手不仅会读取代码，还能通过 Model Context Protocol (MCP) 与外部平台连接。
- Figma to Code 工作流：利用类似 Figma MCP 的桥接方案，设计师可以直接让 Claude 读取 Figma 文件中的组件数据（比如图层树、样式规范），并让其当场转化为高质量的生产级代码（React/Vue 等）。
- 这种技能要求设计师理解如何合理定义 Figma 中的组件层级，令其对 MCP 更具解析友好性。
3. 规避 “AI Slop”，进行美学检验与调优
AI 往往倾向于生成高度泛化且同质化的网页界面（即圈内戏称的 “AI Slop”——泛滥的渐变背景与通用卡片布局）。
- 品味守门人（Taste Keeper）：设计师必须具备高度的敏锐度，识别出哪些是由 AI 生成的“模版感”极强的布局，然后精确地指挥 Claude 对圆角细节、阴影深度、交互动画（Micro-interactions）进行定制化。
- 动态交互审查：因为 AI 只“写”代码而不“看”真机体验，设计师需要通过浏览器快速 review 交互动效，判断其是否顺滑与符合人类直觉。
4. 可访问性校验与组件工程思维
AI 虽然可以快速“糊”出一个界面，但也容易遗漏严格级的盲人阅读器与键盘控制等逻辑。
- 指引并审查 WCAG 规范：使用 Claude 进行设计审计，用类似 “请检查这套由你生成的表单组件，确保其全部 Labeling 符合可访问性原则，对比度不低于 AAA 级标准” 这样的提问去修复 UX 残缺的部分。
- 架构级协作：要求设计师具备一定的前端架构思维，帮助 Claude 规划更合理的组件树，保证不仅“看起来对”，而且在状态管理（State Management）中也不会崩溃。
5. 聚焦人类的情感与复杂研究
AI 可以瞬间写出完整的落地页，但它完全缺乏同理心和复杂的商业意图洞察。
- 由制造者转向策略家：在这个时代，真正能保护设计师阵地的，是那些对复杂用户旅程（User Journey）的深度洞察、对业务策略的拆解。设计师现在充当“体验总导演”，而把繁重的组件排版任务外包给 Claude Code 这个高级“美术外包”。
核心转变
以前：我怎样把这个页面画得更好看？ 现在：我怎样通过自然语言、约束文件与框架规范，构建起正确的系统环境，让 Claude 生成出既符合商业逻辑又遵循设计规范的高完成度 UI？