> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 从 Figma 到像素级精确代码

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="从 Figma 到像素级还原代码" description="连接 Figma MCP，让 Devin 提取设计 token、构建设计组件，并将结果与你的设计稿进行像素级视觉比对。" prompt="实现这个 Figma 文件中的定价页面：https://figma.com/file/abc123/Pricing-Page。重点关注“Marketing”页面上的“Pricing Section”画板。它包含一个标题 + 副标题区域、3 个定价档位卡片（Free、Pro、Enterprise（企业版））及其功能列表、卡片下方的对比表格，以及一个移动端布局（卡片垂直堆叠、表格可滚动）。使用我们在 tailwind.config.ts 中配置的 Tailwind 颜色和间距。复用 src/components/ui/ 中已有的 Card 和 Button 组件。该页面应作为一个新的路由，路径为 src/app/pricing/page.tsx。实现完成后，启动开发服务器，并在桌面端（1440px）、平板（768px）和移动端（375px）视口下分别截取整页截图。录制一段屏幕录像，滚动浏览整个页面并演示悬停状态交互效果。在本次会话中把截图和录像分享给我，并将它们附加到拉取请求（PR）中，方便评审者查看视觉效果。在实现与 Figma 设计完全一致之前，不要发起该 PR。" category="功能开发" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>不想手动完成这些设置？将本页链接粘贴到 Devin 会话中，让它帮你完成所有配置。</Tip>

  <Steps>
    <Step title="连接 Figma MCP">
      在 Devin 能读取你的设计之前，它需要通过 [Figma MCP](/zh/work-with-devin/mcp) 获取对你 Figma 文件的访问权限。连接完成后，MCP 将供你组织内所有人使用——任何团队成员都可以在自己的 Devin 会话中链接 Figma 文件。

      1. 在 Figma 中，点击你的 **profile icon > Settings > Security**
      2. 在 **Personal access tokens** 下，点击 **Generate new token**
      3. 至少为其在 **File content** 和 **Dev resources** 上授予 **read** 权限
      4. 复制该 token
      5. 在 Devin 中，前往 **Settings > Connections > MCP servers**，找到 **Figma** 并点击 **Enable**
      6. 在提示时粘贴你的 token

      <Tip>
        考虑为 Devin 创建一个专用的 Figma 账号 (例如：`devin@yourcompany.com`) ，并赋予其对设计文件的查看权限。这样可以避免将 MCP 绑定到个人账号上，并在团队规模扩大时让访问权限管理更加方便。
      </Tip>

      连接完成后，Devin 可以读取你所链接的任意 Figma 文件——直接从设计中提取组件层级、颜色、间距、字体排版和布局约束。
    </Step>

    <Step title="分享设计链接并向 Devin 输入提示">
      在你的提示词中粘贴一个 Figma 文件的 URL，并说明你想要实现什么。要具体说明要构建哪些 frame，以及要使用代码库中的哪些部分。

      <PromptBlock>
        ```txt 实现 Figma 中的定价页面 theme={null}
        从这个 Figma 文件中实现定价页面：
        https://figma.com/file/abc123/Pricing-Page

        重点关注 "Marketing" 页面上的 "Pricing Section" frame。它包括：
        - 标题 + 副标题区块
        - 3 张定价层级卡片（Free、Pro、Enterprise），带功能列表
        - 卡片下方的对比表格
        - 移动端布局：卡片垂直堆叠，表格可滚动

        使用我们在 tailwind.config.ts 中的 Tailwind 配置来处理颜色和间距。
        复用 src/components/ui/ 中已有的 Card 和 Button 组件。
        页面应作为一个新路由放在 src/app/pricing/page.tsx。

        实现完成后，启动开发服务器并验证结果：
        - 在桌面端（1440px）、平板（768px）和移动端（375px）视口下
          截取整页截图
        - 录制一段视频，展示滚动浏览页面并与悬停状态交互
        - 在本次会话中把截图和录屏分享给我
        - 将它们附加到 PR 中，方便审阅者查看视觉效果
        - 在实现效果与 Figma 设计一致之前不要创建 PR
        ```
      </PromptBlock>

      **高质量 Figma 提示词的关键要素：**

      * 链接到具体的 Figma 文件 (而不仅是项目)
      * 指明文件中精确的 frame 或页面——大型文件可能有几十个页面
      * 提及你现有的组件库和 CSS 框架
      * 说明设计 token 的存放位置 (例如 `tailwind.config.ts`、`src/tokens/`)
      * 指定新组件的目标文件路径

      如果你发现自己在多个会话中重复相同的上下文 (例如，“所有新页面都放在 `src/app/`”或“我们使用 Radix UI primitives”) ，可以把这些反馈给 Devin，它会自动建议将其保存为 [Knowledge](/zh/product-guides/knowledge)，这样你下次就不必重复说明了。
    </Step>

    <Step title="Devin 会提取、构建并验证">
      Devin 通过 MCP 读取 Figma 文件，将设计属性映射到你的代码库，实现这些组件，并在浏览器中对结果进行可视化检查。

      1. **读取 Figma 文件** — 从指定的 frame 中获取组件树、设计 token (例如颜色 `#6366F1`、间距 `24px`) 、排版 (`Inter, 18px/28px, 500 weight`) ，以及自动布局属性
      2. **将 token 映射到你的系统** — 将 Figma 颜色匹配到你最接近的 Tailwind token (例如 `#6366F1` → `indigo-500`) ，并使用你的间距刻度体系，而不是对像素值进行硬编码
      3. **构建组件** — 创建遵循你现有模式的 React 组件，在设计匹配的地方复用 `<Card>` 和 `<Button>` 等共享组件
      4. **在浏览器中检查** — 启动你的开发服务器，导航到 `localhost:3000/pricing`，并在多个视口下将结果与 Figma 设计进行可视化对比
      5. **捕获截图和屏幕录制** — Devin 在桌面、平板和移动端断点处截取整页截图，并录制滚动浏览页面和与悬停状态交互的屏幕录制。它会直接在会话中共享这些内容，方便你对结果进行可视化验证——无需自己拉取分支并运行。
      6. **在各处共享可视化结果** — Devin 将截图和录屏附加到 PR 中，这样评审者无需检出代码即可查看视觉效果。如果你已连接 Slack，Devin 还可以将这些内容发到某个频道，方便你的设计团队在不离开 Slack 的情况下进行评审。
      7. **发起 PR** — 提交实现内容，并附上视觉证明和代码变更

      ```
      feat: Implement pricing page from Figma design

      New files:
        src/app/pricing/page.tsx              (pricing page route)
        src/components/pricing/TierCard.tsx   (individual pricing card)
        src/components/pricing/CompareTable.tsx (feature comparison)

      Updated:
        tailwind.config.ts                    (added 2 missing color tokens)

      Verified at: 1440px, 768px, 375px viewports
      ```
    </Step>

    <Step title="通过 Devin Review 审查拉取请求（PR）">
      一旦 Devin 创建 PR，使用 [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) 来审查具体实现。Devin Review 可以发现视觉差异、缺失的响应式断点，以及不符合你设计系统的组件。

      如果有任何需要调整的地方——比如间距不对、缺少 hover 状态、颜色不匹配——直接在 PR 上留下评论，Devin 会进行修复。无需开启新的会话或编写单独的指令。
    </Step>
  </Steps>
</div>