Configurer un système de design

​

Pourquoi configurer un système de design

• Encodant vos standards visuels : Agent utilise vos composants, couleurs et espacements exacts — pas des valeurs par défaut génériques
• Assurant la cohérence : Chaque application suit le même langage de design
• Réduisant le temps d’intégration : Les nouveaux builders produisent des résultats conformes à la marque immédiatement
• Capturant les connaissances tacites : Les décisions de design et les patterns d’utilisation des composants qui vivent dans les têtes de votre équipe sont documentés pour Agent

​

Ce dont vous aurez besoin

• Bibliothèque de composants frontend sous forme de tarfile ou de bibliothèque de composants Figma
• Ressources de polices et icônes utilisées dans votre système de design
• Toute documentation IA de votre système de design (MCP, Agent Skills)

​

Ce que vous pouvez configurer

1. Instructions personnalisées. Votre fichier custom_instruction/instructions.md donne à Agent les règles générales qui s’appliquent à chaque projet : quelle bibliothèque de composants utiliser, quels jetons de design référencer et quels patterns suivre. Agent dispose toujours de ce fichier dans son contexte.
2. Skills. Les skills dans .agents/skills/ fournissent du matériel de référence détaillé qu’Agent charge à la demande. Utilisez-les pour la documentation de l’API des composants, les guides de thématisation, les bibliothèques de patterns de mise en page et autre contenu de référence approfondi qui serait trop volumineux pour le fichier d’instructions principal.
3. Ressources de design et de marque. Placez vos logos, icônes, polices et autres ressources de marque dans un dossier dédié (par exemple, src/assets/brand/). Configurez un alias de chemin Vite afin qu’Agent et les builders puissent les référencer avec des imports propres comme @brand/logo.svg plutôt que des chemins relatifs fragiles. Cela maintient des références de ressources cohérentes dans l’ensemble du projet.

​

Guide étape par étape

​

Partir de Figma

• Web : Empty Component Library – Web
• Mobile : Empty Component Library – Mobile

1. Importez vos jetons de design. Intégrez vos couleurs, polices et icônes afin que la bibliothèque de composants reflète votre marque.
2. Ajoutez des composants au registre. Parcourez chaque composant et ajoutez-le au registre de composants. L’application de démarrage inclut des skills intégrés pour faciliter ce processus, et vous pouvez travailler sur plusieurs composants en parallèle.
3. Vérifiez que tout s’affiche correctement. Une fois que tous les composants sont enregistrés et s’affichent correctement, passez à Créer le skill du système de design.

​

Partir d’une bibliothèque de composants

1. Créez une nouvelle application Replit et téléchargez vos tarfiles.
2. Demandez à Replit Agent d’installer les packages et d’afficher tous les composants. Agent configurera le projet et affichera votre bibliothèque de composants.
3. Vérifiez le résultat. Assurez-vous que tous les composants s’affichent correctement et correspondent à vos attentes. Une fois tout vérifié, passez à Créer le skill du système de design.

​

Créer le skill du système de design

Create a `<your-design-system-name>` design system skill from the components and packages in this project.

Use the file structure shown below with a `SKILL.md` at the root, a `references/` directory for guides and component docs, and a `packages/` directory containing all dependencies needed to function.

Go through every component in the project and document each one in its own file under `references/components/`, including its props, variants, and example usage.

Format `SKILL.md` as an index that links out to the guide and component reference files, with a "General Guidance" section and a "Components" section, following the example shown below.

File structure:

.agents/skills/your-design-system/
├── SKILL.md
├── references/
│   ├── guides/
│   │   ├── setup.md
│   │   ├── guardrails.md
│   │   ├── layout-and-spacing.md
│   │   └── ...
│   └── components/
│       ├── component-index.md
│       ├── button.md
│       ├── checkbox.md
│       └── ...
└── packages/
    └── (Tar files or code components)

The `SKILL.md` file acts as an index that links out to separate markdown files for guides and component references. Each linked file covers one topic in detail. Here is an example of what the generated `SKILL.md` looks like:

```markdown
---
name: your-design-system
description: Use when building or modifying any UI. Provides component API references, layout guidance, and visual style rules for your design system.
---

# Your Design System

## General Guidance

- [Setup](references/guides/setup.md) — Installation, project configuration, and provider setup
- [Guardrails](references/guides/guardrails.md) — Hard rules that must never be broken (banned patterns, required tokens, accessibility minimums)
- [Layout & Spacing](references/guides/layout-and-spacing.md) — Grid system, spacing scale, responsive breakpoints, and page templates
- ...

## Components

- [Component Index](references/components/component-index.md) — Full list of available components with status and category

Individual component references (props, variants, examples):

- [Button](references/components/button.md)
- [Checkbox](references/components/checkbox.md)
- ...
```

Guide files cover one topic each — setup and installation steps, best practices and rules, reference tables for token values, and short code examples showing correct usage.

Component files document a single component each, including the component name, a brief description, a props table, usage examples, and any guidelines or constraints. The more complete these files are, the better Agent's output will be.

​

Connecter votre skill à Agent

# Design System

Read and follow the design system skill at `.agents/skills/your-design-system/`.
Always apply the design system when building or modifying UI.

​

Valider votre configuration

• custom_instruction/instructions.md pointe Agent vers votre skill de système de design
• .agents/skills/ inclut le skill avec les références de composants, les guides et les packages
• replit.md est pré-rempli avec la présentation du projet, les préférences et l’architecture
• Le fichier de jetons de design est inclus (tokens.css ou équivalent)
• Le package du système de design est pré-installé dans package.json
• Créez une nouvelle application de test et vérifiez qu’Agent utilise correctement le système de design

​

Épingler le système de design à votre organisation

1. Accédez à l’application du système de design dans votre organisation
2. Ouvrez le menu d’action de l’application (menu à trois points)
3. Sélectionnez Pin to Agent input box

​

Maintenir votre système de design dans le temps

• Mettez à jour les fichiers de jetons lorsque votre système de design introduit de nouvelles couleurs, valeurs d’espacement ou de typographie
• Mettez à jour les skills lorsque les composants obtiennent de nouvelles props, variantes ou patterns d’utilisation
• Mettez à jour les instructions lorsque les principes ou standards de design changent
• Mettez à jour les versions des packages lorsque de nouvelles versions de votre système de design sont publiées
• Testez régulièrement en créant une nouvelle application et en vérifiant qu’Agent produit un résultat correct

​

Systèmes de design vs. Modèles personnalisés

​

Ressources associées

• Modèles personnalisés - Configurer des piles entièrement personnalisées pour votre organisation
• Agent Skills - Comment fonctionnent les skills et comment les créer
• Tutoriel Agent Skills - Guide pratique des skills
• replit.md - Personnaliser le comportement d’Agent avec le contexte du projet
• Présentation Enterprise - En savoir plus sur les fonctionnalités Enterprise