维岳

第07课：产品设计与Bug调试

13 min read

第07课：产品设计与Bug调试

核心思想：好的产品是打磨出来的，不是一次写完的。把每一次出错当成练习描述需求的机会。

一、UI/UX设计思维：好的设计让用户无感

好的设计是隐形的

用户打开你的产品，如果能立刻知道”这是什么”、“我该点什么”、“怎么用”——那这个设计就是成功的。好的设计不会让用户停下来思考。

坏设计的信号：

  • 用户需要看教程才能用
  • 用户点错按钮
  • 用户找不到关键功能
  • 用户在页面上迷茫超过3秒

好设计的标准：

  • 一致性：同样功能的按钮长得一样，放的位置一样
  • 反馈：点按钮有响应（变色、加载、提示）
  • 容错：误操作可以撤销，删重要数据有二次确认
  • 简约：每个页面只做一件事，不多不少

你不是设计师，但你不需要成为设计师

AI时代，设计能力被极大地平均化了：

  1. 抄：找到你喜欢的参考产品，截图给AI，让它按这个风格来
  2. 用组件库：shadcn/ui、Tailwind CSS、Radix UI——专业设计师做好的组件，直接拼装
  3. 让AI改：你觉得哪里丑，截图告诉AI，“这个按钮换个颜色”、“间距大一点”
  4. A/B测试：两个方案拿不准？两个都做出来，问朋友/用户哪个好

金句：你不需要懂色彩理论、排版规则、交互设计。你只需要能说”这个不好看，改成那样”——AI会帮你实现。

二、AI辅助调试：复制错误到AI，让AI自动修复

调试的思维模型

“每次遇到出错，当成一个邀请——邀请你练习描述需求，排查问题。”

这是整门课最重要的认知转变之一。普通人看到错误会焦虑、想放弃。好的产品人看到错误会说：“好，这是AI帮我补课的机会。“

AI调试三步法

第一步：复制错误信息

  • 把控制台的红字全部复制
  • 包括错误类型、错误描述、文件路径、行号
  • 不要自己分析，不要断章取义

第二步：粘贴给AI，加一句背景

这个错误发生在用户点击"保存"按钮之后。
我的项目是Next.js + Tailwind CSS。
请帮我分析原因并给出修复方案。

第三步：让AI修复

  • AI给出方案后，一步步应用
  • 如果修复引入了新问题，继续复制新的错误给AI
  • 这是循环，不是单次操作

不要背错误

很多新手会试图记住所有错误类型——不需要。错误千变万化，但调试流程不变：

  1. 复制错误
  2. 粘贴给AI
  3. 应用修复
  4. 验证结果

你只需要学会这个流程，不需要背任何一个错误。

三、产品打磨流程：从粗糙到精致

四步打磨法

粗糙版 → 修改配色 → 截图修改（指哪儿打哪儿） → 装修

第一步：粗糙版

  • 功能优先，外观无所谓
  • 先让所有按钮能点，所有页面能跳转
  • 就像毛坯房，先把墙砌好

第二步：修改配色

  • 确定主色、辅色、背景色
  • 参考优秀产品的配色方案
  • 告诉AI：“我想要苹果风格的极简配色，主色用蓝色”
  • 这一步最出效果，投入产出比最高

第三步：截图修改（指哪儿打哪儿）

  • 截屏发给AI
  • 画圈/标注哪个地方要改
  • “这里间距太大”、“这个字体太细了”、“按钮放中间”
  • 这是扣子编程最核心的交互方式——指哪儿打哪儿

第四步：装修

  • 微调细节：圆角、阴影、过渡动画
  • 加loading状态、空状态、错误状态
  • 适配移动端
  • 这是锦上添花，不是雪中送炭

MVP陷阱

很多人的产品死在这个循环里：

想做产品 → 觉得不够好 → 继续打磨 → 永远不上线 → 产品死了

正确的做法： 粗糙版能用了就上线。上线后再迭代。

因为你的用户根本不关心你的代码写得有多优雅、UI有多精致。他们只关心你的产品能不能解决他们的问题。

四、用户体验优化：让产品有”质感”

质感来自细节。以下是最容易出效果的几个优化点：

1. 加载状态

  • 任何需要等待的操作都要有反馈
  • 按钮点击后变成loading状态（转圈+禁用）
  • 页面切换要有过渡

2. 空状态

  • 列表为空时不要显示空白页面
  • 展示”你还没有xx，点击这里创建第一个”
  • 这是引导用户的好机会

3. 错误状态

  • 网络请求失败要提示用户
  • 给出重试按钮
  • 不要让用户看到技术错误信息

