Sketch MCP pour le Design

Construire ou affiner un design Sketch pour qu'il corresponde à une référence. Cette compétence est destinée au travail de design dans Sketch ; le workflow inverse est sketch-design-to-code.

La fidélité avant tout

L'objectif est la parité visuelle avec la référence — pas une page plausible avec des sections similaires. Similaire n'est pas terminé. Ne vous arrêtez pas quand le contenu existe ; arrêtez-vous lorsque la comparaison de captures d'écran côte à côte réussit les critères d'achèvement dans references/validation.md.

Guides Sketch requis

get_guide avec topic: "mcp" — toujours ; prérequis MCP, règles run_code, gestion des échecs et vérification visuelle.
get_guide avec topic: "use" — édition Sketch, piles, symboles, styles, remplacements, actifs et prototypage.
get_guide avec topic: "layout" — avant de créer ou restructurer des cadres, groupes, piles, placement de page, dimensionnement, épingles ou types de conteneurs.

Récupérez les sous-thèmes du guide à la demande lorsque la tâche en a besoin : troubleshooting, layout, styling, symbols, assets et prototyping.

Prérequis

Sketch en cours d'exécution avec MCP activé (Préférences → Général → Autoriser les outils IA à interagir avec les documents ouverts).
Un document cible est ouvert, ou l'utilisateur s'attend à ce que vous créiez/utilisiez un nouveau document.
Une référence est disponible sous forme d'URL, de capture d'écran ou de code source.
Le périmètre est suffisamment clair pour agir : page entière vs cadre unique, largeur cible, mode sombre/clair, et page/cadre cible lorsque le document a plusieurs candidats.

Si MCP n'est pas disponible, arrêtez-vous et appelez get_guide avec topic: "troubleshooting". Ne devinez pas la mise en page de mémoire tant que MCP est inaccessible.

Étapes

Suivez ces étapes dans l'ordre. Le flux principal devrait suffire pour un travail ordinaire ; chargez un fichier de référence uniquement lorsque l'étape a besoin de plus de détails ou d'exemples.

Étape 1 — Confirmer le contexte et la référence

Récupérez les guides requis.
Résolvez le document cible avec get_document_info.
Classez le type de référence :
- URL — collectez le titre de la page, la largeur de la fenêtre d'affichage, la structure DOM, le HTML source, le JavaScript/CSS lié ou intégré lorsque disponible, les couleurs/polices calculées, le texte et les URLs des actifs.
- Capture d'écran — collectez les dimensions, les régions, le contenu textuel, l'alignement et les couleurs clés.
- Code — collectez les jetons de thème, la pile de polices, l'échelle d'espacement, les noms de composants, les SVG en ligne et les importations d'actifs.
Extrayez un cahier des charges de fidélité et capturez une capture d'écran de référence de l'ancre à la largeur cible avant toute mutation de mise en page. Le cahier des charges doit inclure les régions (de haut en bas), le texte textuel, les couleurs, la typographie, les largeurs de mise en page et les sources des actifs — voir references/reference-extraction.md.

Pour l'extraction spécifique à la référence, lisez references/reference-extraction.md. Pour la comparaison et les portes d'achèvement, lisez references/validation.md avant l'étape 5.

Étape 2 — Découvrir le contenu Sketch réutilisable

Inspectez avant de muter. Commencez par les outils MCP en lecture seule :

Appelez get_document_info pour les pages, les cadres/graphiques de premier niveau, les nombres de couches et les candidats de mise en page existants.
Appelez get_layer_tree_summary sur les cadres candidats ou les pages pertinentes pour la hiérarchie, les IDs, les noms, les dimensions, les extraits de texte, les nombres de remplacements d'instances de symboles et les indices de piles.
Appelez get_design_assets et get_libraries pour les symboles/composants réutilisables et les actifs de bibliothèque.
Utilisez run_code ciblé uniquement lorsque les résumés n'exposent pas les détails nécessaires.

Préférez modifier un cadre existant uniquement lorsque vous êtes sûr qu'il correspond au design demandé. Sinon, créez un nouveau cadre.

