环境安装
安装 iFlow
丝滑安装 iFlow
# 一键安装脚本，会安装全部所需依赖
bash -c "$(curl -fsSL https://gitee.com/iflow-ai/iflow-cli/raw/main/install.sh)"
安装高德 mcp server
进入心流开放市场，搜索高德 mcp server，填写自己的 apikey
复制命令，终端执行，一键安装，比自己配置要快很多，点赞
技术实现
开始干活
创建工作目录，在工作目录中启动
# 创建项目工作目录
mkdir iflow-food-map
# 进入工作目录
cd iflow-food-map
# 启动 iflow
iflow
根据提示，查看已加载的 mcpserver，可以看到高德 mcpserver 已成功加载
prompt工程
餐厅数据源
这里重点关注技术实现，餐厅数据源让 AI 自己生成了一份餐厅列表
美食地图 Prompt
有了餐厅列表，就可以开始构建美食地图的提示词了
1. 在当前文件夹下进行编写项目，尽量少的创建文件，只创建必要文件。
2. 根据给定的杭州推荐的美食店，制作一份可以预览的美食地图。最终的产物使用便捷的方式呈现，如使用html进行展示。
3. 地图上标注下面每个店铺精确的位置，为每个类型的餐厅用不同的合适的图标表示。
4. 地图采用真实的杭州市地图。
5. 点击图标可显示餐厅更多信息，餐厅图片，人均花费，餐厅优势，预约电话，推荐指数等。
6. 过程中可以借助任何工具和能力实现这一目标，如 高德MCP工具。
7. 展示的店铺已给定的为准，最终给出的数据要真实可靠。
8.将下列数据，通过amp-amp-sse 的 mcpserver，制作成适配高德地图的 json 格式数据。若没有找到餐厅，不要编造数据，坐标字段设为空值即可。
餐厅数据如下：
一、杭帮菜（10家）
序号 餐厅名称 类型 推荐理由 星级
1 楼外楼（孤山路店） 杭帮菜 百年老字号，西湖醋鱼、龙井虾仁必尝，坐拥湖景 ⭐️⭐️⭐️⭐️⭐️
2 知味观·味庄（杨公堤店） 杭帮菜 米其林推荐，传统与创新结合，宴请首选 ⭐️⭐️⭐️⭐️⭐️
3 解香楼（湖滨店） 杭帮菜 黑珍珠三钻，新派杭帮菜代表，摆盘惊艳 ⭐️⭐️⭐️⭐️⭐️
4 桂语山房 杭帮菜 黑珍珠三钻，禅意空间，食材高级，仪式感强 ⭐️⭐️⭐️⭐️⭐️
5 金沙厅（西子湖四季酒店） 杭帮菜 黑珍珠三钻，国宴水准，龙井茶香鸡封神 ⭐️⭐️⭐️⭐️⭐️
6 福缘居 杭帮菜 老杭州私藏，脆皮大肠、卤鸭地道市井味 ⭐️⭐️⭐️⭐️
7 张生记（黄龙店） 杭帮菜 东坡肉软糯入味，汤羹讲究，家庭聚餐佳选 ⭐️⭐️⭐️⭐️
8 新白鹿餐厅 杭帮菜 性价比高，油爆虾、蛋黄南瓜常年排队 ⭐️⭐️⭐️⭐️
9 外婆家 杭帮菜 平价经典，麻婆豆腐、茶香鸡广受好评 ⭐️⭐️⭐️⭐️
10 江南驿（西湖天地） 杭帮菜 环境文艺，创意菜融合江南风味 ⭐️⭐️⭐️⭐️
二、黑珍珠餐厅（补充非重复，共8家）
| 11 | 湖畔居·紫薇厅 | 黑珍珠 | 湖景包厢，高端杭帮宴请，服务周到 | ⭐️⭐️⭐️⭐️ |
| 12 | 玲珑餐厅 | 黑珍珠 | 创意杭帮菜，主厨有米其林背景 | ⭐️⭐️⭐️⭐️ |
| 13 | 暖暖·Lavande | 黑珍珠 | 家常升级，温暖氛围，适合小聚 | ⭐️⭐️⭐️⭐️ |
| 14 | 晓风·食集（西溪） | 黑珍珠 | 江南小院风格，食材时令性强 | ⭐️⭐️⭐️⭐️ |
| 15 | 四季酒店·金沙府 | 黑珍珠 | 粤菜+杭帮融合，商务宴请优选 | ⭐️⭐️⭐️⭐️ |
| 16 | 法云安缦·兰轩 | 黑珍珠 | 隐世禅意餐厅，素食与本味料理 | ⭐️⭐️⭐️⭐️ |
| 17 | 颐舍·中餐厅（临安） | 黑珍珠 | 山野杭帮菜，原生态食材 | ⭐️⭐️⭐️⭐️ |
| 18 | 玲珑·小馆 | 黑珍珠 | 金沙厅副线，价格亲民，品质在线 | ⭐️⭐️⭐️⭐️ |
三、火锅（6家）
| 19 | 巴奴毛肚火锅（万象城） | 火锅 | 毛肚现切，菌汤锅底鲜，服务专业 | ⭐️⭐️⭐️⭐️ |
| 20 | 海底捞（湖滨银泰） | 火锅 | 服务天花板，番茄锅+拉面表演 | ⭐️⭐️⭐️⭐️ |
| 21 | 周师兄大刀腰片（武林店） | 火锅 | 重庆风味，辣而不燥，腰片厚实 | ⭐️⭐️⭐️⭐️ |
| 22 | 朱光玉火锅馆 | 火锅 | 川渝人气品牌，红油锅香浓 | ⭐️⭐️⭐️⭐️ |
| 23 | 蜀大侠（西湖文化广场） | 火锅 | 武侠风主题，菜品有趣 | ⭐️⭐️⭐️⭐️ |
| 24 | 花桃里·云南酸菜牛肉火锅 | 火锅 | 小众但惊艳，酸汤开胃，牛肉嫩 | ⭐️⭐️⭐️⭐️ |
四、日料（6家）
| 25 | 和八亭（嘉里中心） | 日料 | 高端Omakase，食材空运，主厨严谨 | ⭐️⭐️⭐️⭐️ |
| 26 | 寿司郎（湖滨in77） | 日料 | 性价比回转寿司，新鲜度高 | ⭐️⭐️⭐️⭐️ |
| 27 | 渡·铁板烧（西湖银泰） | 日料 | 铁板烧现场烹饪，互动感强 | ⭐️⭐️⭐️⭐️ |
| 28 | 京味斋（日式中华料理） | 日料 | 融合风格，炸酱面寿司创意十足 | ⭐️⭐️⭐️⭐️ |
| 29 | 鮨一（南山路） | 日料 | 小而美Omakase，预约制 | ⭐️⭐️⭐️⭐️ |
| 30 | 隐寿司（西溪印象城） | 日料 | 环境安静，刺身拼盘品质稳定 | ⭐️⭐️⭐️⭐️ |
五、川菜（5家）
| 31 | 川味观 | 川菜 | 杭州老牌川菜馆，水煮鱼、夫妻肺片正宗 | ⭐️⭐️⭐️⭐️ |
| 32 | 老成都（文二西路） | 川菜 | 本地人认可，麻辣鲜香不输成都 | ⭐️⭐️⭐️⭐️ |
| 33 | 巴蜀大宅门 | 川菜 | 场景还原四川老宅，毛血旺一绝 | ⭐️⭐️⭐️⭐️ |
| 34 | 蜀九香火锅（非火锅类川菜也优） | 川菜 | 凉菜和小吃地道 | ⭐️⭐️⭐️⭐️ |
| 35 | 辣府（湖滨店） | 川菜 | 年轻人喜爱，辣得过瘾，氛围热闹 | ⭐️⭐️⭐️⭐️ |
六、咖啡馆（8家）
| 36 | % Arabica（西湖断桥店） | 咖啡 | 湖景view，极简风，拿铁醇厚 | ⭐️⭐️⭐️⭐️ |
| 37 | M Stand（湖滨in77） | 咖啡 | 创意特调，燕麦拿铁受欢迎 | ⭐️⭐️⭐️⭐️ |
| 38 | Seesaw Coffee（嘉里中心） | 咖啡 | 豆单丰富，手冲专业 | ⭐️⭐️⭐️⭐️ |
| 39 | 豆柴（小河直街） | 咖啡 | 文艺社区小店，猫+咖啡治愈系 | ⭐️⭐️⭐️⭐️ |
| 40 | 有意思咖啡（玉古路） | 咖啡 | 学术氛围浓，学生党聚集地 | ⭐️⭐️⭐️⭐️ |
| 41 | 荒岛咖啡（宝石山） | 咖啡 | 山顶view绝佳，适合发呆拍照 | ⭐️⭐️⭐️⭐️ |
| 42 | 伏见桃山（南宋御街） | 咖啡 | 国风设计，抹茶拿铁有特色 | ⭐️⭐️⭐️⭐️ |
| 43 | LAVAZZA（湖滨银泰） | 咖啡 | 意大利品牌，奶咖顺滑 | ⭐️⭐️⭐️⭐️ |
七、甜品/烘焙/下午茶（7家）
| 44 | Baker&Spice（万象城） | 甜点 | 英式烘焙，司康、柠檬挞经典 | ⭐️⭐️⭐️⭐️ |
| 45 | Lady M（湖滨in77） | 甜点 | 千层蛋糕王者，口感细腻 | ⭐️⭐️⭐️⭐️ |
| 46 | 法根糕点（拱墅店） | 甜点 | 杭州非遗，荷花酥、绿豆糕地道 | ⭐️⭐️⭐️⭐️ |
| 47 | 幸荟·甜品研究所 | 甜点 | 创意中式甜品，桂花酒酿布丁惊艳 | ⭐️⭐️⭐️⭐️ |
| 48 | 面包好了（大学路） | 甜点 | 网红草莓熊面包，少女心爆棚 | ⭐️⭐️⭐️⭐️ |
| 49 | 甜觅蜜（西溪天堂） | 甜点 | 法式甜点，马卡龙色彩缤纷 | ⭐️⭐️⭐️⭐️ |
| 50 | 知味观·幸福双 | 甜点 | 杭州经典小吃，猫耳朵、幸福双必试 | ⭐️⭐️⭐️⭐️ |
✅ 总结说明：
● ⭐️⭐️⭐️⭐️⭐️（5星）：顶级体验，值得专程前往
● ⭐️⭐️⭐️⭐️（4星）：稳定出品，适合日常聚餐
● ⭐️⭐️⭐️（3星）：基础合格，未列入本榜单
iFlow 执行过程
iFlow 你在干什么啊喂！干活干着怎么跑去吃火锅了！给我留两口…
mcp 调用
可以看到 iFlow 在完成给它的任务时，会自己调用高德 mcpserver 选择合适的工具，获取信息。这里的步骤是先调用 maps_text_search 查询 prompt 中餐厅的名字，获取候选的餐厅列表。
再选择最合适的一个餐厅，通过 id，查询餐厅的详细信息，获取餐厅的照片、营业时间、评分等信息。
数据补充
生成完后，发现有的餐厅信息不完整，和 iFlow 进一步交互，让它再补充一下餐厅信息
在提示下，iFlow 很好的完成了任务。
第一版界面
在补充完数据后，就可以直接打开生成的 html 文件了，完成度相对还是还可以的。再补充一下图例和筛选功能。
再次给到iFlow 一句话需求
图标有点大，尺寸调小一点。页面左上角增加图例，右上角增加一个筛选项。
于是，简单粗暴的增加了图例和筛选项，好吧，任务的确完成了。
但是这也太丑了，且筛选功能太简陋。
AI：就说实现没实现吧，真实现了又不乐意 →_→。
我：呃。我的我的。我重新组织一下我的语言。orz
优化后页面
经过prompt优化后，整体就变成了下面这个样子。
这里一点思考是，当前的AI更倾向于在最简和最短路径下做到你交给它的任务，而忽略产出的数据和代码是否正确，是否能真的能运行起来。
要解决该问题，prompt的设计一定要是任务目标明确，步骤具体，指标量化，边界清晰的，AI 交的作业才会较好，这其实是对用户就会有更高的要求。
当然从 Agent 发展的角度上，Agent 也一定会变得更智能，能够深入的理解用户的需求，或者采用多轮交互的方式来挖掘出用户真正的需求，确保交的作业能符合用户预期。
未来的 Agent，可能真的可以解决程序员最头疼的 “一句话需求” 问题。
服务发布
可不能孤芳自赏，要分享给大家一起看看~
通过 code 平台提供的静态页面部署能力可以很方便的部署静态网站用于展示，十分便捷好用。
创建自己的代码仓库
https://code.alibaba-inc.com/projects/new
初始化项目仓库
在终端里执行
cd iflow-food-map
git init
git remote add origin git@gitlab.alibaba-inc.com:xusheng.xu/iflow-food-map.git
git add .
git commit
git push -u origin `git branch --show-current`
让 iFlow 总结一下当前代码仓库，写一个 README
发布静态页面
本次生成的代码比较简单，不需要进行构建，可以直接放到 build 目录里，如果前端工程需要构建，可以参考 快速上手。
构建发布配置
调整一下项目结构，将需要发布的静态资源移到 build 目录下即可。
配置站点
在 code 仓库里的设置 tab 下，选择 pages，填写站点名称接口。如果自己有域名的话，可以填写自己的域名。
Aone CI 自动部署
构建 deploy-pages.yaml 文件,放到.aoneci 目录下，推送该 Aone CI 配置文件到代码仓库，Aone CI 会自动触发部署。
name: deploy-pages
triggers:
push:
jobs:
deploy:
image: alios-8u
steps:
- uses: checkout # 下载代码
- uses: deploy-pages # 部署到Aone Pages
inputs:
deploy-dir: build/ # 构建后的静态资源目录
production-branch: main # 触发部署[正式版本]的分支，否则为[预览版本]
访问站点
自动化部署成功后，站点就可以对外访问了
以后如果有手机端直接在app上做可能会更方便 