每当杭城进入春天，小区里、公园内、马路两侧摇曳的各类花朵，总能让人感受到生活的美好，忍不住从内心泛起一阵愉悦。
所以一直有个想法：开发一个展示杭州春季花卉的小程序，记录这春日的美好。
但面对微信小程序的开发规范、页面UI设计美观要求、代码编写工作量等困难，总让人望而却步。
直到遇到了 OpenClaw， 配合 飞书 的交互和 Kimi2.5 的强大能力，仅用几天时间就帮我完成了这个夙愿。
本文将完整记录这个开发过程，展示 AI 如何改变传统的软件开发模式。
一、项目生成阶段：用自然语言描述想法
1.1 用飞书输入需求
我在飞书上向 OpenClaw 发送了第一条消息，输入我的需求：
"开发一个展示杭州春天的花卉和花期的网站，展示从春节以后开始到四五月份为止，这段时间内杭州市区道路和小区绿化中常见的各种花卉，包括梅花、玉兰花、紫荆花、桃花、郁金香、海棠、樱花、月季、杜鹃、蔷薇、绣球花等等。"
"花卉主页面大致根据这些花卉的开放时间顺序展示，每种花卉显示一个花卉本身的图片，同时有该花卉的描述信息展示，包括大致开花的时间区间，还有该花卉的形状特征，诸如花梗、花萼、花瓣、是先有叶还是先开花、花朵是否紧贴树枝等特征。"
"具体每种花卉的展示卡片，可以点击查看，如果该类花卉有多张花卉图片，就可以左右浏览点击的方式，展示该花卉的多张照片，也可以点击返回到花卉列表主页面。"
“相关花卉信息请自行联网搜集和整理，要求最终成果包括网站网页形态和微信小程序形态。
具体开发网页、微信小程序所需要的skills 请自行判断是否需要从网络上下载，如要下载请选择安全可靠的skill 站点。”
"我上传了一些花卉的照片在workspace/hangzhou-spring-flowers/flower_images目录下，请尽可能使用这些照片。"
1.2 OpenClaw生成过程
OpenClaw理解我输入的需求描述，会进行项目规划，并生成相应代码，其过程如下：
1.3 生成的项目结构
OpenClaw 自动生成了完整的小程序项目结构：
hangzhou-spring-flowers/
├── index.html # Web 预览版本
└── wechat-miniprogram/
├── app.js # 全局数据和配置
├── app.json # 小程序配置
├── app.wxss # 全局样式
├── sitemap.json # 站点地图
└── pages/
├── index/ # 首页
├── index.wxml # 页面结构
├── index.wxss # 页面样式
└── index.js # 页面逻辑
核心代码示例，app.js 中的花卉数据定义：
App({
globalData: {
flowers: [
{
id: 'meihua',
name: '梅花',
scientificName: 'Prunus mume',
bloomTime: '2月-3月上旬',
periodName: '早春二月',
sortOrder: 1,
images: [
'/flower_images/梅花/美人梅IMG_8711.JPG',
'/flower_images/梅花/美人梅IMG_8713.JPG'
], description: '梅花是杭州市早春最早开放的花卉之一...',
features: {
petal: '5片，单瓣或重瓣，有红、粉、白等色...',
stalk: '花梗极短，花朵紧贴枝干生长',
calyx: '花萼5-6片，绿色或红褐色',
leafOrder: '先花后叶，开花时无叶...',
position: '单生或2朵并生，贴枝开放',
characteristic: '香气浓郁，寒冬中绽放...'
},
locations: ['杭州植物园', '超山', '灵峰探梅'],
tips: '美人梅是梅花的园艺品种...'
},
// ... 更多花卉数据
]
}
})
二、编译调试阶段：错误排查与修复
2.1 第一次编译错误
我把OpenClaw生成的项目结构和代码，导入微信小程序开发工具，编译报错如下：
OpenClaw应对如下：
2.2 第二次编译错误
增加详情页相关文件后，重新编译，遇到第二个错误：
[ app.json 文件内容错误] app.json: ["tabBar"]["list"] must contain at least 2 items
OpenClaw应对如下：
三、UI 优化阶段：从"能用"到"好看"
3.1 第一轮优化：首页布局和配色风格
在飞书输入优化需求和截图：
"以下首页截图中顶部“杭州春日花语”区域上面有大片蓝色背景空白，同时“杭州春日花语”这个标题区域宽度和下面具体花卉列表也没有对齐，看起来很不协调，整体配色风格有点土，看看怎么更美观一点。"
OpenClaw 应对如下：
收到了！我来优化小程序的首页设计，解决这些问题：顶部蓝色空白过多标题区域与下方内容宽度不对齐整体配色风格优化让我先查看当前的样式文件：我看到了问题。现在来优化设计：顶部空白问题：标题区域有独立背景，与页面渐变背景不协调宽度对齐问题：标题区域和列表区域padding不一致配色优化：采用更清新自然的春季配色方案搞定！✅ 已优化首页设计。主要改进：消除顶部空白移除了标题区域与页面背景的分割采用统一的渐变绿色背景，从顶部自然过渡宽度对齐标题区域和花卉列表统一使用 30rpx 的左右padding整体视觉更加协调一致配色升级 - 清新春季风格主色调：森林绿 #2e7d32 → 嫩芽绿 #81c784背景：淡绿色渐变，营造春日氛围卡片：白色底 + 淡绿边框，清新自然标签：浅绿背景 + 深绿文字细节优化标题添加装饰线条和图标，更有设计感图片添加张数提示角标特征描述改为左侧边框标签样式箭头改为圆形绿色按钮底部改为圆角卡片样式现在整体风格清新自然，更符合"春日花语"的主题。可以重新编译看看效果！
3.2 第二轮优化：首页继续完善
在飞书输入优化需求和截图：
"编译后效果如下图，确实改成清新春季风格了，但是“杭州春日花语”这个头部区域的上面，为什么还是有一大段空白呢？能去掉吗？而且这个头部区域的宽度还是和下面“花卉列表”区域不一样啊，左右两边明显和下面列表没对齐啊"
OpenClaw 应对如下：
看到了！问题有两个：顶部还有空白 - 这是微信小程序的导航栏区域宽度不对齐 - 头部区域和列表区域的边距不一致让我修复这两个问题：搞定！✅ 已修复两个问题：1. 消除顶部空白在 app.json 中设置 "navigationStyle": "custom"，使用自定义导航栏导航栏背景色改为淡绿色 #c8e6c9，与页面融为一体移除了系统默认导航栏造成的空白2. 统一宽度对齐头部区域和花卉列表统一使用 30rpx 的左右padding所有卡片的边距一致，视觉对齐其他优化：添加了自定义导航栏（显示"杭州春日花语"）缩小了标题字号（40rpx），更协调调整了各元素的间距，更紧凑现在顶部应该没有多余空白了，而且头部和列表区域宽度对齐。可以重新编译看看效果！
经过两轮沟通优化完善后，首页效果如下，完全达到预期：
3.3 第三轮优化：详情页布局
在飞书输入优化需求和截图：
"具体的花卉详情页面中，以这个梅花为例，如图也是顶部有大片的多余空白，同时具体花卉图片下方的“花卉基本信息区域”，也是宽度和更下方的“花卉描述区域”没有对齐，看起来很凌乱，请相应优化。"
OpenClaw 应对如下：
收到了！我来优化详情页的设计，解决：顶部多余空白各区域宽度不对齐的问题现在我来优化详情页，统一采用和首页一致的清新春季风格，并解决对齐问题：搞定！✅ 已优化详情页设计。主要改进：消除顶部空白图片区域与页面背景融为一体添加"点击图片可放大查看"提示图片指示器改为底部绿色标签统一宽度对齐所有内容卡片统一使用 30rpx 左右padding采用卡片式布局，视觉层次清晰每个区块独立成卡，间距一致配色升级 - 与首页统一主色调：森林绿 #2e7d32 + 嫩芽绿 #81c784背景：淡绿色渐变卡片：白色底 + 淡绿边框布局优化基本信息区：整合花名、学名、花期，带绿色图标形态特征：改为网格卡片布局，6宫格展示，更直观观赏地点：改为列表样式，带绿色圆点小贴士：改为浅黄色背景，突出显示细节提升卡片标题带图标，更易识别特征网格采用2列布局，"主要特征"占满宽度返回按钮改为圆角绿色按钮，带箭头图标现在详情页和首页风格统一，视觉更协调。可以重新编译看看效果！
openclaw不仅响应我的修改要求，还自动继承首页的淡绿色渐变风格，经过修改后，详情页效果如下，超出预期：
最终完整小程序如下：
四、开发过程总结
4.1 我的角色
在整个开发过程中，我只需要通过飞书做三件事：
- 描述需求 - 用自然语言告诉 AI 我想要什么
- 反馈问题 - 截图或复制错误信息给 AI
- 确认效果 - 在开发者工具中预览，提出修改意见
4.2 AI 的角色
OpenClaw + Kimi2.5 承担了所有技术工作：
- 1. 架构设计 - 设计小程序的页面结构和数据模型
- 2. 代码生成 - 编写 WXML、WXSS、JS 代码
- 3. 错误修复 - 分析编译错误并自动修复
- 4. UI 优化 - 根据反馈调整布局和配色
4.3 传统开发 vs AI 开发对比
| 环节 | 传统开发 | AI 开发 |
|---|---|---|
| 需求沟通 | 需要写 PRD 文档 | 自然语言对话 |
| 技术选型 | 需要了解技术栈 | AI 自动选择 |
| 代码编写 | 手动编写数百行代码 | AI 自动生成 |
| 调试排错 | 逐行排查错误 | AI 自动分析修复 |
| UI 设计 | 需要设计稿 | AI 根据描述生成 |
| 总耗时 | 1-2 周 | 1 天 |
五、最后一公里：发布上线
虽然 OpenClaw 完成了 90% 的开发工作，但最后 10% 的发布环节仍需要人工操作：
5.1 准备工作
- 注册小程序账号 - 在微信公众平台注册，填写名称、图标、简介等信息
- 完成小程序备案 - 提交工信部备案
- 配置服务器域名 - 如果使用外部图片资源
5.2 上传代码、提交审核、发布
1. 在微信开发者工具中点击「上传」，并填写版本号和项目备注 2. 在公众平台提交审核，等待微信官方审核（通常 1-3 个工作日） 3. 审核通过后发布上线
六、结语
通过这次实践，我深刻感受到 AI 正在降低软件开发的门槛。一个不懂代码、不会设计的非技术人员，也能在几天内完成一个小程序的开发。
这不仅是技术的进步，更是生产关系的变革。未来，"想法"将比"技能"更重要，"描述"将比"编写"更高效。
OpenClaw ：腾讯轻量云服务器 2核2G
大模型：Provider是阿里云百炼Coding Plan ，具体模型是 Kimi 2.5
渠道：飞书机器人
开发周期： 1 天
代码量： 约 2000 行（全部由 AI 生成）
本系列说明：在这个系列中教你打造24小时在线的AI员工OpenClaw，掌握Claude Code的开源替代OpenCode，从Coding Agent到更加通用的终端Local AI Agent进行架构剖析和对比，并描述相应实战案例过程。
—End—
本文作者：木昆子
本文原载：公众号“木昆子记录AI”
