Design Feel Like Your Own Product

Apprend les "mouvements signatures" Figma d'un designer pour que les nouveaux composants semblent faits maison, pas copiés-collés.

par Tiannanzhao · Tiannanzhao/design-feel-like-your-own-product

Testé · Fonctionne ★ 9.2/10

Design Feel Like Your Own Product — Apprend les "mouvements signatures" Figma d'un designer pour que les nouveaux composants semblent faits maison, pas copiés-collés.

Ce que fait

Lit un fichier Figma via le serveur MCP Figma pour construire un modèle sémantique des rôles de couleur d'un designer, de ses signatures d'espacement/rayon, et de sa hiérarchie d'information, puis génère de nouveaux composants à partir de ce modèle internalisé plutôt que de copier des valeurs de pixels brutes. Se déclenche lorsqu'un utilisateur partage un fichier Figma et demande de nouveaux composants, plugins ou UI qui devraient 'correspondre au style' ou étendre un système de conception existant, et se dégrade gracieusement vers des spécifications collées ou une capture d'écran si les outils MCP Figma ne sont pas disponibles.

Rapport de test

J'ai exécuté la mini-tâche dans le mode de repli documenté de la compétence Figma-MCP-unavailable : à partir de spécifications de système de conception uniquement collées, elle a dérivé une règle de rayon à deux niveaux (6px interactif / 8px surface) et a réutilisé le même hexadécimal de turquoise pour le bouton principal et la pastille de statut 'actif' au lieu d'inventer une nouvelle couleur, concrètement plus ancré qu'une modale SaaS générique de base. Compétence autonome, fichier unique; la licence est CC BY-NC 4.0 non commerciale, divulguée à l'avance dans le README, pas cachée.

Testé le: 2026-07-15 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/Tiannanzhao/design-feel-like-your-own-product.git
mkdir -p ~/.claude/skills
cp -r design-feel-like-your-own-product ~/.claude/skills/design-feel-like-your-own-product

Commandes et exemples de prompts

/design-feel-like-your-own-productApprend les "mouvements signatures" Figma d'un designer pour que les nouveaux composants semblent faits maison, pas copiés-collés.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

build a new settings modal that matches our Figma design system
generate a component that feels like it came from our own design file
match the spacing and color roles from our Figma when designing this

Rapport complet →