Vibecoding 操作指导

从零开始，9 步学会用自然语言创造自己的应用

全流程一览

跟着这 9 步走，你将从一句话变成一个完整可用的数据应用

1新建应用
→
2编写需求
→
3实时预览
→
4截屏调试
→
5整理提示词
→
6关联数据
→
7调用技能
→
8身份认证
→
9发布应用
1

新建应用

点击「📦 新建应用」，填写四项信息即可开始

①
应用名称 — 给你的应用起一个名字，比如"销售数据看板"
②
选择图标 — 从内置图标库挑选一个，方便识别
③
关联数据源（可选）— 如果应用需要读写数据，选择你的 Excel 文件。平台会自动探查表结构、字段名和样本数据
④
功能描述 — 用自然语言写下你想要什么功能。比如：
"做一个销售数据看板，左侧柱状图展示月度销售额，右侧饼图展示各区域占比，底部表格展示明细"
💡 小贴士：已有需求文档（Word / Markdown）？直接导入即可，不用重新写。

点击「创建并开始」，AI 即刻生成完整应用代码，几秒钟后你就能在预览面板看到效果。

新建应用向导
2

编写需求 — 提示词就是源代码

你写的每一句需求描述，就是应用的"源代码"

在 meefoClaw 中，不存在传统意义上的"代码"。你的应用由一份提示词文件驱动，它完整记录了应用从 0 到 1 的需求演进。

📝
增量追加 — 每次迭代，新需求自动追加到提示词末尾。你只需在聊天区输入"加一个导出按钮"，AI 会理解整个上下文再做修改
✏️
随时编辑 — 点击顶栏的提示词按钮，打开弹窗直接修改任何需求描述，点击「重新生成」即可刷新应用
🔒
版本安全 — 每次修改前自动备份，永不丢失历史版本
💡 核心理念：传统开发中，需求文档和代码是分离的。在 meefoClaw 中，提示词就是需求，需求就是代码，所见即所得。
提示词编辑弹窗
聊天区输入需求
3

实时预览

AI 生成的应用在内置面板中即时渲染，所见即所得

每次 AI 回复后，预览面板自动刷新。你可以直接看到生成的应用效果 —— 图表、表格、按钮、交互，全部实时渲染。

⚡
热刷新 — 修改需求后，预览面板自动更新，不需要手动刷新
📊
图表开箱即用 — ECharts、Chart.js 等图表库已预装，AI 直接使用，你无需配置
🌐
独立运行 — 应用支持在浏览器中独立访问，不必一直打开 meefoClaw
聊天+预览整体布局
4

截屏标注 + 智能调试 核心亮点

不懂代码也能精准指导 AI 修问题 —— 这是 meefoClaw 与其他 Vibe Coding 的最大区别

⚠️ 调试是所有 Vibe Coding 平台的硬伤
AI 生成的应用一运行就出错 → AI 自己猜哪里错了 → 反复修改越改越乱 → 小白用户完全无法介入。
meefoClaw 的答案：让你不懂代码也能精准指导 AI。

操作步骤

截屏标注界面
📷
一键截屏 — 点击截屏按钮，自动捕获当前预览页面
🖊️
矩形框标注 — 用红色矩形框圈出有问题的区域
✏️
文字标注 — 在图上用红色文字直接标注说明
📎
添加到聊天 — 点击「📎 添加到聊天」，截图自动成为聊天附件
💬
输入问题 — 在聊天输入框描述你看到的问题，连同截图一起发送

为什么 meefoClaw 的调试更靠谱？

📸
截图标注
你圈出"哪里不对"
+
💬
你的描述
"这个按钮点了没反应"
+
🤖
自动错误日志
平台自动捕获的精确报错
=
AI 一次修对
💡 自动错误捕获：应用运行时发生的任何异常（页面崩溃、数据加载失败、按钮无响应）都会被平台自动采集。截屏提交时，这些错误信息会自动随截图一起发送给 AI。你不需要知道"报错原因是什么"，只需要知道"哪里不对"。
截图附件预览
错误徽章自动捕获

调试场景举例

你做的（零专业知识） AI 做的
看到界面不对 → 截图圈出来 结合截图 + 自动捕获的错误日志，精准定位问题
"这个按钮点了没反应" 分析错误日志中对应的异常，修复交互逻辑
"数据显示不对，应该是销售额不是数量" 检查数据查询逻辑，修正字段映射
"加载很慢" 分析性能瓶颈，优化数据请求方式
5

AI 智能整理提示词

经过多轮迭代后，一键让 AI 帮你整理需求文档

在反复调试和修改之后，提示词文件可能积累了大量调试讨论、重复修改、冗余描述。点击「✨ AI 整理」：

