Antigravity Figma MCP Study 02

反重力figma-mcp-02研究

Antigravity和Figma MCP来修改标记元素的显示属性Web整个站点AI记录要编码的流程。

设计

借用了以下的设计。

https://www.figma.com/community/file/1156860863353724933

但是，由于含有大量插图等载体数据Figma MCP中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

图像占位符化

因此，插图等图像部分决定置换为空的占位符框架。

制作并使用代替占位符框架的插件。\ https://github.com/yuichiroharai-studies/figma-plugin-to-placeholder

项目环境配置

• Windows 11
• 星的
• 顺风CSS

AI编码环境

• 反重力

- 模式：Planning - 模型 - Gemini 3 Pro(High): Figma设计实施 - Claude Sonnet 4.5 (Thinking)：负责代码优化和改进

• 光标

- 模式：Agent - 模型 - Auto: Antigravity中描述的场景，使用下列步骤创建明细表，以便在概念设计中分析体量的周长

• Figma MCP

Figma利用设计Web在动态输入提示中单击Gemini 3 Pro(High)中所述修改相应参数的值。 除此之外Web在不太需要设计上下文的情况下Claude Sonnet 4.5 (Thinking)啊Cursor的，之AI同时使用代理。

开発履历

v0.1.0

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.1.0/

作业属性

• 「代理商.md“和”图.md“添加规则
• 考虑一整页一口气安装的流程
• Figma设计为桌面版，宽1440px使用
• Figma MCP目标是获得完整的数据

- get_metadata和get_design_context中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积 - Figma MCP多次大量访问的话会受到使用限制，所以在本地作为文件保存 - 数据过大时，有时省略中途 - Figma中选择新的扶手类型，来修改默认的扶手URL横渡 - 尽管如此，有些部分的数据太大，中途被省略了 - 省略的部分应该可以部分取得 - AI坚韧的 - 获取的数据为docs/figma/“中存储

• 实际上Astro在您查看完详细信息后，单击「React + Tailwind CSS」查看设计上下文的内容

- whitespace-pre因为很碍事所以一并删除 - 请一览使用的字体家族和重量的种类和使用部位进行确认 - DM_Sans啊Montserrat使用的地方Inter统一也没有问题 - Inter:Medium这样的包含权重的字体家族指定是错误的Inter统一

• 请提出实施计划书

- 了解要实施的节的顺序 - 为了明确每一节的详细步骤 - npm run dev中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积index.astro装入 - 一次总结作业的话容易忘记细小的规则AGENTS.md啊FIGMA.md查看项目中可用的所有族

• 完成的计划书是impl-base-desktop.md」
• 実装开始

考察

• 安装所需时间为12分钟左右

- Figma MCP中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积

• 作为初校的模型，做得并不差
• 图像和图标按照预想的那样使用了占位符

v0.1.1

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.1.1/

作业属性

考虑文字校对的流程。

• Figma保存上面每个节导出的屏幕快照
• Gemini API使用从屏幕快照中提取文本
• 比较提取的文本和实际代码的文本
• 费用上也是免费的，好像没有问题

考察

• 这次，在文本提取侧Whitepace的Whitespace的错误，除此之外全部一致
• 错字和语法错误Evernote也指出了有这样没有关系的字符串等

v0.1.2

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.1.2/

作业属性

我想减少冗长的样式指定。

• 一次性删除

- whitespace-pre - 显然不需要 - box-border - Tailwind已初始化 - content-stretch, shrink-0, text-nowrap - 暂时全部删除，以后只适用必要的东西

• AI判断，只删除不需要的东西

- 字体系列、字体权重、文本颜色和背景颜色 - global.css整理 - 行间 - Figma的初始值为leading-[normal] - Tailwind那么1.5中所述的工具，调整墙的布局和几何形状global.css在中line-height: normal覆盖 - relative - 在子元素中absolute啊z-index未指定的

考察

AI使之判断使之删除了不需要的东西，不过，因为细小的事有遗漏评论是必须的。

• 因为一口气做着宽广的对象范围，脱落变得多
• 执行前的判断和算法是正确的，但也有实际结果不是那样的情况等

- Windows所以PowerShell的使用方法奇怪的情况等

• 如果不区分使用“父要素”、“祖先要素”等用语，就会出现分歧

AI我想根据模型的进化也会改变，所以观望。

v0.1.3

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.1.3/

作业属性

蓝色按钮的通用组件化。

• Figma上面的组件化是理想的，但设想不是这样的情况
• AI将使用蓝色按钮的地方一览化并分析

- 调查文本大小、空白、有无图标等有差异的地方 - 可以忽略差异的地方是共通化 - 确定哪些组件可以通用

