用 Figma + Kiro Power 轻松生成 React UI 组件！#AWSreInvent

前几天，AWS 发布了一个名为 Kiro Powers 的全新功能。
Kiro Powers 是一套用于扩展 AI 编码助手 Kiro 的插件系统，让它能具备更强大、更灵活的能力。

这次，我想从众多 Kiro Powers 中挑一个来实际试试——Figma Power！
让我们看看它在 Figma 中能带来怎样的体验吧！

nullhttps://kiro.dev/blog/introducing-powers/

什么是 Kiro powers？

Kiro powers 是用于扩展 Kiro 能力的插件系统。
它把 MCP 服务器、steering 文件、hooks（钩子） 等组件整合成一个可安装的插件包，让你只需 一键安装 就能立即使用这些扩展功能。

这次，我将从众多的 Kiro powers 中选择 Figma power 来实际动手试一试。

安装并启用 Figma power

① 安装 Power

在左侧边栏，你会看到一个带有 “Kiro 注入了 Power” 风格的专属图标。点击进入后，在推荐列表中找到 「Design to Code with Figma」，然后点击 Install 完成安装。

安装完成后，Kiro 会自动在用户设置文件
（~/.kiro/settings/mcp.json）中写入对应的 power 配置，无需手动编辑。

{
  "mcpServers": {},
  "powers": {
    "mcpServers": {
+     "power-figma-figma": {
+       "url": "https://mcp.figma.com/mcp",
+       "disabled": false,
+       "disabledTools": [],
+       "autoApprove": ["get_screenshot"]
+     }
    }
  }
}

这样一来，MCP 服务器的配置就会自动加入到设置文件中，这正是 powers 的便利之处——完全不需要手动配置 MCP 服务器。

② 启用 Power

安装完成后，界面上会出现一个 「Try Power」 按钮。点击后，右侧面板会开始 Power 的首次使用引导（onboarding）。
不过，在那之前需要先 连接 Figma MCP，因此画面会先显示相关的连接提示。

按照提示操作即可连接 MCP 服务器。由于使用 Figma MCP 需要授予 Figma 账户的访问权限，浏览器会自动打开并要求你登录 Figma。登录后点击 “Agree & Allow Access”（同意并授权），即可完成权限授予。

使用 Figma MCP 时，需要订阅 Dev 方案 或 Full 方案 才能使用该功能。
更多详情可参考 Figma 官方指南：

https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

开始执行 Onboarding 的工作流

从这里开始，Figma Power 的真正 onboarding（初始流程） 会正式启动。

具体来说，Kiro 会执行 Figma Power 中 POWER.md 文件里所定义的工作流（Workflow），并按照其中的步骤一步一步带你完成初始化设置。

https://github.com/kirodotdev/powers/blob/main/figma/POWER.md#step-1https://github.com/kirodotdev/powers/blob/main/figma/POWER.md#step-1

你可以看到，这个流程分为两个步骤：生成设计系统规则 和 生成 hooks。

Step 1：生成设计系统规则（Design System Rules）

首先会执行工作流的第 1 步：生成 设计系统规则。
在这一阶段，Kiro 会调用 Figma MCP 服务器提供的 create_design_system_rules 工具，并基于当前的设计数据生成一份名为 design-system.md 的 steering 文件（规则文件）。

这份文件会作为 Kiro 之后进行代码生成与 UI 转换时的重要参考规则。

在这里你可以看到，文件中已经记录了所使用的 技术栈（例如实际采用的框架、样式库等）以及相关的 设计模式。这些内容会作为生成代码及后续转换规则的重要参考。

Design System Rules（设计系统规则）

这份文档是使用 Figma MCP 来实现 UI 组件时所遵循的 指导规范（Guidelines）。

---

技术栈（Tech Stack）

• 框架（Framework）： React 18 + TypeScript

• 样式（Styling）： Tailwind CSS 3.4 + tailwind-variants

• 表单（Forms）： react-hook-form + zod

• 构建工具（Build）： Vite

• 测试（Testing）： Vitest + Playwright + Storybook

---

设计 Token（Design Tokens）

• 色彩调色板（Color Palette）

（此处通常会列出 tokens，如 primary / secondary / gray scale 等）

// 在 tailwind.config.js 中定义
colors: {
  primary: {
    DEFAULT: "#0017C1",      // 主色
    touch: "#00118F",        // Hover / Active 状态
  },
  secondary: {
    touch: "#B2B9EC",
    errorTouch: "#F2C1C1",
  },
  error: {
    DEFAULT: "#C62828",
    touch: "#A12020",
  },
  dark: "#080808",
  default: "#414143",        // 常规文本
  soft: "#757578",           // 辅助文本
  light: "#B4B4B7",          // Disabled 状态
  pale: "#D8D8D8",           // 边框
  veryPale: "#F1F1F4",
  extremelyPale: "#F8F8FB",  // 背景色
}

