De la spec au front-end, aucune transmission entre les deux
Pointez votre agent vers un DESIGN.md et une description ; il écrit du code front-end réel et conforme au système — composants, écrans, tableaux de bord — directement dans votre projet. Pas de redlines, pas d’« attente du design ».
En une phrase
Open Design comble l’écart designer-ingénieur en rendant le système de design lisible par la machine : le même agent qui écrit votre code applique le système et rend une vraie UI.
Comment un ingénieur utilise Open Design
- 01
Lisez le système, pas une redline
Le DESIGN.md vit dans le dépôt. Votre agent le lit comme il lit le reste de la base de code — pas de specs exportées à interpréter.
- 02
Générez une UI conforme au système
Décrivez l’écran ou le composant ; l’agent écrit du front-end qui correspond déjà au système. Prototypes, tableaux de bord d’admin, outils internes — en quelques minutes.
- 03
C’est déjà votre code
La sortie est du HTML / code de framework dans votre dépôt, relisible dans une PR. Pas d’étape de traduction entre « le design » et « le build ».
Ce qu’un ingénieur peut générer
prototype Lire le prompt complet → Page de documentation
Une page de documentation avec navigation latérale, contenu déroulant et table des matières. À utiliser lorsque le brief mentionne 'documentation', 'guide', 'référence API' ou 'tutoriel'.
prototype Lire le prompt complet → Runbook d'ingénierie
Un runbook d'ingénierie — vue d'ensemble du service, tableau d'alertes, liens vers les tableaux de bord, procédures courantes avec commandes copiables, rotation d'astreinte et checklist de réponse aux incidents. À utiliser pour les runbooks, docs ops, guides d'astreinte, docs SRE ou 运维手册.
presentation Lire le prompt complet → Plan d'architecture de connaissances Html Ppt
Deck d'architecture blueprint crème — base papier crème #F0EAE0 + surbrillance rouille unique #B5392A, masque de grille blueprint 48px, cartes dures bordure noire 2px, boîtes d'étapes pipeline (une élevée), callout insight rouille à droite, grande police à empattement Playfair, boucle de feedback SVG en pointillés. Zéro dégradé, zéro ombre douce, sérieux et adapté à l'impression.
presentation Lire le prompt complet → Html Ppt Tech Sharing
Présentation de conférence / tech-talk interne — GitHub-dark, JetBrains Mono, blocs de code terminal, pages agenda + Q&R. Pour présentations d'ingénierie, sessions de partage internes, conférences et démonstrations axées sur le code.
prototype Lire le prompt complet → Rapport de Visualisation de Données
Transforme les données CSV, Excel ou JSON en une page de rapport visuel soigné.
prototype Lire le prompt complet → Tableau Kanban
Tableau kanban / tâches avec colonnes (To do / In progress / In review / Done), cartes déplaçables, avatars des assignés, swimlanes et barre de filtre supérieure. À utiliser lorsque 'kanban', 'task board', 'sprint board', 'trello' ou '看板' sont mentionnés.
Front-end avec Open Design vs. la méthode de transmission
| Ce dont vous avez besoin | Avec Open Design | Transmission design-vers-dev |
|---|---|---|
| Obtenir un design à construire | ●Un DESIGN.md que votre agent lit directement | Un fichier Figma que vous réinterprétez à la main |
| Correspondre au système | ●Appliqué automatiquement à la génération | Comparer à l’œil avec une spec, la dérive s’installe |
| Construire outils internes / tableaux de bord | ●Prompt → front-end conforme au système dans le dépôt | Attendre un designer, puis le construire deux fois |
| Revue | ●C’est du code — faites le diff dans une PR | Comparaison au pixel avec une maquette |
| Coût & verrouillage | ●Open source, dans votre dépôt, tourne en local | Un outil de design que toute l’équipe doit licencier |
Du vrai front-end conforme au système, généré directement dans le dépôt. Choisissez-en un proche de ce que vous construisez et décrivez-le.
FAQ ingénierie
-
01 Ai-je encore besoin d’un designer ?
Pour la marque et la direction, oui. Mais pour construire une UI conforme au système et des outils internes, l’agent lit le DESIGN.md et écrit le front-end — sans aller-retour de transmission.
-
02 Que produit-il ?
Du vrai HTML / code de framework dans votre dépôt, relisible dans une PR — pas une maquette que vous réimplémentez.
-
03 Comment reste-t-il conforme au système ?
Le DESIGN.md est la source de vérité ; l’agent l’applique à la génération, donc la sortie correspond sans vérification manuelle au pixel.
-
04 Quels agents puis-je utiliser ?
Claude Code, Codex, Cursor Agent, Gemini CLI et d’autres adaptateurs natifs, avec vos propres clés de fournisseur.
Générez votre prochaine UI ce soir
Mettez une étoile au dépôt, installez Open Design et transformez un DESIGN.md en front-end — dans l’agent que vous utilisez déjà.