Étape 3 — Planifier la structure avant les pixels

Définissez le plan de couches avant de dessiner :

Régions de premier niveau et leur ordre.
Relations parent/enfant et groupes frères.
Largeurs des régions, largeurs maximales du contenu et sections en pleine largeur vs en colonne.
Zones fixes/épinglées vs contenu défilant.
Candidats symboles, candidats piles, candidats actifs et motifs de piles réutilisables.

N'imposez pas de modèle de page par défaut. Correspond à l'architecture d'information de la référence.

Pour chaque région structurée, décidez du modèle de pile Sketch avant de dessiner : direction, écart, remplissage, alignement, dimensionnement, enveloppement et ordre visuel prévu. Utilisez des piles pour les lignes, colonnes, barres de navigation, barres d'outils, cartes, listes, formulaires, groupes de boutons et contenu répété, sauf s'il y a une raison spécifique pour que la région soit en forme libre. Utilisez des coordonnées manuelles pour le placement au niveau de la page, le chrome épinglé, les superpositions, les masques ou les illustrations véritablement en forme libre.

Étape 4 — Établir les jetons et le cadre de base

Créez ou faites correspondre les échantillons/styles partagés du document pour l'arrière-plan, la bordure, le texte, la marque, le texte atténué et les surfaces importantes. Définissez intentionnellement l'arrière-plan de la page/cadre et effacez les remplissages accidentels des groupes structurels. Pour les détails des symboles, appelez get_guide avec topic: "symbols".

Utilisez les valeurs de la référence : CSS calculé, couleurs échantillonnées de la capture d'écran ou jetons du code. Pour les détails de style, appelez get_guide avec topic: "styling".

Étape 5 — Construire la mise en page progressivement

Appliquez de petites modifications run_code réversibles. Un script doit effectuer une petite action.

Ne construisez jamais une page entière, une région de premier niveau ou une mise en page multi-sections en un seul script. Ne combinez pas le sondage, la création, le style et le réordonnancement dans la même exécution. Gardez les scripts plats : amorcez, trouvez la cible par ID, effectuez une mutation, enregistrez en JSON. Évitez les fonctions d'aide profondes, les IIFE imbriquées et les longs arbres de flux de contrôle.

Construisez de l'extérieur vers l'intérieur :

Cadre de page et arrière-plan.
Conteneurs de région de premier niveau à partir du plan de couches.
Paramètres de pile pour chaque région avant les enfants détaillés.
Texte, formes et instances de symboles à l'intérieur de chaque région en petits lots frères.
Régions fixes/épinglées après que la structure parent est correcte.

Construisez une région de premier niveau à la fois. Après chaque lot de contenu de région :

get_screenshot du cadre à la largeur d'ancre de la référence.
Comparez cette bande de région à l'ancre de la référence — listez les écarts en utilisant la taxonomie dans references/validation.md.
Corrigez les discordances majeures avant de commencer la région suivante.

Après les modifications structurelles, interrogez à nouveau avec get_layer_tree_summary ou capturez d'écran le cadre. Pour les motifs de réordonnancement/reparentage sûrs, lisez references/editing-patterns.md.

Étape 6 — Symboles, actifs et remplacements

Utilisez les symboles existants du document/de la bibliothèque avant de dessiner des groupes de couches uniques répétés. L'interface utilisateur répétée doit normalement devenir un symbole maître avec des instances et des remplacements.

Avant de dessiner des formes détaillées, classez chaque visuel non textuel. Exportez/importez des photos, captures d'écran, illustrations, SVG complexes, images de produits, marques, icônes détaillées, dégradés et bruit sous forme d'actifs SVG/PNG/image. Recréez uniquement les primitives UI simples, les vecteurs simples modifiables, les séparateurs, les pilules et les formes de base dans Sketch.

Pour les icônes/logos/images, établissez d'abord la mise en page avec des espaces réservés simples, puis importez/assignez les actifs image réels une fois la géométrie et l'ordre des piles stables. Préférez les remplacements d'image de symbole sur des couches dédiées pour les actifs répétés.

