Notion 设计师 Andy Madrick 分享 AI 工具(如 LLM 和代码原型)如何改变与工程师的协作,让设计师掌握最后的设计细节。
Notion designer Andy Madrick shares how AI tools like LLMs and code prototypes transform collaboration with engineers, enabling designers to own the final mile of craft.
要点 · TL;DR
AI 让设计师掌握前端打磨的最后 5-20%,这是他们的超能力。 AI lets designers own the last mile of front-end polish, their superpower.
大功能从代码开始,用 LLM 搭脚手架;小打磨用 Figma。 Start big features in code with LLM scaffolding; use Figma for small polish.
设计师应提交小于 100 行的小型可审查 PR 以维持信任。 Designers should ship tiny, reviewable PRs under 100 lines to maintain trust.
核心观点 · Key points
AI 工具让设计师能掌控前端最后 5-20% 的打磨,这是他们的超能力。 AI tools let designers own the last 5-20% of front-end polish, their superpower.
大功能从代码开始,用 LLM 搭建框架;小打磨用 Figma。 For big features, start in code with LLM scaffolding; for small polish, use Figma.
设计师应提交微小、可审查的 PR(100 行以内)以维持信任。 Designers should ship tiny, reviewable PRs (under 100 lines) to maintain trust.
品味和克制不可替代;AI 输出需要人工编辑以避免过度装饰。 Taste and restraint are irreplaceable; AI outputs need human editing to avoid decoration.
协作模式取决于工程师的带宽和偏好;没有通用方案。 Collaboration mode depends on engineer bandwidth and preference; no one-size-fits-all.
反共识 · Contrarian takes
最安全、最不花哨的弹窗变体转化率最高,而非动画最炫的。 The safest, least flashy modal variant converted best, not the most animated one.
Figma 文件现在是生产环境的混乱截图;真相来源是生产代码。 Figma files are now messy screenshots of prod; source of truth is production code.
LLM 能一次性将原型代码转化为生产代码,甚至跨技术栈。 LLMs can one-shot translate prototype code to production code, even across stacks.
设计师应将 LLM 作为创意生成的协作伙伴,而不仅仅是执行工具。 Designers should use LLMs as collaborative partners for idea generation, not just execution.
逐像素重现交互仍然是培养品味的宝贵练习。 Recreating interactions pixel-by-pixel is still a valuable exercise for developing taste.
本期章节 · Chapters(共 16)
AI改变工程师协作Introduction: AI changing collaboration with engineers
设计Notion模态框Designing the Make with Notion modal
赞助商:Paper和FramerSponsor break: Paper and Framer
协作迭代与共同设计Collaborative iteration and co-design
构建动画模态框Building the animated modal
按钮尺寸轶事Button size anecdote
设计师掌控最后一公里Designers owning the last mile
AI代理作为前端设计翻译层Using AI agents as translation layers for front-end design
设计师的PR规模建议PR size advice for designers
初始输出与探索Initial output vs. exploration
培养设计品味,避免同质化Developing Design Taste and Avoiding Homogeneity
重现交互,知何时不动画Recreating Interactions and Knowing When Not to Animate