Flutter 使用 Cursor 和 Figma 快速天生界面代码
Flutter 使用 Cursor 和 Figma 快速天生界面代码https://i-blog.csdnimg.cn/img_convert/355219a6dc725e76c516ce6214488da8.png
视频
https://youtu.be/ODhxdC2KnUg
https://www.bilibili.com/video/BV1WimRY9E81/
前言
原文 怎样在Flutter中利用Cursor和Figma高效天生UI代码
本文先容怎样通过Cursor和Figma工具快速天生Flutter界面代码，提升开发效率，得当Flutter开发者和UI设计师阅读。
参考
[*]cursor 文档
[*]Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
[*]猫哥 flutter 焦点库 ducafe_ui_core
步调
安装 figma to code 插件
https://i-blog.csdnimg.cn/img_convert/4ae10fd20d86d81ca0046346dcab19a8.png
https://www.figma.com/community/plugin/842128343887142055/figma-to-code-html-tailwind-flutter-swiftui
我的 figma 账号是 free 免费范例，能正常使用这个插件。
设置 curosr
[*]打开你的业务代码
我这里是 woo2025 ，当然你的业务代码需要规范整齐，这样才得当 ai 帮你天生靠谱的代码。
[*]codebase 建立索引
之后可以用指令 @cosebase 来询问 ai , 检索整个项目。
https://i-blog.csdnimg.cn/img_convert/8339aa5fb0e7aa9fff742ae2ca78fdb3.png
[*]compose 面板放在右侧栏
整理你的打码空间
https://i-blog.csdnimg.cn/img_convert/53662213c3b46666a4a230b48afd57b3.png
[*]加文档库
之后可以用指令 @doc 来询问 ai ，关于组件的使用帮助，加快实行速率。
https://i-blog.csdnimg.cn/img_convert/9a535812bdcd28aacbc7b01555e8dec2.png
注意这个 prefix ，具体到某个组件页网址，否则 cursor 去 packages 目次搜索了，那就太多了。
https://i-blog.csdnimg.cn/img_convert/6f0b7fff6b7b32737535184e02290601.png
[*]开启长文 AI 聊天
https://i-blog.csdnimg.cn/img_convert/6b75fda003f6502f816caedf30e2e0fc.png
编写 cursor 规则文档
doc/widget.md
请根据以下要求生成一个 Flutter 组件：
- 参考组件文档: 请参考 ducafe_ui_core 的官方文档。
- 遵循编码习惯: 参考 lib/pages 目录下其他业务界面的编码风格。
- 数据可复用: 使用成员数组或变量替换字符串、图片和资源，以实现代码复用。
- 数据管理: 将成员变量和数组放入同级目录的 controller.dart 文件中。
- 生成测试数据: 创建 20 条测试用数据。
- 组件宽度: 组件宽度应自适应，避免设置固定宽度。
- 修改内容: 将生成的内容整合到当前代码文档中。
- 代码注释: 在代码中添加详细注释，以便后续维护和理解。
使用 figma to code 导出代码
[*]启动插件
https://i-blog.csdnimg.cn/img_convert/988f2ca396a903ef7df98b871495dc11.png
[*]导出 widget 范例代码
https://i-blog.csdnimg.cn/img_convert/a82e86cb32476bbd5ee544d2b6995792.png
[*]导出代码清单
class Group2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 382,
height: 680,
child: Stack(
children: [
Positioned(
left: 0,
top: 0,
child: Container(
width: 382,
height: 80,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 383,
height: 80,
child: Stack(
children: [
Positioned(
left: 95,
top: 19,
child: SizedBox(
width: 225,
height: 44,
child: Text(
'Your order #500158052 is now on the way for delivery. ',
style: TextStyle(
color: Color(0xFF111111),
fontSize: 12,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w400,
height: 0.15,
),
),
),
),
Positioned(
left: 329,
top: 22,
child: Text(
'10.44 AM',
style: TextStyle(
color: Color(0xFF727C8E),
fontSize: 12,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w400,
height: 0,
),
),
),
],
),
),
],
),
),
),
...... 省去重复代码
),
),
],
);
}
}
导出代码不能直接使用有几个标题:
[*]基于 Stack + Positioned 布局
[*]嵌套条理多
[*]宽高写死，不是相应式
[*]和业务代码差距很大
[*]只能说是对界面 dart 语言描述（原材料）
使用 cursor compose 天生代码
我提示词中规定了从 @Codebase 和 规则文件 doc/widget.md 来天生代码，figma 代码贴在上面就行。
https://i-blog.csdnimg.cn/img_convert/ee2c01d86eb2beb7b0e49cb16f5e6198.png
[*]compose 进行微调
过程详见视频。
[*]输出代码
compose 会依据我的代码习惯天生代码文件，符合生产需要。
https://i-blog.csdnimg.cn/img_convert/796a3e27c004d430fff37954cab670ba.png
运行
https://i-blog.csdnimg.cn/img_convert/2d01f8a2dfa1ce6bcc69aece267ce7c9.png
小结
本文深入探讨了怎样在Flutter中使用Cursor和Figma快速天生界面代码，帮助Flutter开发者和UI设计师提升开发效率。通过联合这两款强盛的工具，您可以轻松创建高质量的Flutter界面，收缩开发周期。掌握这些本领后，您将可以大概更快地相应项目需求，加快产品迭代。利用Cursor与Figma的强盛功能，提升您的Flutter开发体验。
感谢阅读本文
假如有什么建议，请在评论中让我知道。我很乐意改进。
猫哥 APP
[*]SaaS Fast
[*]Flutter GetX Generator
flutter 学习路径
[*]Flutter 优秀插件推荐
[*]Flutter 基础篇1 - Dart 语言学习
[*]Flutter 基础篇2 - 快速上手
[*]Flutter 实战1 - Getx Woo 电商APP
[*]Flutter 实战2 - 上架指南 Apple Store、Google Play
[*]Flutter 基础篇3 - 仿微信朋友圈
[*]Flutter 实战3 - 腾讯即时通讯 第一篇
[*]Flutter 实战4 - 腾讯即时通讯 第二篇
© 猫哥
ducafecat.com
end
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]