做前端项目的时候，不知道有没有遇到过这种情况：
让 AI 写代码，它啪啪啪写了一堆，结果跑起来一看，布局完全不是自己想要的或者不遵循项目风格。改来改去，半天时间就这么没了(重点词元没少花)，到最后干脆自己古法编程。其实问题不在 AI 身上，而是我们没有用对方法。
今天介绍一种新的工作流：先用 Visual Companion 出原型，确认好方向再开始写代码，可以避免不必要的返工，提高效率。
在开发过程中，我们经常依赖 AI 来加速编码进程，但往往结果却和预期大相径庭。这主要是因为我们在需求沟通和方向确认上存在问题。以下将介绍如何通过 Visual Companion 规避这些问题
使用 Visual Companion 开发的流程大致如下:
根据历史的文章，默认已经安装了相关技能或者插件
本文主要讲 superpowers:brainstorming 技能
跟 AI 说：
"帮我做一个天气卡片组件，显示当前天气和未来 3 天预报"
就这么一句话，剩下的交给 AI。
这时候 AI 会触发 Visual Companion，在你的浏览器里展示几种不同的布局方案：
浏览器（http://localhost:49406）里现在展示了 3 种天气卡片风格：
你看一眼，选一个最喜欢的，或者告诉 AI 哪里需要调整。
比如你可以说："A 的布局不错，但预报部分改成 B 的卡片风格。"
AI 更新方案，你继续确认，直到满意为止。
原型敲定之后，AI 不会直接开始写代码。它会先给你一份详细的实施计划：
第一个任务：创建天气卡片 HTML 结构，包含天气图标、温度、城市名、预报区。预计耗时 2 分钟
第二个任务：写 CSS 样式，实现响应式布局。预计耗时 3 分钟
第三个任务：写 JavaScript 逻辑，处理数据渲染。预计耗时 3 分钟
你看过计划，没问题，它才开始动手。
每个任务都是这样的流程：
先写一个测试用例，比如"应该正确显示天气图标和温度"
运行测试，看到失败。这是正常的
然后写最少的代码让测试通过
测试通过之后，再做一点优化重构
整个过程，AI 不会跳过任何一步。
实际操作中，很少触发草图原型，需要显式触发更方便些，第三步、第四步略过。
我的使用整个流程大概是这样的，尤其涉及到前端开发时，先说清楚需求，用 Visual Companion 出原型给你看，修改意见；原型确认之后，再生成实施计划，然后按计划用 TDD 的方式一个个完成任务，代码审查，确保代码可用。
用 Visual Companion 做前端开发有三个明显的好处：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。