排版（Typography）

字体大小以 {size}ptW{weight} 的形式定义：

• W3 = fontWeight: 300（Light）

• W6 = fontWeight: 600（SemiBold）

// 使用示例
className = "text-14ptW3"; // 14px, line-height: 19px, 字重 300
className = "text-16ptW6"; // 16px, line-height: 21px, 字重 600

主要字号（Primary Font Sizes）

主要使用的字号范围为 10pt ～ 34pt。

fontFamily: {
  sans: ["Noto Sans JP", "sans-serif"],
  body: ["Noto Sans CJK JP DemiLight", "ヒラギノ角ゴ Pro W3", ...],
}

组件结构（Component Structure）

目录结构（Directory Structure）

web/src/
├── components/        # 通用 UI 组件
│   ├── Button.tsx
│   ├── TextField.tsx
│   ├── SelectField.tsx
│   └── *.stories.tsx  # Storybook 用示例
├── features/          # 按功能划分的页面与组件
│   ├── member-card/
│   ├── member-registration/
│   └── ...
├── hooks/             # 自定义 Hooks
├── utils/             # 工具方法
└── assets/            # 图片、图标等静态资源

样式模式（Styling Pattern）

使用 tailwind-variants 对组件的样式变体进行统一管理：

import { tv, twMerge } from "@/utils/tailwind";

const buttonStyle = tv({
  base: "flex h-12 w-full items-center justify-center gap-2 rounded px-6 py-2",
  variants: {
    property: {
      primary: "",
      error: "",
    },
    variant: {
      contained: "",
      outlined: "border border-solid",
    },
  },
  compoundVariants: [
    {
      property: "primary",
      variant: "contained",
      class: ["bg-primary", "text-white", "hover:bg-primary-touch"],
    },
  ],
});

组件实现模式（Component Implementation Pattern）

import { forwardRef, type ComponentProps } from "react";
import { twMerge } from "@/utils/tailwind";

type Props = ComponentProps<"input"> & {
  label?: string;
  error?: { message?: string };
};

export const Component = forwardRef<HTMLInputElement, Props>(
  ({ label, error, className, ...props }, ref) => {
    return (
      <input
        ref={ref}
        className={twMerge("base-classes", error && "error-classes", className)}
        {...props}
      />
    );
  }
);
Component.displayName = "Component";

实现流程

1. 从 Figma 的 URL 中提取 fileKey 和 nodeId

2. 使用 get_design_context 获取设计信息

3. 检查既有组件并重复利用

4. 将 Tailwind Token 转换为项目中的 Token

5. 使用 get_screenshot 进行视觉验证

转换规则

