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

# Von Figma zum pixelgenauen Code

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="Von Figma zu pixelgenauem Code" description="Verbinde das Figma-MCP und lass Devin Design-Tokens extrahieren, Komponenten aufbauen und das Ergebnis visuell mit deinen Mockups abgleichen." prompt="Implementiere die Pricing-Seite aus dieser Figma-Datei: https://figma.com/file/abc123/Pricing-Page. Konzentriere dich auf den Frame „Pricing Section“ auf der Seite „Marketing“. Er enthält einen Block mit Überschrift und Unterüberschrift, 3 Pricing-Tier-Karten (Free, Pro, Enterprise) mit Feature-Listen, eine Vergleichstabelle unterhalb der Karten und ein mobiles Layout, bei dem die Karten vertikal gestapelt werden und die Tabelle scrollbar wird. Verwende unsere Tailwind-Konfiguration in tailwind.config.ts für Farben und Abstände. Verwende die vorhandenen Card- und Button-Komponenten aus src/components/ui/. Die Seite soll eine neue Route unter src/app/pricing/page.tsx sein. Starte nach der Implementierung den Dev-Server und erstelle Full-Page-Screenshots bei Desktop- (1440px), Tablet- (768px) und Mobile-Viewport (375px). Nimm eine Bildschirmaufzeichnung auf, in der du durch die Seite scrollst und mit Hover-Zuständen interagierst. Teile die Screenshots und die Aufzeichnung mit mir in der Session. Hänge sie an den PR an, damit Reviewer das visuelle Ergebnis sehen können. Öffne den PR erst, wenn die Implementierung dem Figma-Design entspricht." category="Feature-Entwicklung" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>Möchtest du das nicht manuell einrichten? Füge einen Link zu dieser Seite in eine Devin-Sitzung ein und bitte Devin, alles für dich einzurichten.</Tip>

  <Steps>
    <Step title="Figma-MCP verbinden">
      Bevor Devin deine Designs lesen kann, benötigt es Zugriff auf deine Figma-Dateien über den [Figma MCP](/de/work-with-devin/mcp). Sobald die Verbindung hergestellt ist, steht der MCP allen in deiner Organisation zur Verfügung – jedes Teammitglied kann Figma-Dateien in seinen Devin-Sitzungen verknüpfen.

      1. Klicke in Figma auf dein **Profilbild > Settings > Security**
      2. Klicke unter **Personal access tokens** auf **Generate new token**
      3. Gewähre ihm mindestens **read**-Berechtigungen für **File content** und **Dev resources**
      4. Kopiere den Token
      5. Gehe in Devin zu **Settings > Connections > MCP servers**, suche **Figma** und klicke auf **Enable**
      6. Füge deinen Token ein, wenn du dazu aufgefordert wirst

      <Tip>
        Erwäge, ein eigenes Figma-Konto für Devin zu erstellen (z. B. `devin@yourcompany.com`) mit Betrachterzugriff auf deine Designdateien. So vermeidest du, den MCP an ein persönliches Konto zu binden, und kannst den Zugriff leicht verwalten, während dein Team wächst.
      </Tip>

      Sobald die Verbindung besteht, kann Devin jede Figma-Datei lesen, die du verknüpfst – und direkt aus dem Design Komponentenhierarchien, Farben, Abstände, Typografie und Layout-Constraints extrahieren.
    </Step>

    <Step title="Teile einen Design-Link und gib Devin eine Anweisung">
      Füge die URL einer Figma-Datei zusammen mit dem, was du implementiert haben möchtest, in deinen Prompt ein. Sei konkret, welche Frames umgesetzt werden sollen und welche Teile deiner Codebase verwendet werden sollen.

      <PromptBlock>
        ```txt Implement pricing page from Figma theme={null}
        Implementiere die Pricing-Seite aus dieser Figma-Datei:
        https://figma.com/file/abc123/Pricing-Page

        Konzentriere dich auf den Frame "Pricing Section" auf der Seite "Marketing". Er enthält:
        - Einen Block aus Überschrift + Unterüberschrift
        - 3 Pricing-Tier-Karten (Free, Pro, Enterprise) mit Feature-Listen
        - Eine Vergleichstabelle unterhalb der Karten
        - Mobiles Layout: Karten sind vertikal gestapelt, Tabelle wird scrollbar

        Verwende unsere Tailwind-Konfiguration in tailwind.config.ts für Farben und Abstände.
        Nutze die bestehenden Card- und Button-Komponenten aus src/components/ui/ wieder.
        Die Seite sollte eine neue Route unter src/app/pricing/page.tsx sein.

        Starte nach der Implementierung den Dev-Server und überprüfe das Ergebnis:
        - Mache Screenshots der gesamten Seite auf Desktop (1440px), Tablet (768px)
          und Mobile (375px)
        - Nimm eine Bildschirmaufzeichnung auf, in der du durch die Seite scrollst
          und mit Hover-States interagierst
        - Teile die Screenshots und die Aufzeichnung mit mir in der Session
        - Hänge sie an den PR an, damit Reviewer das visuelle Ergebnis sehen können
        - Öffne den PR nicht, bevor die Implementierung dem Figma-Design entspricht
        ```
      </PromptBlock>

      **Was einen guten Figma-Prompt ausmacht:**

      * Verlinke die konkrete Figma-Datei (nicht nur das Projekt)
      * Benenne den exakten Frame oder die Seite in der Datei – große Dateien können Dutzende Seiten enthalten
      * Verweise auf deine bestehende Komponentenbibliothek und dein CSS-Framework
      * Erwähne, wo deine Design Tokens liegen (z. B. `tailwind.config.ts`, `src/tokens/`)
      * Gib den Zieldateipfad für neue Komponenten an

      Wenn du merkst, dass du denselben Kontext in mehreren Sessions wiederholst (z. B. "alle neuen Seiten kommen in `src/app/`" oder "wir verwenden Radix UI Primitives"), gib Devin dieses Feedback und es wird automatisch vorschlagen, es als [Knowledge](/de/product-guides/knowledge) zu speichern – sodass du es beim nächsten Mal nicht wiederholen musst.
    </Step>

    <Step title="Devin extrahiert, baut und überprüft">
      Devin liest die Figma-Datei über das MCP, ordnet Designeigenschaften deiner Codebasis zu, implementiert die Komponenten und öffnet dann den Browser, um das Ergebnis visuell zu überprüfen.

      1. **Liest die Figma-Datei** – Ruft den Komponentenbaum, Design-Tokens (Farben wie `#6366F1`, Abstände wie `24px`), Typografie (`Inter, 18px/28px, 500 weight`) und Auto-Layout-Eigenschaften aus dem angegebenen Frame ab
      2. **Ordnet Tokens deinem System zu** – Ordnet Figma-Farben den am besten passenden Tailwind-Tokens zu (z. B. `#6366F1` → `indigo-500`) und verwendet deine Abstandsskala, anstatt Pixelwerte hart zu kodieren
      3. **Baut die Komponenten** – Erstellt React-Komponenten, die deinen bestehenden Mustern folgen, und verwendet gemeinsam genutzte Komponenten wie `<Card>` und `<Button>` wieder, wo das Design übereinstimmt
      4. **Prüft es im Browser** – Startet deinen Dev-Server, navigiert zu `localhost:3000/pricing` und vergleicht das Ergebnis visuell mit dem Figma-Design über mehrere Viewports hinweg
      5. **Erfasst Screenshots und Bildschirmaufnahmen** – Devin erstellt seitenfüllende Screenshots für Desktop-, Tablet- und Mobile-Breakpoints und nimmt eine Bildschirmaufnahme auf, in der durch die Seite gescrollt und mit Hover-Zuständen interagiert wird. Diese werden direkt in der Session geteilt, damit du das Ergebnis visuell überprüfen kannst – du musst den Branch nicht auschecken und selbst ausführen.
      6. **Teilt Nachweise überall** – Devin hängt die Screenshots und Aufnahmen an den PR (Pull Request) an, damit Reviewer das visuelle Ergebnis sehen können, ohne den Code auszuchecken. Wenn du Slack verbunden hast, kann Devin sie auch in einem Channel posten, sodass dein Designteam sie prüfen kann, ohne Slack zu verlassen.
      7. **Öffnet einen PR** – Reicht die Implementierung mit visuellen Nachweisen ein, die zusammen mit den Codeänderungen angehängt sind

      ```
      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="Überprüfen Sie den Pull Request mit Devin Review">
      Sobald Devin den Pull Request (PR) eröffnet hat, verwende [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery), um die Implementierung zu überprüfen. Devin Review kann visuelle Abweichungen, fehlende responsive Breakpoints und Komponenten erkennen, die nicht deinem Designsystem entsprechen.

      Wenn etwas angepasst werden muss – der Abstand stimmt nicht, ein Hover-State fehlt, die Farben passen nicht – hinterlasse direkt einen Kommentar im PR und Devin kümmert sich darum. Du musst keine neue Session öffnen oder einen separaten Prompt verfassen.
    </Step>
  </Steps>
</div>