Concepteur de Composants Figma vers React

Analyse les designs Figma pour proposer une architecture de composants React, des API de props et la gestion des variantes sans générer de code.

déclencheurs:analyze this figmawhat props should this component havedesign the api for thisplan this component from figma

GitHub SKILL.md

Ce qu'il fait

Cette compétence comble le fossé entre le design UI et l'implémentation React. Elle analyse un design Figma via des outils MCP pour déterminer la hiérarchie optimale des composants et une API de props précise qui reflète la structure Figma.

Quand l'utiliser

Utilisez cette compétence lorsque vous avez une URL Figma et que vous devez planifier l'architecture d'un composant React avant d'écrire du code. Elle est idéale pour déterminer si un design doit être un composant unique ou être divisé en plusieurs composants plus petits, et pour définir comment les variantes se mappent aux props React.

Ce qui est inclus

Instructions : Un workflow complet en 7 étapes comprenant la récupération du contexte de design, la résolution de la définition des variables, la vérification des captures d'écran et l'analyse du modèle d'interaction (sans état vs contrôlé).
Guidage : Des principes de design stricts pour garantir que l'implémentation suit exactement la structure Figma, en évitant les modèles de bibliothèques externes.

Agents compatibles

Agents avec intégration Figma MCP (ex. Claude Code, Codex).

Étiquettes

#figma #react #frontend #component-design #ui-ux #architecture

Pas encore audité

Cette compétence n'a pas encore été examinée par notre pipeline d'audit automatisé.

Informations

Dépôt: ai-enablement-prompts
Étoiles: 117

Compétences similaires

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

BK-CI Design Patterns Guide

Practical guide to design patterns used in the BK-CI project (Kotlin/Spring). Covers factory, strategy, singleton, decorator, observer, template method, chain-o

Node.js Best Practices

Guidelines and decision-making for Node.js architecture, runtime, async patterns, security, validation, and testing to inform framework and system choices.

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Migrate from Next.js App Router to TanStack Start

Step-by-step migration checklist to move an App Router Next.js codebase to TanStack Start, covering routes, server functions, middleware, data fetching and buil

ClearShot — Screenshot UI Analysis

Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe

Colorize — Strategic UI Color Introduction

Introduce purposeful color to monochromatic interfaces to improve hierarchy, meaning, and visual engagement while preserving accessibility.

Retour aux compétences