Flutter 使用 Cursor 和 Figma 快速天生界面代码

Flutter 使用 Cursor 和 Figma 快速天生界面代码

视频

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://www.figma.com/community/plugin/842128343887142055/figma-to-code-html-tailwind-flutter-swiftui
我的 figma 账号是 free 免费范例，能正常使用这个插件。
设置 curosr

• 打开你的业务代码
  

我这里是 woo2025 ，当然你的业务代码需要规范整齐，这样才得当 ai 帮你天生靠谱的代码。

• codebase 建立索引
  

之后可以用指令 @cosebase 来询问 ai , 检索整个项目。

• compose 面板放在右侧栏
  

整理你的打码空间

• 加文档库
  

之后可以用指令 @doc 来询问 ai ，关于组件的使用帮助，加快实行速率。

注意这个 prefix ，具体到某个组件页网址，否则 cursor 去 packages 目次搜索了，那就太多了。

• 开启长文 AI 聊天
  

编写 cursor 规则文档

doc/widget.md

1. 请根据以下要求生成一个 Flutter 组件：
3. - 参考组件文档: 请参考 ducafe_ui_core 的官方文档。
4. - 遵循编码习惯: 参考 lib/pages 目录下其他业务界面的编码风格。
5. - 数据可复用: 使用成员数组或变量替换字符串、图片和资源，以实现代码复用。
6. - 数据管理: 将成员变量和数组放入同级目录的 controller.dart 文件中。
7. - 生成测试数据: 创建 20 条测试用数据。
8. - 组件宽度: 组件宽度应自适应，避免设置固定宽度。
9. - 修改内容: 将生成的内容整合到当前代码文档中。
10. - 代码注释: 在代码中添加详细注释，以便后续维护和理解。

复制代码

使用 figma to code 导出代码

• 启动插件
  

• 导出 widget 范例代码
  

• 导出代码清单
  

1. class Group2 extends StatelessWidget {
2.   @override
3.   Widget build(BuildContext context) {
4.     return Column(
5.       children: [
6.         Container(
7.           width: 382,
8.           height: 680,
9.           child: Stack(
10.             children: [
11.               Positioned(
12.                 left: 0,
13.                 top: 0,
14.                 child: Container(
15.                   width: 382,
16.                   height: 80,
17.                   child: Row(
18.                     mainAxisSize: MainAxisSize.min,
19.                     mainAxisAlignment: MainAxisAlignment.center,
20.                     crossAxisAlignment: CrossAxisAlignment.center,
21.                     children: [
22.                       Container(
23.                         width: 383,
24.                         height: 80,
25.                         child: Stack(
26.                           children: [
27.                             Positioned(
28.                               left: 95,
29.                               top: 19,
30.                               child: SizedBox(
31.                                 width: 225,
32.                                 height: 44,
33.                                 child: Text(
34.                                   'Your order #500158052 is now on the way for delivery. ',
35.                                   style: TextStyle(
36.                                     color: Color(0xFF111111),
37.                                     fontSize: 12,
38.                                     fontFamily: 'Montserrat',
39.                                     fontWeight: FontWeight.w400,
40.                                     height: 0.15,
41.                                   ),
42.                                 ),
43.                               ),
44.                             ),
45.                             Positioned(
46.                               left: 329,
47.                               top: 22,
48.                               child: Text(
49.                                 '10.44 AM',
50.                                 style: TextStyle(
51.                                   color: Color(0xFF727C8E),
52.                                   fontSize: 12,
53.                                   fontFamily: 'Montserrat',
54.                                   fontWeight: FontWeight.w400,
55.                                   height: 0,
56.                                 ),
57.                               ),
58.                             ),
59.                           ],
60.                         ),
61.                       ),
62.                     ],
63.                   ),
64.                 ),
65.               ),
66.               
67.               ...... 省去重复代码
68.           ),
69.         ),
70.       ],
71.     );
72.   }
73. }

复制代码

  导出代码不能直接使用有几个标题:
  

• 基于 Stack + Positioned 布局
  
• 嵌套条理多
  
• 宽高写死，不是相应式
  
• 和业务代码差距很大
  
• 只能说是对界面 dart 语言描述（原材料）
  

  使用 cursor compose 天生代码

我提示词中规定了从 @Codebase 和 规则文件 doc/widget.md 来天生代码，figma 代码贴在上面就行。

• compose 进行微调
  

过程详见视频。

• 输出代码
  

compose 会依据我的代码习惯天生代码文件，符合生产需要。

运行

小结

本文深入探讨了怎样在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企服之家，中国第一个企服评测及商务社交产业平台。