🧹
AI 自动阅读完整提示词历史 + 当前应用代码
✂️
删除调试过程、错误修复讨论、重复的修改指令
📋
同一功能有多次修改时，只保留最终版本
📄
输出一份干净、完整、结构化的功能需求文档
💡 什么时候整理？当你觉得提示词变得又长又乱、AI 开始"记不清"之前的需求时，就是整理的好时机。整理前原始内容会自动备份，安全无忧。
整理前 - 又长又乱的提示词
整理后 - 干净结构化的提示词
6

关联数据源

让你的应用与真实业务数据无缝打通

在新建应用时选择数据源，或在已有应用中通过配置页面添加。平台自动获取真实的表名、字段名和样本数据，AI 生成的应用 100% 匹配你的数据结构。

支持的操作

操作 说明
列出数据源 查看所有已配置的数据源
浏览表结构 查看表/Sheet 名、字段名和类型
查询数据 灵活查询，支持筛选、排序、聚合
新增 / 更新 / 删除 完整的增删改能力
同步回写 一键将修改同步回 Excel 文件
💡 智能暂存：所有写操作先暂存在本地，确认无误后一键同步回写。数据安全可控，读写响应毫秒级。
数据源配置页
数据源选择与表结构探查
真实数据展示效果
7

调用技能 — 扩展 AI 的边界

内置技能市场，让你的应用具备超越对话的行动能力

你的应用需要抓取网站数据？需要生成设计图？需要识别图片内容？只需在需求中提到，AI 自动选择合适的技能完成任务。

🌐
web-agent — 浏览器自动化：访问网页、登录、截图、爬取数据
🖼️
image-gen — AI 图片生成与编辑，直接调用文生图完成 UI 设计和配图
👁️
image-reader — 图片内容识别与分析
📑
pdf-ocr — PDF 文档文字提取
💡 使用场景："抓取XX网站的最新价格数据，做成表格展示" —— AI 自动调用 web-agent 浏览器技能完成，你无需关心底层实现。
技能市场列表
技能调用效果
8

身份认证 — 一句话给应用加登录

内置登录组件，无需设计用户体系，AI 帮你搞定权限控制

当你的应用需要区分用户身份、保护敏感数据时，只需在需求中提一句，比如：

"加个登录功能，只有 admin 和 manager 能访问报表页面"
🔐
内置登录弹窗 — 平台提供统一的登录界面，AI 直接调用，风格一致、安全可靠
👥
用户管理 — 支持添加用户、设置密码、分配角色，在应用配置页面直接管理
🛡️
权限控制 — 根据用户角色显示不同内容，管理员看全部，普通用户看自己的数据
💡 小贴士：不需要所有应用都加登录。如果只是自己用的数据看板，跳过这一步即可。需要多人使用或保护数据时再添加。
内置登录弹窗
用户管理页面
9

发布应用 🎉

调试完成，正式发布，让更多人用上你的应用

经过前面的创建、调试、整理，你的应用已经趋于完善。现在可以正式发布，让同事或团队成员直接使用。

✅
发布前检查 — 确认应用功能正常、数据展示正确、交互无异常。建议做一次「✨ AI 整理」让提示词保持干净
🌐
独立访问模式 — 发布后的应用可以在浏览器中独立访问，不需要打开 meefoClaw 主界面
🔗
分享链接 — 将应用访问地址发给团队成员，即可直接使用
🔄
持续迭代 — 发布后仍可随时回到 meefoClaw 继续修改需求，更新后自动生效
💡 完整流程回顾：新建应用 → 编写需求 → 实时预览 → 截屏调试 → 整理提示词 → 关联数据 → 调用技能 → 身份认证 → 发布应用。整个过程无需编程知识，你的每一句需求描述就是应用的源代码。
应用发布界面
分享链接与独立访问

最佳实践

来自真实用户的经验总结

🎯

需求写清楚

描述越具体，AI 生成越精准。比起"做个好看的页面"，不如说"左侧柱状图展示月度销售额，蓝色主题"

📸

多用截图标注

看到不对的地方就截图圈出来，比用文字描述 UI 问题准确 10 倍

🧹

定期整理提示词

迭代 5-10 轮后及时整理。干净的提示词 = AI 理解更准 = 后续修改更顺

📊

先关联数据再开发

新建应用时就选好数据源，AI 能直接用真实字段名生成代码，省去后续调整

🔄

小步迭代

不要一次写太多需求。先完成核心功能，确认效果后再逐步添加，更容易调试

💾

善用备份

大改之前先整理一次提示词。万一新需求把应用改坏了，可以快速回退到整理后的版本

准备好了吗？现在就开始！

下载 meefoClaw，用你的第一句话创造第一个应用

⬇ 免费下载