AI导哈

AI网页编码工具

利用Antigravity和Figma MCP工具，通过AI技术实现网页设计的自动化编码和优化。

  • by yuichiroharai-studies
  • Astro
  • 本地部署
  • 更新于
在 GitHub 查看 yuichiroharai-studies/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/

作业属性

  • 提前制定移动版实施计划
  • 在现有页面中包含移动布局
    • 实施计划和移动版的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)以上

相关 MCP