Pour les motifs de remplacement de symboles, lisez references/symbols.md. Pour les détails d'import/export, appelez get_guide avec topic: "assets".

Étape 7 — Corrections ciblées uniquement

Lorsque l'utilisateur signale un problème ou que la comparaison de captures d'écran montre une discordance :

Inspectez la couche actuelle avec get_layer_tree_summary ou une sonde ciblée avant de muter.
Modifiez uniquement la propriété signalée : une valeur de cadre, un style de texte, une couleur, un ordre de couche, une propriété de pile ou un remplacement.
Recapturez d'écran et confirmez que les nombres d'enfants sont inchangés, sauf si la suppression était intentionnelle.
Si la mise en page se casse ou que des couches sont perdues, dites-le immédiatement et dites à l'utilisateur d'Annuler/Rétablir avant de continuer.

Étape 8 — Validation finale et remise

Ne revendiquez pas la fin tant que les critères d'achèvement ne sont pas satisfaits — voir references/validation.md → Critères d'achèvement.

Capturez une get_screenshot plein cadre à la largeur d'ancre de la référence.
Exécutez la porte de région pour chaque bande dans le cahier des charges de fidélité par rapport à la capture d'écran de référence de l'ancre.
Si un écart majeur persiste, revenez à l'étape 7 et itérez. Ne remettez pas avec des mises en page "assez proches".
Résumez les symboles utilisés, les jetons/styles créés, le nom et l'ID du plan de travail/cadre cible, les régions vérifiées et les écarts mineurs restants.
N'exécutez pas zoomToFitCanvas tant que la tâche n'est pas terminée.

Règles

Règles spécifiques à la direction pour Sketch → design. Les règles génériques MCP/script proviennent de get_guide avec topic: "mcp" et les règles de contenu Sketch proviennent de get_guide avec topic: "use".

Corrigez par patch, ne reconstruisez pas. Si le contenu existe, corrigez les cadres, styles, remplacements ou ordre au lieu de supprimer et recréer des régions majeures.
Basez les nombres d'enfants avant et après les opérations de réordonnancement, reparentage, ajout ou suppression.
N'assignez jamais parent.layers = [...] ; utilisez layer.index pour le réordonnancement et child.parent = newParent pour le reparentage.
Faites correspondre la structure de région de la référence ; le même contenu visuel doit avoir la même relation parent/frère sauf s'il y a une raison délibérée de diverger.
Capturez d'écran après chaque lot significatif et utilisez les écarts de capture d'écran pour choisir la prochaine modification.
La mise en page structurée utilise des piles par défaut. Si les frères se comportent comme du contenu flex, grid, liste, formulaire, nav ou carte dans la référence, créez ou préservez une pile Sketch au lieu de positionner manuellement chaque enfant.
Les actifs sont des actifs. Ne redessinez pas des illustrations complexes, photos, captures d'écran ou marques de marque sous forme d'approximations vectorielles basse fidélité ; exportez/importez ou assignez des actifs image/SVG.
Pas de supposition. N'inventez pas la mise en page, le texte, les couleurs, l'espacement ou les actifs de mémoire ou de motifs UI génériques. Extrayez de la référence ; si une valeur manque, récupérez-la ou demandez à l'utilisateur.
Ancre de référence toujours. Comparez la sortie Sketch à la capture d'écran de référence capturée — pas à votre souvenir de la page.
Porte d'achèvement. Ne vous arrêtez pas parce que les sections existent ou que la page "a l'air similaire". Arrêtez-vous lorsque les critères d'achèvement de references/validation.md sont satisfaits.

Pièges

