Claude Code en agence de design web : le montage complet

Le montage complet pour transformer Claude Code en agent de design web : les 2 skills à installer et les 2 connecteurs MCP à brancher.

Les 4 briques du montage

Brique	Ce que ça apporte à Claude
Skills de design d'Emil Kowalski	les principes de typo, d'espacement, de mise en page et d'animation
Taste skill	un vrai œil, fini les sites génériques qui crient "généré par IA"
Figma en MCP	Claude lit tes maquettes directement
Playwright	Claude ouvre le site dans un navigateur et teste son propre travail

1. Les skills de design d'Emil Kowalski

Des skills de design engineering pour Claude Code : typographie, espacements, layouts, animation. C'est la base, Claude apprend les principes avant de coder.

Dépôt : github.com/emilkowalski/skills (lien à vérifier)
Skill principal : emil-design-eng

Installation :

npx -y skills add emilkowalski/skills --skill emil-design-eng --agent claude-code

2. La taste skill

Une collection de fichiers SKILL.md qui pousse l'agent vers des interfaces modernes et soignées. Elle se calibre par projet avec trois réglages : VARIANCE, MOTION, DENSITY.

Site : tasteskill.dev
Dépôt : github.com/leonxlnx/taste-skill

Installation :

npx -y skills add leonxlnx/taste-skill --skill design-taste-frontend --agent claude-code

Les skills arrivent dans le dossier .claude/skills de ton projet.

3. Figma en MCP

Pour que Claude puisse référencer tes designs au lieu de deviner.

Ouvre Figma en application de bureau
Active le serveur MCP : menu Figma, Preferences, Enable local MCP server
Branche-le à Claude Code :

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Puis sélectionne un frame dans Figma et demande à Claude de l'implémenter.

4. Playwright

C'est la brique qui change tout : Claude ouvre le site dans un navigateur, clique, regarde le rendu et corrige tout seul.

claude mcp add playwright npx @playwright/mcp@latest

L'ordre de travail

Tu décris le site, Claude code une première version avec les skills de design
Tu lui pointes la maquette Figma pour la direction visuelle
Tu lui demandes de vérifier son rendu avec Playwright et de corriger
Tu boucles jusqu'au produit fini

Tu passes de "rends ça plus beau" à un agent qui emmène un site de l'idée au produit fini.

Vérifier que c'est en place

/skills
claude mcp list

Tu dois voir les deux skills et les deux serveurs MCP.

Une question sur une étape ? Réponds directement à ce message, je te réponds.