Android AI解放生产力（四）实战：解放绘制UI的繁琐工作

公司当前项目是使用Figma UI设计工具，以这个为例。

Figma当前是有MCP供对外使用的。配置教程见Figma官网。

一、编辑skill

看完之前的文章大概就了解了如何创建一个skill。

在skills文件夹创建一个子文件夹，子文件夹名字是figma_ui_to_xml，然后在figma_ui_to_xml内创建一个Markdown文件，文件名是固定的SKILL.md。

编辑name和description，为了让skill被调用，我在description加上了粘贴Figma MCP链接时一定有的一段文案Implement this Figma design.。下面是Figma MCP粘贴链接的内容：

kotlin 复制代码

Implement this Figma design.
@https://www.figma.com/design/Lod2RUqzBCaISqN4/FOXX-UI-library?node-id=43080-44506&m=dev

下面是name和description

kotlin 复制代码

---
name: figma_ui_to_xml
description: Implement this Figma design。将Figma MCP链接转换为Android原生XML。
---

在SKILL.md中根据项目的实际情况编辑提示词，把所有的可以参考的文件，例如抽取的style，颜色等都写进去，下面是我删减过敏感信息后的提示词：

kotlin 复制代码

---
name: figma_ui_to_xml
description: Implement this Figma design。将Figma MCP链接转换为Android原生XML。
---
# 将Figma MCP链接转换为Android原生XML

• 严格按下面流程执行（后续每次你给 Figma MCP 链接都照此做）：

  1. 提供 Figma MCP 原始数据链接/节点链接后，先用 Figma MCP 把节点的结构信息、尺寸/位置、颜色/变量、文本内容、字体与字号、间距、圆角/描边/阴影等全部提取
     出来（必要时再取 screenshot 辅助核对）。
  2. 把提取到的设计元素映射成 Android 原生 View：根布局一律 ConstraintLayout，match_parent，并把 constraints 写完整，避免运行时跑到 (0,0)。
  3. 严格按项目规范生成 XML：
      - View 尽量用 AppCompat（如 AppCompatTextView）。
      - 所有 id 用 snake_case（例如 @+id/tv_title）。
      - 尺寸用 dp，字号用 sp。
      - 文本优先放 res/values/strings.xml；如果确认找不到对应 key，就按你规则在 XML 里写死文案。
      - 颜色优先用 res/values/colors.xml 资源；没有就写死 #RRGGBB。
      - 字体按约定：Regular/Light/Medium → roboto_regular / roboto_light / roboto_medium。
      - 所有文本控件统一加 android:lineSpacingExtra="3dp"，忽略 letterSpacing。
  4. 优先复用项目已有资源：
      - res/drawable 里现有的背景/圆角/边框尽量直接引用，不重复造。
      - Button 优先套用 res/values/styles_buttons.xml 里的公共样式。
      - TextView 优先套用 res/values/styles_textviews.xml 里的公共样式。
  5. 输出最终的 Android XML 布局代码（如果需要补充 strings/colors/drawable 的建议，单独列出"建议新增项"，但不强行发散）。

二、实际使用

这个就很简单了, 从Figma MCP粘贴链接，回车即可，会自动使用上面的skill。使用high模型可能时间比较长，需要等待一会儿。

实际生成的xml,可用度已经相当高了，最后自己微调一下。

如果生成Compose其实同理，一通百通。

不知道其他设计工具有没有MCP，例如蓝湖，没去了解。

下期解放API接口开发的繁琐工作