Browse commands

/impeccable document

Document

Générer un DESIGN.md conforme au spec qui capture votre système visuel pour que chaque agent IA reste fidèle à la marque.

DESIGN.mdGoogle Stitch format
01Overview

Creative North Star: “The Editorial Sanctuary.” Quiet type, generous air, one committed accent.

02Colors
03Typography
AaCormorant Garamond · Instrument Sans
04Elevation

Flat by default. Shadows appear only as a response to state.

05Components
06Do’s and Don’ts
Tint neutrals toward the accent hue.Gradient text for emphasis.

Les six sections sont fixes, dans un ordre fixe, avec des noms fixes. À côté, DESIGN.json est fourni comme sidecar lisible par machine pour le panneau de design du Live Mode.

Quand l’utiliser

Exécutez /impeccable document une fois que vous avez suffisamment de système visuel à documenter : couleurs, typographie, au moins un bouton et une carte. La commande scanne votre codebase, extrait les tokens et patterns de composants qu’elle trouve, et écrit un DESIGN.md à la racine du projet qui suit le Google Stitch DESIGN.md format, six sections dans un ordre fixe, interopérable avec tout autre outil compatible DESIGN.md.

Utilisez-le quand :

  • Vous venez d’exécuter /impeccable teach et PRODUCT.md existe maintenant. Document est le fichier correspondant côté visuel.
  • Une commande vous y a poussé. Live, craft et polish lisent tous DESIGN.md. S’il est manquant, la compétence suggère d’exécuter document d’abord.
  • Le design a dérivé d’un DESIGN.md plus ancien et le fichier ne décrit plus le système en production.
  • Avant une grande refonte, pour capturer l’état actuel comme référence pour la prochaine direction.

Pour les projets sans code encore (exécution teach fraîche, rien de construit), il existe un mode seed : /impeccable document --seed pose cinq questions stratégiques rapides (stratégie couleur, direction typographique, énergie de mouvement, références, anti-références) et écrit une armature. Relancez en mode scan dès qu’il y a du code.

Comment ça marche

La passe de scan trouve les assets de design par ordre de priorité : custom properties CSS, configuration Tailwind, thèmes CSS-in-JS, fichiers de design tokens, source des composants, la feuille de style globale, et enfin les styles calculés depuis le rendu en direct si un navigateur est disponible. Elle extrait automatiquement tout ce qu’elle peut, puis pose une question groupée pour les parties nécessitant une contribution créative : l’Étoile du Nord créative (une seule métaphore nommée pour tout le système, comme « The Editorial Sanctuary »), les noms de couleurs descriptifs, la philosophie d’élévation et le caractère des composants.

Le résultat est un DESIGN.md avec exactement six sections : Overview, Colors, Typography, Elevation, Components, Do’s and Don’ts. Les en-têtes sont fixes caractère par caractère pour que le fichier soit analysable par d’autres outils. À côté, DESIGN.json est écrit comme sidecar lisible par machine. Ce sidecar est ce que le panneau de design du live mode utilise pour afficher les tuiles bouton, input, nav et carte de ce projet au lieu d’une approximation générique.

Chaque autre commande lit DESIGN.md à l’invocation. Les variantes, polishes, audits et nouvelles fonctionnalités héritent du système visuel sans qu’on ait besoin de le préciser.

Essayez

/impeccable document

Sur un projet avec des tokens déjà définis, cela prend environ deux minutes : le scan trouve votre palette et votre pile typographique, vous choisissez une Étoile du Nord parmi 2 ou 3 options, confirmez les noms de couleurs descriptifs (« Deep Muted Teal-Navy », pas « blue-800 »), et le fichier arrive à la racine du projet.

Sur un projet vierge :

/impeccable document --seed

Cinq questions, environ cinq minutes. Le fichier est une armature, marquée d’un commentaire <!-- SEED --> pour être honnête sur ce qu’il est. Relancez sans le flag une fois que vous avez implémenté des tokens.

Pièges courants

  • L’exécuter trop tôt. Sur un projet sans tokens implémentés, le mode seed est approprié. Ne fabriquez pas un spec complet que le code ne peut pas corroborer. Un faux DESIGN.md est pire que pas de DESIGN.md.
  • Traiter DESIGN.md comme de la documentation pour les humains uniquement. Il est principalement pour l’IA. Chaque autre commande le lit. Le caractère contraignant du format (« jamais », « toujours », Named Rules) est intentionnel.
  • Ajouter une section de premier niveau Layout / Motion / Responsive. Le spec a six sections, dans un ordre fixe, avec des noms fixes. Intégrez le contenu layout ou motion dans Overview (règles de niveau philosophique) ou Components (comportement par composant).
  • Écraser un DESIGN.md existant silencieusement. Document confirme toujours d’abord. Si vous voulez repartir de zéro, renommez le fichier existant ou dites explicitement à la compétence d’écraser.