AI 编程指南！4个章节详解Figma看板插件开发过程

嗨，我是范米花儿，好久不见。最近在梳理作品集，整理到 Figma 看板生成插件开发相关的内容。之前插件发布时，不少朋友问过有没有相关教程，而且自年初发了 Cursor 还原教程后，我就没再更新过内容，也常收到小伙伴的催更。所以既然整理了，那就顺手分享出来吧～

往期回顾：

文章会从需求讨论、开发实施到项目管理，把插件的关键环节拆解开讲：

一、需求讨论

作为设计师和需求方，对于背景、用户、功能点是知道的，但是难在功能点的考虑不全面和技术点的不了解，所以先通过GPT或Cursor等工具进行讨论。

需求分析过程分为三个层次，从能够直接表达的基础信息，到需要AI主导的技术方案讨论：

1. 基础信息明确

2. 功能细化讨论

在经过多轮沟通后，可以总结一个更完整的MVP功能，并生成简单示意图来确认：

3. 技术方案探讨

在完成前2步之后，对于技术，需要AI主导提供可选方案，并用设计师能理解的方式解释。在指令中明确要求AI以可视化、易懂的方式输出。（本方式，对于开发中不清楚“具体目标”的情况均适用）

通用示例如下：

二、开发实施

在完成需求分析和技术方案确定后，进入具体的开发实施阶段。这个阶段需要将前期的规划转化为实际的代码和功能，同时处理开发过程中遇到的各种细节问题。

开发实施阶段主要分为三大部分，细节处理、问题修复和代码质量：

1. 通用开发方法

工具内部提示词优化：很多 AI 工具内部的对话框，可以优化提示词，但是要注意优化后可能会有冗余的部分，需要进行删减。

API本地文档：虽然有不少 MCP 工具能在线查资料（比如 Context7 ），但也会有阅读不全面的情况，所以会把相对重要的文档（如 Figma 官方开发文档）存储到本地项目中，同时按类别（如 Figma 开发相关、图表库相关等）进行整理分类。

示意图对齐需求：针对文字难以清晰表达的需求（如复杂用户流程、插件界面布局），核心是通过 “双向视觉化” 确保需求对齐。

1. 输入端（我）：用纸或者Figma绘制简单原型图（草图），标注界面元素位置、用户操作路径等；
2. 输出端（AI）：要求 AI 用 Markdown 格式生成对应可视化内容，比如流程图、框架图等；

切换多种工具：单一 AI 工具可能出现 “幻觉”，所以当某部分功能多次修改不成功时，会切换多个工具（Cursor、Trae、Augment 等）交叉验证和调整。同时为了方便工具切换时快速衔接，要用当前 AI 工具生成待解决问题的细节文档：

文档内容：包括已尝试的修改方案、存在的偏差（如代码报错点、功能未实现的具体表现）及期望效果。

全局开发规则：

a.注释标准：尽量采用设计师熟悉的视觉化、场景化语言

b.模块化要求：清晰的功能模块划分

c.调试信息：控制台日志等，通过环境变量控制调试信息

d.生产环境的清理规范：修复后调试信息的删除

问题修复：

a.报错溯源困难：（不会看报错）

b.需求转译障碍：（设计语言 → 技术语言）

c.修复不彻底：（修过但没改好）

细节处理举例：

a.指定图标/切图替换：

备注：现在很多ai工具已经具备可视化的元素选择功能（比如figma make、trae solo），可以直接在提示词内引用

方式一：引用链接：从图标网站复制 SVG 代码

方式二：本地文件：手动导出图标（或切图）存于本地项目文件

b.图表数据序列取色规范：

2. 渐进式功能扩展

在完成 MVP 版本后，采用渐进式的方式进行功能扩展。每次只聚焦于一个或少数几个新功能点的开发，确保新功能与现有功能的兼容性和稳定性。

每次功能扩展都遵循流程：

1.需求讨论  → 2. 开发实现 → 3. 测试验证 → 4. 文档更新。

3. 云端服务器与部署实现

a.人工准备工作：

1. 服务器购买与基础配置：购买ECS，获取公网IP地址及root密码；
2. 域名与SSL证书准备：购买域名及备案，域名解析，申请免费SSL证书并下载部署；
3. 服务器安全组配置确认：确认必要端口开放（尤其443，因为figma插件仅支持https）；

b.AI自动化实施：

1. 给AI的完整指令模版
2. AI生成部署脚本及部署文档

三、项目管理

在反复向 AI 复述需求背景后，发现 AI 对项目细节的 “记忆” 始终是碎片化、一次性的，而规范的管理动作（如文档记录、进度 / 问题归档），正是为 AI 搭建起 “持续可查的记忆库”，从而解决这一痛点。

1. 功能进度管理

明确 “开发边界” 与 “优先级聚焦”：

2. 日常进度管理

提供 “短期目标” 与 “问题反馈闭环”：

3. 问题追踪管理

构建 “问题知识库” 与 “重复问题，精准修复依据”：

4. Git版本管理

划定 “开发范围” 与 “安全回溯依据”：

a.人工管理部分，关键要素：

1. 明确工作分支：知道AI在哪个分支工作，明确可以回滚到哪个版本，如feature/chart-theme、fix/button-color；
2. 版本确认 ：了解每次提交的具体内容和版本说明；
3. 发布决策 ：决定是否发布当前版本或回滚到指定版本；

b.AI自动处理部分，关键要素：

1. Git操作规范 ：创建分支、提交代码、合并分支、解决冲突；
2. 提交信息规范 ：使用约定式提交格式(feat/fix/docs)，自动生成规范提交信息；
3. 分支命名规范 ：feature/功能名、fix/问题名等；
4. 版本管理规范 ：语义化版本号生成、版本历史记录、变更日志维护；

四、文档体系

文档积累要贯穿整个项目阶段，随进度持续沉淀。

一方面，为AI工具搭建持续可查的 “记忆库”，解决其细节记忆碎片化问题，提升协作效率；另一方面，持续沉淀的内容，可以经过AI二次解释，成为我的 “代码学习中心”。

1. 项目核心文档

1. 项目简介与架构：项目整体介绍，持续更新，作为项目需求背景；
2. 需求文档：具体功能需求、实现要求、功能边界和验收标准，指导AI明确要做什么；
3. 功能模块文档：各个功能模块的详细设计、技术实现方案、API接口等；
4. 用户流程文档：完整的用户操作流程和各功能点的交互逻辑；

2. 开发支撑文档

1. 规则知识文档：全局开发规范、编码标准等；
2. 技术难点文档：记录反复出现或处理耗时的技术问题及解决方案；
3. 部署文档：项目部署信息、脚本等；

3. 项目管理

包括功能开发进度、日常任务安排、问题记录追踪和代码版本控制记录文档

欢迎关注作者微信公众号：「范米花儿」