Flutter Vibe Coding

这篇文章是(我自己和 Prathap 在 NammaFlutter 一周年活动上)演讲的简短笔记。 PPT 链接:drive.google.com/file/d/1OzR...

开始"Vibe coding"设置:

1. 安装 VSCode,并设置一个空的 Flutter 项目。

2. 在 VSCode 扩展中安装 Roo code。

3. 登录OpenRouter

3.1:导航到模型(models)部分,使用左侧菜单上的滑块找到免费模型。请确保在左侧选择提示定价(prompt pricing)。你也可以按"本周热门"(Top Weekly)排序来找到最佳模型。

3.2: 随便选择你喜欢的model. 创建并复制API Key。

3.3: 在VsCode中打开Open Roo Code并打开设置

3.4:创建新的配置配置文件,或编辑默认配置文件。然后,将 API 提供商(API Provider)设置为 OpenRouter,并将 API 密钥粘贴到 API 密钥(API key)部分。最后,选择任何你想使用的免费模型(免费模型将带有":free"后缀)。

3.5:点击"保存",然后在提示文本字段中输入任何内容,检查一切是否正常运行。

4. 使用以下指南安装这个 Figma MCP

4.1:在 Roo code 中点击"MCP 服务器"(MCP Servers),然后...

4.2: 点击 "Edit Global MCP" 并像下面一样配置

需要为 MCP 服务器创建一个 Figma 密钥

在此处生成访问令牌/API 密钥:

help.figma.com/hc/en-us/ar...

4.4 配置完成后,检查 RooCode 中是否已启用 Figma MCP。

接着,大功告成 🚀!你现在已经配置好你的 IDE,可以使用 Flutter 进行"Vibe Coding"了。可以尝试这样的提示词:

"使用 figma mcp 在 flutter 中实现这个 figma 设计'你的 figma 链接'"。

你可以在 glama.ai/mcp/servers 找到可用的 MCP 服务器列表。

相关推荐
namekong819 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天20 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄1 天前
HTML 表单控件
前端·microsoft·html
学习笔记1011 天前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19431 天前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧1 天前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台1 天前
海龟交易系统R
前端·人工智能·r语言
歪歪1001 天前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc1 天前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅1 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学