Figma

Intégration Figma : accédez aux fichiers de design, extrayez les composants, lisez les tokens, traduisez en code. Faites le lien entre design et développement.

Le plugin Figma fait le lien entre design et développement en connectant Claude Code directement à vos fichiers Figma. Accédez au contexte de design, extrayez les informations des composants, récupérez les tokens de design et traduisez les maquettes en code prêt pour la production, avec une fidélité pixel-perfect.

Les fonctionnalités clés incluent l'extraction de données de design structurées (mise en page, typographie, couleurs) depuis les frames Figma, la récupération des variables et tokens de design, la correspondance entre composants Figma et votre base de code existante via Code Connect, ainsi que la capture de références visuelles pour la validation. Le plugin fonctionne avec le serveur cloud de Figma et l'application de bureau.

Comment l'utiliser : Partagez une URL Figma et demandez à Claude d'implémenter le design. Utilisez /implement-design pour traduire des frames Figma en code en exploitant le design system de votre projet. Utilisez /create-design-system-rules pour générer des directives personnalisées qui encapsulent les conventions de développement de votre équipe. Utilisez /code-connect-components pour établir des correspondances entre les composants Figma et leurs implémentations dans votre base de code.

Exemples de prompts : « Implémente ce design Figma : [coller l'URL Figma] », « Crée des règles de design system pour mon projet React », « Relie mon composant Button à son équivalent Figma », « Extrais les variables de couleur de ce fichier de design ».

Autres plug-ins

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.