刘小排：和Claude Code讨论产品的界面和交互设计

刘小排：和Claude Code讨论产品的界面和交互设计 刘小排：和Claude Code讨论产品的界面和交互设计 Modified August 25, 2025 我只需要告诉它 把方案一做出来看看 即可完成后续工作 五分钟后，Claude Code已经写完了雏形，然后它自己打开了浏览器，开始检查。如下图所示。 注意：开发服务器(localhost:3000)、右边的浏览器，是它自己打开的，我全程没有参与； 再看左边我绿色方框标的位置，发现它有在自己仔细检查、查看细节差异，给自己进一步修改的指导。 十分钟后，全部完成！ 录屏给大家看看，这是方案一 最终效果。 对比一下上面Claude Code在写代码之前告诉我的“方案一”，是不是一模一样呢？ 完全还原，而且所有的细节、动效，都做到位了。 赶快去试试吧！期待你的反馈 localhost:3000 我只需要告诉它 把方案一做出来看看 即可完成后续工作 五分钟后，Claude Code已经写完了雏形，然后它自己打开了浏览器，开始检查。如下图所示。 注意：开发服务器(localhost:3000)、右边的浏览器，是它自己打开的，我全程没有参与； localhost:3000 再看左边我绿色方框标的位置，发现它有在自己仔细检查、查看细节差异，给自己进一步修改的指导。 十分钟后，全部完成！ 录屏给大家看看，这是方案一 最终效果。 对比一下上面Claude Code在写代码之前告诉我的“方案一”，是不是一模一样呢？ 完全还原，而且所有的细节、动效，都做到位了。 赶快去试试吧！期待你的反馈 原创 刘小排 刘小排r2025年08月02日 14:42 北京 🔗 原文链接： 和Claude Code讨论产品的界面和交互设计 和Claude Code讨论产品的界面和交互设计 众所周知，Claude系列模型，是UI审美最好的模型。 问题是：Claude Code写代码挺慢的，如果每次都等它写完代码，我才能查看效果的话，那效率就太低了。 是否有可能，在我决定让Claude Code写代码之前，先和它讨论清楚，一个优秀的界面和交互设计是怎样的？ 经过摸索，我探索出来一个路线： 使用Claude Code + 截图 + 让它使用Playwright MCP查看当前情况（可选） + 让它用ASCII画出来布局 下面我们展开讲讲。 以我昨天刚刚做的一个小功能为例。 截图： 网址： https : //raphael.app/background remover 完整的指令如下 • • • • • • • • 收到指令后，Claude Code就开始工作了。 可以看到，Claude Code按照指令，查看我的相关代码、并且打开浏览器查看了当前效果，辅助它理解 接下来，Claude Code使用ASCII画出了5个方案 Claude Code做出了推荐，给出了推荐理由，如下图所示。