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