4. 动效

  • 过度的动效让人眩晕，完全没有动效显得廉价
  • 关键位置加微动效：弹窗出现、页面切换、任务完成
  • 优先用CSS transition，性能最好

5. 移动端适配

  • 你的用户大概率在手机上看
  • 确保在手机尺寸下所有功能可用
  • 按钮大小要适配手指点击（至少44px）

这些优化不需要你全部做到位才能上线。每次迭代加一个，产品质感会逐步提升。

五、扣子编程的”指哪儿改哪儿”功能

这是扣子编程最具产品经理气质的特性：

怎么用

  1. 打开你的产品页面
  2. 在扣子编程中截图当前页面
  3. 用画圈/标记告诉AI要改哪里
  4. AI自动定位到代码位置并修改

实际场景

你："这个按钮的颜色和背景太接近了，看不清"
→ 截图 + 画圈
→ AI自动找到按钮的CSS类
→ 修改颜色对比度
→ 页面实时更新

不需要在代码里找对应的文件，不需要知道颜色值叫什么——你只需要说”这里改一下”。

局限性

指哪儿改哪儿适合视觉层面的修改：

  • 间距、颜色、字体、布局
  • 按钮位置、大小、样式

不适合逻辑层面的修改：

  • 修改数据库查询逻辑
  • 修改API调用方式
  • 修改用户权限校验

逻辑修改需要你描述清楚需求，不是截图就能解决的。

六、常见Bug类型与应对策略

TypeScript错误

特征： 编译时就报错，代码有红色波浪线

典型场景：

  • 类型不匹配：传了string但函数需要number
  • 使用了未定义的变量或函数
  • 组件props缺少必填参数

应对：

  • 鼠标悬停看错误提示
  • 复制给AI，让AI修复类型定义
  • 不要手动改类型，容易引入新问题

API调用失败

特征： 运行时错误，数据没加载出来

典型场景：

  • 后端接口地址写错了
  • 请求参数格式不对
  • 后端返回的数据结构和前端预期不一致
  • 跨域问题（CORS）

应对：

  • 打开浏览器开发者工具 → Network标签
  • 看请求是否发出、返回什么状态码
  • 把请求和响应复制给AI分析

样式问题

特征： 页面布局乱了，元素重叠或错位

典型场景：

  • CSS类名冲突
  • 响应式布局在不同屏幕下表现不同
  • 动画闪烁或不执行

应对：

  • 截图给AI，截图最能说明问题
  • 描述期望效果和实际效果的差异
  • 让AI调整CSS

运行时白屏

特征： 页面打开什么都看不到

典型场景：

  • JavaScript报错导致渲染中断
  • 组件未正确导出
  • 引用的资源文件缺失

应对：

  • 查看浏览器控制台（Console）的红字错误
  • 复制错误给AI
  • 如果是Next.js，检查服务端日志

七、调试思维：把出错变成成长机会

从”出错了”到”机会来了”

普通人看到错误：

（焦虑）完了，出bug了 → （逃避）先放一放 → （求助）谁会修这个

产品人看到错误：

（冷静）又出错了 → （分析）这个错误信息说了什么 → （行动）复制给AI修复

每一次错误都是一个训练机会

错误是AI编程中最有价值的学习时刻：

  1. 你学会描述问题：要想让AI理解你的错误，你必须清楚地描述背景、现象、期望
  2. 你学会拆解问题：复杂的错误往往由多个因素叠加，AI帮你一步步定位
  3. 你学会验证方案：AI给出的方案不一定对，你需要判断是否合理
  4. 你学会举一反三：同样的错误不会只出现一次，学会后终身受用

调试心法

  • 不要慌：99%的错误都有解决方案
  • 不要自己扛：把错误丢给AI，这是AI最擅长的事
  • 不要猜：读错误信息，不是猜错误原因
  • 不要放弃：如果AI一次没解决，提供更多上下文再试一次

本课小结

产品设计不是艺术创作，是满足用户需求的过程。不要追求完美，追求”能用，且用户愿意用”。

调试不是技术活，是态度问题。把错误当成学习机会，你会在每一次出错中变得更强大。

好的产品是改出来的，好的程序员是debug练出来的。

课后练习

  1. 找出你目前产品中三个不够好的设计，截图让AI修改
  2. 故意制造一个错误（比如改错一个API地址），练习用AI调试
  3. 给产品加上加载状态和空状态
  4. 把产品截图发给朋友，观察他们使用时有没有困惑的地方

Graph View

Backlinks