我把在咖啡店画的草图拍了张照，8分钟后它跑在了手机模拟器上

周三下午三点，我坐在公司楼下的咖啡店，用一张餐巾纸画了个App登录页的草图。

不是什么精致的线框图，就是那种随手画的：一个矩形代表手机屏幕，两个细长框框表示输入框，一个圆角矩形写着"登录"，右上角还有个潦草的"×"关闭按钮，箭头乱指，字迹歪斜。

我把它拍了张照，上传给Claude，然后去续了杯咖啡。

回来的时候，屏幕上已经有了一段React Native代码。我复制粘贴进Expo Go，摇一摇手机——

就是这么简单，也就是这么不可思议。

---

我知道你现在的第一反应：这不是魔法，这是Claude的多模态能力，早就有人演示过了。

但我想说的不是"看，AI好厉害"。我想说的是：这个工作流是可复现的，有边界的，有适用场景的——而这些，才是真正值钱的信息。

下面是我完整的实验记录，包括让我兴奋的三个瞬间，和让我踩坑的两个教训。

---

第一章：8分钟全流程还原

先把时间线摆出来，不夸张：

• 草图载体：咖啡店餐巾纸，圆珠笔手绘
• 模型：Claude Sonnet 4.6（多模态能力主力版本）
• 输出目标：React Native + Expo 可运行原型
• 对照组：同一草图，要求输出纯HTML版本

两个版本我都跑了，后面会详细说区别。

---

第二章：三个真实感受

感受1——识图精准度超预期

老实说，上传之前我预期它会"大概理解"草图意思，可能需要我大量文字补充描述。

结果完全出乎意料。

我草图上有一处特别乱：输入框旁边画了一个小眼睛图标，表示"显示/隐藏密码"，但线条歪得一塌糊涂，更像是一个奇怪的椭圆形。Claude的回复里直接写道：

"图中密码输入框右侧有一个眼睛图标，我将实现显示/隐藏密码的切换功能。"

它不仅认出了这个图标，还自动推断出了它的交互含义，并在代码里实现了这个功能。

// Claude 生成的密码显示切换组件
const [isPasswordVisible, setIsPasswordVisible] = useState(false);


style={styles.passwordInput}

placeholder="请输入密码"
secureTextEntry={!isPasswordVisible}  // 控制密码可见性
value={password}
onChangeText={setPassword}
/>
{/ 眼睛图标：点击切换密码显示状态 /}
style={styles.eyeIcon}

onPress={() => setIsPasswordVisible(!isPasswordVisible)}
>
{isPasswordVisible ? '🙈' : '👁'}

代码里连注释都写得很清楚——这点对非程序员来说尤其重要，后面会专门说。

草图里的手写文字（"手机号"、"密码"、"忘记密码？"）也都被准确识别，没有出现乱码或误读。即使是我那个字迹，也能被正确理解。

感受2——代码可读性高，改得动

这是让我意外的第二点。

我见过很多AI生成的代码，堆在一起像一锅粥，改一处动全身。Claude这次生成的组件结构非常清晰：

• 状态管理统一放在组件顶部
• 每个UI元素都有对应注释说明它在草图中的位置
• 样式表单独抽离到 StyleSheet.create() 里，不混在JSX里

这意味着什么？即使你不会写React Native，你也能根据注释定向修改。

比如我想把"登录"按钮的颜色从蓝色改成橙色，直接找到 loginButton 样式块，改 backgroundColor 那一行就行了。不需要理解整个组件逻辑。

💡 这一点对产品经理和设计师来说是个大红利：你不需要学代码，但你需要能读懂代码结构。Claude生成的代码，入门门槛比你想象的低得多。

感受3——迭代对话比一次生成更有价值

这是整个实验里最重要的发现。

很多人用多模态AI的思路是：上传图片 → 等结果 → 不满意 → 重新上传。

这个思路效率极低。

正确的用法是：第一次生成只是起点，后续的对话才是核心。

我做了一个粗略的效率对比：

• 重新上传草图（修改草图→拍照→上传→等待生成）：平均每次迭代约3-4分钟
• 追加文字指令（直接在对话框输入修改需求）：平均每次迭代约40秒

效率差距接近5-6倍。

而且追加指令的表达更精确：

# 追加指令示例（比重新画草图清晰10倍）

把"登录"按钮改成固定在屏幕底部，
距离底部安全区域16px，
宽度撑满屏幕，左右各留16px边距。

Claude会在已有代码基础上精准修改，而不是重新生成一遍。这个"增量修改"能力，才是真正的效率杠杆。

---

第三章：两个明显局限

说完好的，必须说坑。第二天我想把这个原型用到真实项目里，踩了两个坑。

局限1——复杂交互逻辑，它会"脑补"出错

这是最危险的坑。

我的草图里有一个箭头，从登录页指向一个模糊的方框，我的本意是"登录成功后跳转到首页"。

Claude的理解是：登录按钮点击后，直接在当前页面展示欢迎信息（条件渲染），而不是页面跳转。

两种实现都"说得通"，但逻辑完全不同。

更要命的是，它生成的代码没有任何报错，界面也能正常跑，你不仔细测试根本发现不了逻辑已经偏了。

