Codex + Figma 生成 Objective‑C (UIKit) 完整工作流

Codex 不能读取 Figma 文件链接,只能接收:截图 + Figma 标注参数清单,再输出 OC 代码。 产出:纯代码 UI,无 Storyboard / Xib,适合你 Flutter 项目里的 iOS 原生页面(MethodChannel 页面)

一、Figma 先提取全部开发数据

1. 选中页面元素 → 右侧【Inspect 检查】

复制每一项:

  • X、Y、width、height(单位 pt,375pt 设计稿)
  • Fill 背景色十六进制 #xxxxxx
  • Font:字号、字重、颜色
  • Corner radius 圆角
  • 边框、阴影参数

2. 导出 iOS 切图

选中图片 → Inspect → Export 导出选项:

格式 PNG,倍数:@2x、@3x

命名:英文小写,无中文空格,例:btn_meditate 导入 Xcode → Assets.xcassets → 新建 Image Set,分别拖入 @2x、@3x。

二、Codex / Cursor OC 专用万能提示词(直接复制)

你是资深iOS Objective‑C工程师。

硬性约束:

1、只输出 Objective‑C UIKit代码,禁止任何Swift;

2、ARC自动内存管理,最低部署iOS15+;

3、纯代码构建UI,禁止Storyboard、Xib;

4、优先AutoLayout布局,不要大量硬编码frame坐标;

5、色值、尺寸严格按照下面Figma标注;

6、图片资源已经放到Xcode Assets.xcassets;

7、代码添加中文注释,空值防护;

8、输出完整 .h 和 .m 文件;

9、最后列出图片清单、运行注意事项。

===== Figma标注数据 =====

页面名称:冥想首页

背景色:#F7F9FC

1、UILabel 标题

X:20, Y:90, width:335, height:44

text: 正念冥想

字体:系统粗体 28pt,文字颜色:#1A1A1A

2、UIButton 开始按钮

X:20, Y:420, width:335, height:56

背景色:#5271FF,圆角半径:28

按钮文字:开始冥想,白色,字号18

点击事件:打印日志

图片资源列表:

btn_meditate

三、Cursor 编辑器本地操作步骤(最推荐)

  1. Cursor 打开你的 Flutter iOS 项目文件夹
  2. 打开文件:ios/Runner/ViewController.m
  3. 侧边 AI 输入上面提示词,同时上传 Figma 页面截图
  4. AI 直接在当前文件生成 OC UI 代码
  5. 保存 → 打开 Xcode 编译调试

Cursor 快捷精简指令(选中 .m 文件直接发)

只用Objective‑C,UIKit纯代码,AutoLayout,不要xib/storyboard。

参考截图生成冥想首页。

背景色 #F7F9FC,标题文字"正念冥想",底部蓝色圆角按钮。

图片资源名称 btn_meditate。按钮添加点击事件。

四、一份生成出来的成品 OC 示例代码

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

  • (void)viewDidLoad {

super viewDidLoad;

self.view.backgroundColor = self colorWithHexString:@"#F7F9FC";

self buildUI;

}

  • (void)buildUI{

//标题

UILabel *titleLabel = \[UILabel allocinit];

titleLabel.text = @"正念冥想";

titleLabel.font = UIFont boldSystemFontOfSize:28;

titleLabel.textColor = self colorWithHexString:@"#1A1A1A";

titleLabel.translatesAutoresizingMaskIntoConstraints = NO;

self.view addSubview:titleLabel;

//按钮

UIButton *startBtn = UIButton buttonWithType:UIButtonTypeSystem;

startBtn setTitle:@"开始冥想" forState:UIControlStateNormal;

startBtn.titleLabel.font = UIFont systemFontOfSize:18;

startBtn setTitleColor:\[UIColor whiteColor forState:UIControlStateNormal];

startBtn.backgroundColor = self colorWithHexString:@"#5271FF";

startBtn.layer.cornerRadius = 28;

startBtn.translatesAutoresizingMaskIntoConstraints = NO;

startBtn addTarget:self action:@selector(startClick:) forControlEvents:UIControlEventTouchUpInside;

self.view addSubview:startBtn;

//AutoLayout约束

[NSLayoutConstraint activateConstraints:@[

titleLabel.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:20,

titleLabel.topAnchor constraintEqualToAnchor:self.view.topAnchor constant:90,

titleLabel.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor constant:-20,

startBtn.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:20,

startBtn.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor constant:-20,

startBtn.topAnchor constraintEqualToAnchor:titleLabel.bottomAnchor constant:200,

startBtn.heightAnchor constraintEqualToConstant:56,

]];

}

-(void)startClick:(UIButton *)sender{

NSLog(@"点击了开始冥想按钮");

}

//十六进制颜色工具

-(UIColor *)colorWithHexString:(NSString *)hex{

NSString *cString = \[hex stringByTrimmingCharactersInSet:\[NSCharacterSet whitespaceAndNewlineCharacterSet] uppercaseString];

if (cString hasPrefix:@"#") cString = cString substringFromIndex:1;

unsigned int rgbValue = 0;

NSScanner *scanner = NSScanner scannerWithString:cString;

scanner scanHexInt:\&rgbValue;

return UIColor colorWithRed:((rgbValue \& 0xFF0000) \>\> 16)/255.0 green:((rgbValue \& 0xFF00) \>\> 8)/255.0 blue:(rgbValue \& 0xFF)/255.0 alpha:1.0;

}

@end

五、生成 UI 后对接 Flutter‑MethodChannel 追加提示词

在当前ViewController.m添加Flutter MethodChannel通道,通道名称 com.meditation/page,

点击开始冥想按钮,发送回调通知给Flutter Dart端。

相关推荐
hunteritself1 分钟前
AI 挖出 PHP「致命漏洞」!欧洲政府连夜关站,日本首相紧急喊话
开发语言·人工智能·php
H.莓飛11 分钟前
【数据结构】快速排序专题
linux·服务器·c语言·数据结构·visual studio
努力实干16 分钟前
Qt/C++ 模块化设计与工程组织
开发语言·c++·qt
阿里嘎多学长23 分钟前
2026-10-23 GitHub 热点项目精选
开发语言·程序员·github·代码托管
Lhan.zzZ40 分钟前
Qt:动态库模块框架设计
开发语言·c++·qt
quantdash_cc1 小时前
如何从多只股票的历史行情构建收益率矩阵?Python 与 QuantDash 实战教程
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
wuminyu1 小时前
JVM规范学习总结-JVM规范基本概念
java·linux·c语言·jvm·c++
不是万能的豆学长5 小时前
filetidy 文件整理助手:一键归类 + 规范重命名(Python 零依赖单文件工具)
大数据·开发语言·python·技术美术
懂点Tech9 小时前
ctfshow MISC入门图片篇(信息附加):misc41解题思路
开发语言·python
catchadmin10 小时前
PHP 8.7 协程新提案 让跨协程代码共享请求身份
开发语言·php