Communitygithub.com

atelier-ui — Orchestrateur de conception

Orchestrateur adaptatif de conception frontend et visuelle. Aiguille proprement entre sites vitrine/marque, UI SaaS/application et constructions 3D/WebGL avec une prise en charge en 1 tour, chargement progressif de modules, replis sans installation et portes de contrôle qualité déterministes. Déclenchement sur les demandes de conception UI, de refonte, de pages d'atterrissage, de tableaux de bord ou de polissage visuel.

Qu'est-ce que atelier-ui — Orchestrateur de conception ?

Atelier UI est un orchestrateur de conception frontend et visuelle pour agents IA, conçu pour traiter efficacement une large gamme de tâches UI : sites vitrine/marque, UI SaaS/application et visualisations 3D/WebGL. Il fonctionne en minimisant la charge cognitive : il sonde d'abord l'environnement du projet (framework, outils disponibles), puis pose toutes les questions manquantes en un seul tour avec des valeurs par défaut, avant de charger un seul module de construction spécialisé. Ce design évite de surcharger l'agent avec des informations inutiles. Après la construction, une passerelle de contrôle qualité en trois étapes applique un linting anti-bâclage, des vérifications navigateur (desktop et mobile) et, optionnellement, une revue visuelle par un critique sans contexte. Atelier UI fonctionne comme un ensemble de fichiers (scripts, modules, thèmes) référencé par un chemin `<skill>` et peut être utilisé dans n'importe quel environnement de développement (local, espace de travail) sans installation globale.

Compatible avec✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/yashh1323/atelier-ui/tree/HEAD
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Atelier UI — Orchestrateur de conception

Gardez le contexte léger. Ne chargez jamais tous les modules à la fois — aiguillez vers un module de construction après la prise en charge, et déléguez les vérifications mécaniques aux scripts.

Dans les commandes et chemins ci-dessous, <skill> est le répertoire contenant ce fichier SKILL.md (par exemple ~/.gemini/config/skills/atelier-ui, %USERPROFILE%\.gemini\config\skills\atelier-ui sur Windows, ou .agents/skills/atelier-ui local à l'espace de travail). Mettez toujours entre guillemets "<skill>/..." dans les commandes shell pour que les chemins avec espaces fonctionnent.

Flux de travail

1. Sonder l'environnement (une seule fois)

Exécutez le scanner de capacités à la racine du projet :

node "<skill>/scripts/detect-env.mjs"

Ne présumez pas de l'existence d'outils externes (impeccable, agent-browser). Utilisez la sortie JSON (project.framework, project.devCommand, tools.impeccableCmd, tools.agentBrowser, tools.browserBinary, tools.cdpSupported) pour choisir la pile et le niveau de QA.

2. Prise en charge (1 tour, avec valeurs par défaut)

Lisez <skill>/modules/01-intake.md uniquement si une question essentielle reste ouverte.

  • Posez toutes les questions manquantes en un seul message numéroté avec des valeurs par défaut (ou commencez immédiatement si l'utilisateur a fourni tous les détails ou a dit "defaults" / "go ahead").
  • Écrivez le plan arrêté dans .atelier/BRIEF.md pour que la compaction de contexte ne perde jamais les exigences.

3. Aiguiller vers UN module de construction

Choisissez le mode de surface à partir du brief et lisez uniquement ce fichier :

  • Marque / Page d'atterrissage / Portfolio / Entreprise locale (Persuader ou Expérience) : lisez <skill>/modules/02-brand-site.md.
  • SaaS / Tableau de bord / Docs / Application existante (Opérer ou Lire) : lisez <skill>/modules/03-app-ui.md.
  • Monde 3D / WebGL / Shaders (3D) : lisez <skill>/modules/04-3d-visual.md.

4. Socle de conception universel (toujours actif)

  1. Jetons plutôt que couleurs brutes : Utilisez des propriétés personnalisées CSS (:root) ou les jetons Tailwind/thème existants du projet.
  2. Pas de pièges de mise en page : overflow-x: clip sur html, body (jamais 100vw) ; minmax(0, 1fr) sur les pistes de grille d'images ; min-width: 0; overflow-wrap: break-word sur les titres d'affichage.
  3. Mouvement et accessibilité : Jamais transition: all ; animez uniquement transform / opacity / clip-path / filter ; ajoutez :focus-visible et @media (prefers-reduced-motion: reduce).
  4. Liste noire anti-bâclage : Pas de dégradés violet-à-bleu non mérités, pas de texte en dégradé sur le corps/les titres, pas de cartes imbriquées dans des cartes, pas d'accroches 01/02/03 au-dessus des gros titres, pas d'émojis comme icônes UI, pas de témoignages, logos ou métriques inventés.
  5. Contraste et états : Texte du corps >= 4,5:1, grand texte >= 3:1 ; chaque contrôle interactif couvre les états par défaut, survol, focus-visible, désactivé, chargement, vide et erreur.
  6. Copie propre : Les boutons sont <Verbe> <Objet> (jamais le générique "En savoir plus"). Ne laissez jamais de texte de remplacement (Lorem ipsum, Acme, TODO).

(Les vérifications mécaniques se trouvent dans lint-ui.mjs et check-ui.mjs ; les règles de mise en page structurelles telles que les cartes imbriquées et minmax(0, 1fr) sont vérifiées par vous et le critique de niveau 3.)

5. Vérification et porte de contrôle critique

Après la construction, lisez <skill>/modules/05-qa-gate.md et exécutez l'échelle de QA :

  1. Lintage anti-bâclage statique (tools.impeccableCmd s'il est détecté, plus node "<skill>/scripts/lint-ui.mjs" <target-dir>).
  2. Vérification navigateur (agent-browser, l'outil navigateur de votre environnement, ou node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet) en desktop (1440x900) et mobile (390x844).
  3. Vérification visuelle optionnelle par un critique sans contexte utilisant les captures d'écran (quand Profondeur de QA est critic ou deep).

Fichiers de cette compétence

Chemin (sous <skill>/)Charger quand
modules/01-intake.mdÉtape 2 : clarifier les briefs ambigus et écrire .atelier/BRIEF.md
modules/02-brand-site.mdÉtape 3 : nouvelles pages marketing, d'entreprise, d'entreprise locale ou de portfolio
modules/03-app-ui.mdÉtape 3 : tableaux de bord, outils, docs ou raffinement d'applications existantes
modules/04-3d-visual.mdÉtape 3 : constructions Three.js, WebGL ou shader
modules/05-qa-gate.mdÉtape 5 : exécution des lintages, vérifications navigateur et revues critiques sans contexte
library/themes.jsonÉtape 3 (02-brand-site) : traiter les associations de couleurs et de polices non génériques
scripts/detect-env.mjsÉtape 1 : détection de la pile du projet et des outils CLI/navigateur installés
scripts/lint-ui.mjsÉtape 5 : linteur anti-bâclage et du socle de conception intégré sans dépendance
scripts/check-ui.mjsÉtape 5 : vérificateur du protocole Chrome DevTools (CDP) intégré sans dépendance

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community