Figma Engineer's Anti-AI Design Method

对抗 AI 设计 Slop：来自前 Figma 工程师的七条方法论 1. 始终着眼整体 设计过程本质上是三步循环（源自 Christopher Alexander「形式综合论」）： 1. 列出所有设计约束； 2. 构思满足约束的多种方案； 3. 若发现约束需增删，回到第一步重新整体推演。 关键警告：最常见的错误是跳过第 3 步，陷入"打地鼠式设计"——用户一反馈困惑就立即局部修补。AI 加剧了这种倾向（"把 X 做得更显眼""给 Y 加个入口"式的提示词），最终产出随机取舍、彼此割裂的拼布式界面。 正确做法：收到反馈先判断它是否改变了设计约束，再谈方案。作者团队用一份"小痛点文档"积累次要问题，待重设计时统一、连贯地解决，避免过度反应。 2. 做减法 Agent 天生爱"加东西"——多余文案、分割线、图标，正如它在代码里爱加冗余 try-catch、重复实现工具函数。产出的设计"比工程师手画的好看，但其实挺糟"。对策很简单：逐个元素追问"我真的需要它吗？" 3. 在设计工具里迭代 不要在真实产品代码里迭代设计。"原型引力"是隐形杀手：一旦 Agent 在代码库里搭出第一版，人就会倾向于在其上修修补补，而不再探索其他可能；且代码库上下文会迫使 Agent 生成与现有实现强行嫁接的方案。应使用 Figma（作者眼中仍是最佳，AI 集成日益增强）、Cursor Design Mode、Claude Design 或 HTML 原型等专用工具，并让 AI 为每个方案生成 3–4 个变体。 4. 使用组件与组件库 视图与逻辑分离、构建可复用组件——对工程师显而易见但极其重要，可避免"按钮被反复重实现"的视觉拼布。作者团队的实践：维护一个 /showcase 页面，让 Agent 先在此构建和调试 UI 组件，再接入主应用。 5. 使用预览部署 评估设计的最佳方式是真实数据。即使 Agent 完全按指令实现，拿到真实数据上手后仍可能发现不对——打磨和返工不可避免。对涉及前后端的大功能，作者团队将前后端拆成独立 PR：后端靠单元/集成测试验证，前端靠预览部署链接供人工验证。 6. 学会"偷" 绝大多数 UX 问题早已被人解决，正确的做法是取各家之长重新组合。优秀设计师开案第一件事都是收集大量竞品截图——工程师也应如此，这些截图还是喂给 Agent 的绝佳上下文。 7. 磨练品味 品味即对自身体验的反思能力，是创造而非制造 slop 的必要条件。产品工程师擅长识别"设计不对"，却缺乏修复它的"方案库"——这只能靠反复尝试与反思来积累。过程有趣但也残酷：在"够好"之前要承受密集的批评。作者团队没有全职设计师，采用"打谷式"方法：把设计扔到中间，团队一起"拿棍子敲打"直到满意。 AI 能加速设计的执行，但设计的判断力仍在人：用约束驱动整体思考、对 AI 的"加法冲动"做减法、在专用工具中探索多方案、以组件化和预览部署保证质量、借鉴成熟方案，并以持续反思培养品味——这才是工程师借助 AI 产出好设计的完整闭环。 Matt Dailey @reactiverobot Here's my advice for engineers looking to up their design game. x.com/i/article/2092… 🔗 View Quoted Tweet 💬 1 🔄 0 ❤️ 0 👀 401 📊 1 ⚡