从Figma到代码：AI辅助的逐步指南
要实现从Figma设计到代码的自动化转换，请使用Dev Mode与MCP。前提条件：拥有Figma Dev Mode访问权限、基于GPT-4o或类似模型的AI助手（如Cursor）、理解基本布局原则，以及能够编写精确提示的技能。该流程依赖于系统化的框架结构以确保可重复性。
框架命名结构：
%页面名称 %类型 [%屏幕宽度 · %主题]示例：首页 默认 [1920 · 浅色]。断点：1920px、1280px、768px、375px。主题：浅色/深色。
准备布局
遵循五个关键规则以最小化AI错误。
规则1：内容与样式。 将最终文本和图形插入实际尺寸的容器中。创建样式：浅色/主色、深色/主色。
规则2：区块结构。 为区块（如Hero、菜单、页脚）使用独立的框架，而不仅仅是完整页面。这便于局部编辑。
规则3：调整逻辑。 创建带有视觉指示器的布局框架：箭头表示拉伸、固定尺寸、最小/最大宽度、换行。
规则4：UI状态。 为悬停、激活、禁用状态使用独立框架。展示完整上下文，例如菜单 悬停 [1920 · 浅色]。
规则5：主题。 复制框架用于浅色/深色主题，并使用样式中的颜色。
启用MCP：Dev Mode → 检查 → MCP（服务器状态：已启用，图像源：下载）。预期SVG/栅格图像质量较低——需手动或通过提示替换。
转换到代码的步骤
逐步操作，避免全局请求。AI应分析Figma MCP图层，而非截图。
步骤1：项目基础
编写初始提示：
我们正在构建一个关于[描述]的网站。Figma MCP：[链接]。框架名称中的断点：[列表]。资源来自Figma。步骤：澄清问题。
AI将分析并将其分解为步骤。添加导航。
步骤2：带规则的代理
生成AGENTS_BASE.md以锁定样式：
- 重用组件。
- 按断点进行响应式设计。
- 支持Retina（@2x）。
- 未经确认不覆盖代码。
用俄语或英语编写——质量不变。
步骤3：迭代组装
按框架细化区块：
在Feature [768 · 浅色]中，带水平滚动的画廊：[链接]。为滚动条添加+20px底部内边距。
修复后移至下一个区块。
步骤4：资源替换
- 手动：重命名文件。
- 通过AI：
> 在Hero中，将[id]替换为[email protected]。
> 在Feature List中：使用ic_unlimList_BENEFIT_24（32x32px）代替占位符。
步骤5：功能实现
在隔离环境中添加：
本地化：通过按钮[name]实现RU/EN下拉菜单。澄清问题。
支持：响应式、Retina、主题、动画。
关键要点
- 系统化的框架命名确保可重复性。
- 视觉布局指示弥补了AI在自动布局方面的不足。
- 逐步方法与代理结合最小化代码回归。
- 手动资源替换对质量至关重要。
- 关注细节：不要同时承担所有角色以避免倦怠。
— Editorial Team
暂无评论。