Recréer la page pour corriger un petit écart gaspille un travail affiné et introduit de nouveaux bugs. Effectuez des modifications chirurgicales à partir des écarts de capture d'écran.
Placer des images directement sur des instances de symboles peut casser la hiérarchie ou échouer dans l'API. Placez les couches d'image dans le maître et pilotez les remplacements d'image par instance.
Sauter les captures d'écran cache les erreurs de mise en page, d'ordre et de couleur. Capturez d'écran chaque lot.
Réordonner avec parent.layers = [...] peut supprimer des enfants ou dupliquer des IDs d'objet. Utilisez plutôt des motifs de réordonnancement sûrs.
L'ordre des piles peut sembler inversé si l'index et la direction d'emballage sont mal compris. Utilisez get_guide avec topic: "layout" et vérifiez avec une capture d'écran.
Les scripts de page entière ou de région sont difficiles à valider, déboguer et récupérer. Divisez par région, configuration de pile et petits lots frères.
La mise en page structurée construite avec des cadres manuels dérive lorsque l'espacement ou l'ordre changent. Utilisez les piles Sketch pour les lignes, colonnes, listes, formulaires, navs, cartes et régions répétées.
Les illustrations complexes reconstruites sous forme de formes primitives produisent des approximations de faible qualité. Exportez/importez SVG/PNG ou utilisez des remplacements d'image ; réservez les formes pour les primitives UI simples.
Les captures d'écran de page seulement au premier affichage peuvent manquer les images paresseuses et les états UI déclenchés par le défilement. Utilisez les outils de navigateur ou d'agent, faites défiler pour déclencher le contenu, puis capturez la fenêtre d'affichage cible.
Achèvement prématuré : l'agent ajoute un en-tête/corps/pied de page avec un style générique et s'arrête. Exécutez la porte de région et les critères d'achèvement ; continuez à corriger jusqu'à ce que les écarts majeurs disparaissent.
Texte et couleurs improvisés : titres paraphrasés, remplissage de type lorem ou gris/bleus par défaut au lieu de valeurs extraites. Utilisez le cahier des charges de fidélité textuel ; rééchantillonnez les couleurs de la référence.
Permanence des espaces réservés : boîtes grises laissées comme "logos" ou "images hero". Exportez/importez les actifs réels avant la remise, sauf si l'utilisateur a demandé des espaces réservés.

Dépannage

Pour les échecs de pont/appel d'outil, les erreurs d'analyseur, les problèmes de connexion MCP ou les échecs de capture d'écran, appelez get_guide avec topic: "troubleshooting" avant de réessayer.

Pour les échecs d'opération de document :

Problèmes de mise en page/pile/ordre → get_guide avec topic: "layout".
Problèmes de remplacement de symbole → get_guide avec topic: "symbols".
Problèmes d'export/import/image → get_guide avec topic: "assets".

Symptômes de construction de design

Le nombre d'enfants a chuté après un script : dites à l'utilisateur d'Annuler, puis inspectez l'opération. Ne répétez pas une affectation de couche en masse.
get_screenshot est vide ou erroné : résolvez à nouveau l'ID du cadre/couche, puis capturez d'écran la page ou le cadre parent si nécessaire.
Le remplacement de symbole n'a aucun effet : récupérez get_symbol_overrides, reconstruisez l'ID de remplacement à partir de commonOverrideIDPrefix + '_' + property, puis capturez d'écran.
Le texte se chevauche dans une pile de ligne : inspectez l'ordre des enfants et l'écart ; corrigez une propriété de pile ou un index enfant à la fois.

Références

get_guide avec topic: "mcp" — Outils MCP, run_code, dépannage, vérification visuelle et règles d'achèvement
get_guide avec topic: "use" — Édition Sketch, piles, symboles, styles, remplacements, actifs et vérification de contenu
get_guide avec topic: "layout" — Piles, placement de page, dimensionnement, épingles, types de conteneurs, réordonnancement/reparentage et dérive de mise en page
Extraction de référence
Motifs d'édition sûrs
Motifs de remplacement de symbole
Boucle de validation
API JavaScript Sketch
StackLayout
Remplacements de symbole (confirmez via get_symbol_overrides dans MCP)

madsouris/sketch-design-from-reference

Qu'est-ce que sketch-design-from-reference ?

Demander à votre IA préférée

Documentation