让AI写页面

会说话，就会写页面

📖知识引入

💬描述越具体越好

别说「做个好看的页面」，要说「记账本首页：顶部显示总金额，中间是账目列表，底部一个绿色圆形加号按钮」。AI听懂需求才能写对代码。

🧩提供上下文

告诉AI：我在做微信小程序、页面文件是index.wxml、要配WXSS样式。上下文越足，代码越能直接用。

🔄小步快跑

一次让AI写一个模块：先写顶部标题区，再写列表，最后写按钮。比一口气要整页代码效果好得多。

🧾逐段检查粘贴

AI的代码粘贴前扫一眼结构，运行报错就把红色报错原样发回去让AI修——这就是和AI结对编程。

🎨迭代微调

「标题字号大一点」「卡片加圆角」「按钮换成微信绿」——像点菜一样提修改意见，页面越调越精致。

💡

AI协作三字诀：说清楚、小步走、报错贴回去！

🔍一次真实的AI对话

<!-- AI根据需求生成的首页代码 -->
<view class="page">
  <view class="header">
    <text class="total">本月支出 ¥{{total}}</text>
  </view>
  <view class="list">
    <view class="item" wx:for="{{bills}}">
      <text>{{item.name}}</text>
      <text>-{{item.money}}</text>
    </view>
  </view>
  <view class="fab" bindtap="add">＋</view>
</view>

你：我在做微信小程序记账本，请帮我写首页WXML：顶部显示总金额，中间账目列表（每条含名称和金额），底部绿色圆形+按钮。

AI：好的，已生成代码👇 （贴进index.wxml就能用）

你：列表太挤了，每条之间加分隔线和间距。

AI：已调整样式如下…

你：粘贴到开发者工具 │ ▼ ✅ 页面跑起来了！

你=导演，负责说戏； AI=演员，负责写戏。导演说得越具体，戏演得越好！

🎯小测验

第1题：让AI写页面时，哪种描述效果最好？

第2题：AI代码运行报错了，正确做法是？

第3题：和AI协作开发的好习惯是？

📝本课知识点

✓需求描述具体，代码一次到位
✓告诉AI你的项目上下文
✓一次一个模块，小步快跑
✓报错原样贴给AI修复
✓像点菜一样迭代微调样式

第10课完成！继续探索下一课吧 🚀

🧱

上一课

第9课

下一课

第11课

🧱