- Toi
- « Regarde le frame sélectionné dans Figma et génère-moi le composant React correspondant, en respectant nos tokens Tailwind. »
Lecture de la structure Figma (layers, auto-layout, variants) + génération de code aligné sur ton design system.
Résultat type
→ Reading Figma selection: "Card/ProductTile (variant: default)"
→ Extracting: 1 frame, 3 auto-layout groups, 5 text styles, 2 color tokens
Généré : components/ProductTile.tsx
export function ProductTile({ title, price, image }: Props) {
return (
<article className="flex flex-col gap-3 rounded-xl bg-bg-alt p-4
hover:border-orange/30 transition">
<img src={image} alt={title} className="aspect-video rounded-lg" />
<h3 className="text-text font-semibold text-[15px]">{title}</h3>
<p className="text-orange font-medium">{price}</p>
</article>
);
}
Notes
- La couleur #FF6B00 du design = ton token bg-orange. Remplacé.
- Le spacing 12/16/24 match ton grid Tailwind. Pas de pixel magique.
- Le variant "hover" du frame n'est pas rendu, dis-moi si tu veux que
j'ajoute un état.