• 基于分析实现组件

- 删除多余的样式和不需要的嵌套结构

• 在曾是占位符的地方应用实际的图像
• 悬停动画

- 因为在设计中没有指定，所以简单地安装

考察

AI因为擅长把对象一览化或者从那里分析，所以交给你。\ 安装时的详细判断（现在还是）自己做比较快。

v0.2.0版本

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.2.0/

作业属性

• 最大宽度1440px中设置网格颜色
• 文本+将两列区域（如图像）网格化

- 顺便优化

考察

在动态输入提示中单击AI让他做比较快。

12列のグリッドレイアウトでギャップは32pxで
画像5列 余白1列 テキスト6列で

手动更新一个节后，将其添加到其余部分AI指示模仿的话效率很好。

A.astroの最適化をB.astro、C.astro、D.astroにも適用して
テキストと画像の順番は変更しないで
列数も変えないで

v0.2.1

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.2.1/

作业属性

Pricing.astro的正式安装。

• 删除不必要的样式和冗余嵌套结构
• 对齐方式map循环生成元素
• 根据选择状态更改样式，并在单击事件中更改选择状态
• 选择后背景纵向变大的过渡演出

考察

虽然有3个计划横着排列，但在从设计中引入的阶段，只有中间的计划有其他的风格。

2番目のプランだけ別のスタイルが当たっているので、`data-selected="true"`を持つかどうかでスタイルを切り替えられるようにして
groupの機能も利用して

指示AI的规格化距离的幂函数。

由于3个计划中有相同的样式，所以排列的map中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。\ 这也是AI如果指示的话，会自动做。

顺便提一下，

青い背景をbefore疑似要素に変更して

也会给我这样的指示。\ 这只是背景Transform中所述修改相应参数的值。

v0.2.2

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.2.2/

作业属性

• 剩下的部分也一口气正式实施
• 桌面布局所需的功能全部实现
• 重构整体以使颜色成为变量

考察

• 如果脑子里有具体的安装方法AI具体的指示会减少失败

- 只要逻辑不失败，即使是自然语言的潦草书写AI理解并实施

• 自己做比较快的东西，只有一个自己做，把它AI模仿
• 同时使用以下内容的复杂Tailwind的样式指定，如果使之重构布局大崩溃了注意

- 疑似要素 - data使用属性的状态管理 - 群组 - 过渡

以下是非常方便的提示

プレースホルダー画像をapp-*.svgに差し替えて

Figma在设计上加上层名的话data-name中所述的工具，调整墙的布局和几何形状。

imgをやめて同じサイズのdivにしてmask-imageして
背景は白にして、ホバーの時は黄色にして

即使颜色的指定很模糊，也能找到其他地方使用的东西。\ 用变量定义的话更可靠。

v0.2.3

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.2.3/

作业属性

修正为在悬停到计划时改变里面按钮的样式

考察

如上所述，计划的要素的样式设定变得复杂AI只是对的指示就顺利进行了。

v0.2.3(版本更改保持不变）

作业属性

不是突然实施，而是移动版的Figma MCP中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

• 移动元数据和JSX(将设计上下文）保存到文件

- 注意是否与桌面版一样完全获取

• 了解与台式机版本相比的内容和风格差异

- 请逐个比较并报告文件，根据需要JSX修改 - 检测出与桌面版相同的误植和语法错误等

考察

除了与桌面版时相同的原稿、语法检查之外AI确认与桌面版的一致性。\ 先JSX的规格化距离的幂函数AI的安装结果。

v0.3.0

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.3.0/

作业属性

• 提前制定移动版实施计划

- 计划书为impl-base-mobile.md」

• 在现有页面中包含移动布局

- 实施计划和移动版的JSX以…为基础

考察

• 事先了解在计划的时候布局和样式会发生怎样的变化

- 布局的变更很多（当然） - 样式的变更这次很少 - 正文字体大小相同 - 按钮的大小和字体大小也一样

• 负担比较少，安装也没有什么问题
• 使用滑块的部分（2处）

- 结构本身还是桌面版，只有风格是移动版 - 只需追加滑块功能就能完成

v0.3.1

https://yuichiroharai-studies.github.io/antigravity-figma-mcp-study-02/0.3.1/

作业属性

调整页眉布局

• 平板电脑~笔记本电脑

- 隐藏导航 - 显示汉堡包按钮

考察

Tailwind CSS的爆点就这样使用着。

• 移动： md(768px)未満
• 平板电脑： md(768px)以上～lg(1024px)未満
• 笔记本电脑： lg(1024px)以上～xl(1280px)未満
• 桌面： xl(1280px)以上