一位设计工程师分享了充分利用 AI 的具体策略，包括避免过度使用 useEffect 等常见陷阱，并强调了创造力和工艺的重要性。
A design engineer shares specific tactics to get the most out of AI, including avoiding common pitfalls like overusing useEffect, and emphasizes the importance of creativity and craft.
要点 · TL;DR
设计工程师将设计思维与编码结合，打磨最后 10%的工艺细节。 Design engineers blend design thinking with coding to perfect the final 10% of craft.
AI 常误用 React 的 useEffect 和数组索引作为 key，导致 bug。 AI often misuses React's useEffect and array index as key, causing bugs.
先学基础再学框架，才能批判性地评估 AI 生成的代码。 Learn fundamentals before frameworks to critically evaluate AI-generated code.
核心观点 · Key points
设计工程师将设计师思维与编码结合，关注最后10%的工艺细节。 Design engineers combine a designer's mindset with coding to care about the final 10% of craft.
AI常过度使用React的useEffect，导致不必要的重渲染；开发者应质疑这一点。 AI often overuses React's useEffect, causing unnecessary re-renders; developers should question it.
使用数组索引作为React键会导致错误；唯一ID对于正确渲染列表至关重要。 Using array index as React key leads to bugs; unique IDs are essential for correct list rendering.
浏览器开发者工具让设计师无需反复提示AI即可快速调试CSS问题，如object-fit。 Browser DevTools let designers quickly debug CSS issues like object-fit without prompting AI repeatedly.
设计工程师应先学习基础知识再学框架，以理解AI生成的内容。 Design engineers should learn fundamentals before frameworks to understand what AI generates.
反共识 · Contrarian takes
AI倾向于到处使用弹簧动画，这往往不合适；在上下文中微妙性很重要。 AI's tendency to spring animations everywhere is often inappropriate; subtlety matters in context.
凭感觉编码到生产环境尚未被雇主信任；基础编码知识仍然必要。 Vibe coding to production is not yet trusted by employers; fundamental coding knowledge is still required.
设计工程师并非要成为动画大师；大部分工作是高效转化设计意图。 Design engineering is not about being a master animator; most work is translating design intent efficiently.
AI可能生成臃肿的代码；知道何时质疑它能节省时间和资源。 AI can produce bloated code; knowing when to question it saves time and resources.
设计工程师的角色正回归通才，逆转了高度专业化的趋势。 The role of design engineer is swinging back to generalist, reversing the trend of hyper-specialization.
本期章节 · Chapters（共 18）
开场与嘉宾介绍Introduction and Guest Welcome
AI确定性输出与useEffect滥用AI's Deterministic Output and Overuse of useEffect
赞助商：Granola MCP和LovableSponsor Break: Granola MCP and Lovable
设计工程师的实用知识Practical Knowledge for Design Engineers
用自定义指南使用AIUsing AI with custom guidelines
常见AI编码错误：用索引作键Common AI coding mistake: using index as key
设计直觉与动画哲学Design intuition and animation philosophy
浏览器检查器调试vs AIDebugging with browser inspector vs. AI
设计工程师的学习路径Learning journey for design engineers
听众专属折扣Special discount for listeners
前端前端与设计所有权Front of the front end and design ownership
Inflight赞助消息Sponsor message for Inflight
用AI设计微交互Designing with AI for micro-interactions
设计工程师思维：创意与工艺Design engineer mindset: creativity and craft
设计工程师就业市场与AI影响Job market for design engineers and AI impact
功能与愉悦的差距，学习基础Gap between functional and delightful, and learning fundamentals