Sales kontaktierenClaude ausprobieren

Figma

Figma-Integration: Design-Dateien abrufen, Komponenten extrahieren, Tokens lesen, in Code übersetzen. Überbrücke die Lücke zwischen Design und Entwicklung.

Das Figma-Plugin schließt die Lücke zwischen Design und Entwicklung, indem es Claude Code direkt mit deinen Figma-Design-Dateien verbindet. Greife auf Design-Kontext zu, extrahiere Komponenteninformationen, rufe Design-Tokens ab und übersetze Designs in produktionsreifen Code mit pixelgenauer Wiedergabe.

Zu den wichtigsten Funktionen zählen: Extraktion strukturierter Design-Daten (Layout, Typografie, Farben) aus Figma-Frames, Abrufen von Design-Variablen und -Tokens, Zuordnung von Figma-Komponenten zu deiner bestehenden Codebasis via Code Connect sowie die Aufnahme visueller Referenzen zur Validierung. Das Plugin funktioniert sowohl mit Figmas Cloud-Server als auch mit der Desktop-App.

So verwendest du es: Teile eine Figma-URL und bitte Claude, das Design umzusetzen. Verwende /implement-design, um Figma-Frames mithilfe des Design-Systems deines Projekts in Code zu übersetzen. Verwende /create-design-system-rules, um individuelle Richtlinien zu generieren, die die Entwicklungskonventionen deines Teams abbilden. Verwende /code-connect-components, um Zuordnungen zwischen Figma-Komponenten und deinen Codebase-Implementierungen herzustellen.

Beispiel-Prompts: „Implementiere dieses Figma-Design: [Figma-URL einfügen]", „Erstelle Design-System-Regeln für mein React-Projekt", „Verknüpfe meine Button-Komponente mit ihrem Figma-Gegenstück", „Extrahiere die Farbvariablen aus dieser Design-Datei".

Weitere Plugins

Frontend Design

Frontend design skill for UI/UX implementation

Superpowers

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

Code Review

Automated code review for pull requests using multiple specialized agents with confidence-based scoring

Context7

Upstash Context7 MCP server for up-to-date documentation lookup. Connects to Context7's hosted remote MCP server (https://mcp.context7.com/mcp) — no local Node.js or npx required — to pull version-specific documentation and code examples directly from source repositories into your LLM context. Authenticate with Context7 when prompted.

Code Simplifier

Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality

Playwright

Browser automation and end-to-end testing MCP server by Microsoft. Enables Claude to interact with web pages, take screenshots, fill forms, click elements, and perform automated browser testing workflows.