Figma 输出	项目侧转换
text-[#0017C1]	text-primary
bg-[#C62828]	bg-error
text-[14px]	text-14ptW3
font-light	（包含在 W3 Token 中）
font-semibold	（包含在 W6 Token 中）

现有组件一览

• Button
  variant: contained / outlined，property: primary / error

• TextField
  文本输入字段

• TextAreaField
  多行文本输入

• SelectField
  选择框

• Alert
  提示消息

• Spinner
  加载指示

• Layout
  页面布局

• InputLabel
  输入标签

• InputErrorLabel
  错误消息标签

注意事项

• Figma MCP 的输出是 React + Tailwind，但并非最终代码

• 必须使用项目的颜色 Token 与排版 Token

• 最大限度复用现有组件

• 目标是实现 1:1 的视觉一致性

Step2：创建 Hooks

接下来会执行工作流的 Step2：创建 Hooks。
在这个步骤中，会生成一个名为 figma-code-connect.kiro.hook 的 Hook 文件。

Hooks 是一种机制，当 IDE 内发生特定事件时，会自动触发执行代理（AI）。
可以将其理解为一种 “触发器 → 动作” 的自动化规则。

这次生成的 figma-code-connect.kiro.hook，会在 UI 组件被新增或更新时被调用，用来检查与 Figma 的同步状态。

具体来说，当你在 web/src/components/ 或 web/src/features/ 目录下编辑任何 .tsx 文件 时，Kiro 会询问你是否要 使用 Figma MCP 来执行 Code Connect，以便确认代码与设计是否一致。

{
  "enabled": true,
  "name": "Figma Component Code Connect",
  "description": "Check if UI component should be connected to Figma design",
  "version": "1",
  "when": {
    "type": "fileEdited",
    "patterns": ["web/src/components/**/*.tsx", "web/src/features/**/*.tsx"]
  },
  "then": {
    "type": "askAgent",
    "prompt": "When a new component file is created or updated, ask the user if they would like to confirm if the code has been correctly attached to the Figma component of the same name. If the user approves: first run the get code connect map tool for the last Figma URL provided by the user. You can prompt them to provide it again if it's unavailable. If the response is empty, run the add code connect map tool, otherwise tell the user they already have code mapped to that component. If the user rejects: Do not run any additional tools."
  },
  "shortName": "figma-code-connect"
}

以上，整个设置流程就算完成了。
你可以在 Kiro 中确认到 Steering、Hooks 以及 Power 的 MCP 服务器都已经成功设置完毕。

实际从 Figma 生成 React 组件试试看

那么接下来，我们就实际从 Figma 的设计中生成 React 组件。

Figma 设计

提示词（Prompt）

我向 Kiro 发送了如下提示词：

请将此 Figma Frame 制作成组件。

组件名称：MemberRegistrationCompletePage  
生成位置：src/features/member-registration

https://www.figma.com/design/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/PageName?node-id=xxxxxxxx-xxxxxxxx&t=xxxxxxxx-xxxxxxxx

Kiro 的行为

Kiro 按以下步骤进行了处理：

1. 读取 Steering 文件
   读取之前生成的 design-system.md，以理解设计系统规则。

2. 激活 Figma Power
   因为提示词中包含“フレーム（Frame）”这一关键字，Kiro 会激活 Figma Power。在这里 MCP 等扩展首次被加载。

3. 使用 Figma MCP
   通过 Figma MCP 的 get_design_context 与 get_screenshot 获取 Figma 的设计信息。

4. 检查现有代码
   检查是否已有现成组件，如有可复用的组件则优先使用。

5. 生成组件
   生成新的组件，以及该组件对应的 Storybook 文件。

6. Hooks 的执行（本来应该执行……）
   在保存文件时，本来应该触发 figma-code-connect.kiro.hook 来进行与 Figma 的同步确认，但这里并没有被执行……（可惜。）

生成的组件

生成的组件如下所示：

import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/Button";
import { Layout } from "@/components/Layout";
import { buildAppTitle } from "@/utils/string";

export const MemberRegistrationCompletePage = () => {
  const navigate = useNavigate();

  return (
    <>
      <Helmet>
        <title>{buildAppTitle("新規会員登録の完了")}</title>
        {/* → 中文：新会员注册完成 */}
      </Helmet>
      <Layout>
        <section className="flex flex-col gap-4 px-4 pt-8">
          <h1 className="text-14ptW6">会員登録が完了しました</h1>
          {/* → 中文：会员注册已完成 */}

          <p className="text-14ptW3">
            お客様の情報を登録しました。会員証をご利用いただけます。
          </p>
          {/* → 中文：您的信息已成功登记。现在可以使用会员卡了。 */}

          <Button
            property="primary"
            variant="contained"
            onClick={() => {
              navigate("/");
            }}
          >
            会員証へ進む
          </Button>
          {/* → 中文：前往会员卡 */}
        </section>
      </Layout>
    </>
  );
};

基于 Figma 的设计，Kiro 生成了与项目中已有模式
（例如 MemberEditCompletePage 等）相匹配的组件。
此外，tailwind.config.js 中定义的自定义字体类
如 text-14ptW6、text-14ptW3 等也被正确应用。

在 Storybook 中确认

我们将在 Storybook 中检查生成的组件。

pnpm run storybook

结语

这次，我们介绍了如何使用 Kiro powers 的新功能 “Figma power”，从 Figma 设计生成 React 组件的整个流程。

与以往单独使用 Figma MCP 相比，借助 Kiro powers，过去繁琐的步骤——
MCP 的设置、规则文件的添加、Hooks 的配置等——都变得更加简单，
从而实现了更强大的 Figma 联动能力。
实际操作中，我们也顺利地从 Figma 设计生成了 React 组件。

遗憾的是，这次 Hooks 的自动执行（Code Connect） 没有顺利运行。
不过从设计上来看，当文件被保存时，会自动触发与 Figma 的同步机制，
因此这一点也期待未来的改善。

除了 Figma 以外，Kiro 还提供了 Netlify、Supabase 等其他 powers，
以后我也想逐一尝试看看。

以上，希望这些内容能对你有所帮助。