局限2——生成的是原型，不是生产代码

这个坑更隐蔽，因为原型看起来"挺像那么回事"。

我检查了生成的代码，发现以下问题：

• 样式硬编码：所有尺寸都是固定像素值，在不同屏幕尺寸上会错位
• 无响应式适配：没有使用 Dimensions 或百分比布局
• 缺少错误处理：输入为空直接提交不会有任何提示
• 无障碍属性缺失：accessibilityLabel 全部没有
• 无状态管理：没有接入任何状态管理库，数据流是假的

这些问题在演示Demo时完全感知不到，但一旦想接入真实后端、上线发布，你会发现需要重写的部分比你以为的多得多。

⚠️ 重要提示：Claude生成的原型，定位是"可点击的设计稿"，而不是"可上线的产品代码"。混淆这两个概念，是最常见的错误期待。

---

第四章：可复用的操作方法论

踩完坑，我总结出了一套可以直接复制的Prompt结构。经过大约20次迭代测试，这个四段式模板是目前最稳定的版本：

四段式Prompt模板

## 草图描述
[简要说明草图内容，补充图片无法表达的信息]
例如：这是一个App登录页草图。图中包含：
顶部Logo区域（居中）
手机号输入框（带+86前缀）
密码输入框（带显示/隐藏切换）
主操作按钮"登录"
底部"没有账号？去注册"文字链接

设备环境
[明确目标平台和屏幕规格]
例如：iOS + Android 双端，目标适配 375pt 宽度，
使用安全区域（SafeAreaView）处理刘海屏。

技术栈
[指定框架和依赖，避免Claude自由发挥]
例如：React Native 0.73 + Expo SDK 50，
使用 @react-navigation/native 处理页面跳转，
不引入额外UI库，只用原生组件。

输出格式
[明确你要什么，不要什么]
例如：
输出完整的单文件组件（LoginScreen.tsx）
包含TypeScript类型定义
每个关键逻辑块加中文注释
不需要实现真实登录逻辑，按钮点击后调用 onLoginSuccess() 回调即可

这个模板的核心逻辑是：用文字填补草图的信息盲区，而不是让Claude去猜。

API批量处理：效率再翻倍

如果你有多张草图需要处理（比如一个App的多个页面），可以通过API方式批量调用，而不是一张一张手动上传。

文中演示的Prompt模板，我实际上是通过API方式调用Claude运行的。这样做有两个好处：一是可以写脚本批量处理，二是响应速度更稳定。

如果你也想跳过官网排队、用更稳定的方式接入Claude多模态能力，可以直接用 [api.884819.xyz](https://api.884819.xyz)，支持国内直连，按量计费，注册即送体验token，草图识别这类任务单次成本不到一毛钱。

一个简单的批量处理逻辑（伪代码示意）：

# 批量处理草图的基本思路
sketch_files = ["login.jpg", "home.jpg", "profile.jpg"]

for sketch in sketch_files:
image_data = encode_image(sketch)
prompt = build_prompt(sketch)  # 用四段式模板构建

response = claude_api.messages.create(
model="claude-sonnet-4-6",
messages=[{
"role": "user",
"content": [
{"type": "image", "source": {"type": "base64", "data": image_data}},
{"type": "text", "text": prompt}
]
}]
)

save_component(sketch, response.content)

三张草图批量处理，全程约2分钟，生成三个独立组件文件。

---

第五章：这个工作流，适合谁用？

不绕弯子，直接给判断标准。

你有一个界面想法，需要快速验证
│
▼
你有草图或描述吗？
├─ 有 ──→ 继续往下
└─ 没有 ──→ 先画草图（5分钟够了）
│
▼
你的目标是什么？
├─ 验证想法/给老板演示/用户访谈 ──→ ✅ 非常适合，直接用
├─ 快速出Demo/参加Hackathon ──→ ✅ 适合，注意补充交互说明
└─ 直接上线/交付生产代码 ──→ ❌ 不适合，需要专业开发
│
▼
你有技术背景吗？
├─ 有（能读懂代码）──→ 生成后自己迭代，效率极高
└─ 没有（产品/设计）──→ 生成后找开发同事review，
至少能大幅缩短沟通成本

用一句话总结适用场景：

---

结语

这次实验让我重新思考了"会画草图"这件事的价值。

以前，草图是设计师和开发之间的沟通媒介，需要经历"草图→线框图→视觉稿→开发实现"这条漫长的链路。现在，草图可以直接是产品验证的起点——中间那些步骤，至少在原型阶段，可以被压缩掉。

这不是"AI取代了谁"的故事。这是一个工具让更多人有能力验证自己的想法的故事。

---

这次实验结束后，我开始好奇一件事：如果草图换成截图呢？

把竞品App的界面截图丢给Claude，让它直接反向生成可编辑的代码——我下周会做这个实验。结果可能比你想的更有趣，也更危险。

毕竟，当"看一眼就能复刻"变成技术现实，这件事的边界在哪里，是个值得认真讨论的问题。

---

#AI教程 #Claude多模态 #产品原型 #草图转代码 #8848AI #React Native #AI实战 #Prompt技巧