Communitygithub.com

Atelier UI – Design Orchestrator

Adaptiver Frontend- und visueller Design-Orchestrator. Routet sauber zwischen Brand-/Landing-Sites, SaaS/App-UI-Verfeinerungen und 3D-/WebGL-Visual-Builds mit 1-Schritt-Intake, progressivem Modulladen, Zero-Install-Fallbacks und deterministischen QA-Gates. Auslösen bei UI-/Webdesign, Redesign, Landing Pages, Dashboards oder visuellen Optimierungsanfragen.

Was ist Atelier UI – Design Orchestrator?

Atelier UI ist ein spezialisierter KI-Skill, der als schlanker Design-Orchestrator für Entwickler und KI-Agenten agiert. Er vermeidet das gleichzeitige Laden aller Module und routet stattdessen nach einem ersten Intake-Schritt gezielt zu genau einem Build-Modul. Der Skill unterstützt drei Oberflächenmodi: Brand-/Landing-Sites, SaaS-/App-UI und 3D-/WebGL-Visuals. Plattformen wie Claude Code, Cursor, Codex und Gemini werden unterstützt, sofern sie das laden von SKILL.md-basierten Konfigurationen erlauben. Nach dem Build durchläuft das Ergebnis eine mehrstufige QA-Pipeline: statischer Lint, Browser-Check (Desktop und Mobile) und optional eine kontextfreie visuelle Kritik. Der Skill enthält eingebaute Zero-Dependency-Skripte (`detect-env.mjs`, `lint-ui.mjs`, `check-ui.mjs`) für die Umgebungserkennung, mechanische Prüfungen und CDP-basierte Verifikation, ohne dass externe Tools installiert sein müssen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/yashh1323/atelier-ui/tree/HEAD
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Atelier UI – Design Orchestrator?

Halten Sie den Kontext schlank. Laden Sie nie alle Module auf einmal – routen Sie nach dem Intake zu einem Build-Modul und verlagern Sie mechanische Prüfungen in Skripte.

In den folgenden Befehlen und Pfaden ist <skill> das Verzeichnis, das diese SKILL.md enthält (z. B. ~/.gemini/config/skills/atelier-ui, %USERPROFILE%\.gemini\config\skills\atelier-ui unter Windows oder workspace-lokal .agents/skills/atelier-ui). Setzen Sie "<skill>/..." in Shell-Befehlen immer in Anführungszeichen, damit Pfade mit Leerzeichen funktionieren.

Arbeitsablauf

1. Umgebung prüfen (einmalig)

Führen Sie den Fähigkeitsscanner im Projektstammverzeichnis aus:

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

Gehen Sie nicht davon aus, dass externe Tools (impeccable, agent-browser) vorhanden sind. Verwenden Sie die JSON-Ausgabe (project.framework, project.devCommand, tools.impeccableCmd, tools.agentBrowser, tools.browserBinary, tools.cdpSupported), um den Stack und die QA-Stufe auszuwählen.

2. Intake (1 Schritt, mit Standardwerten)

Lesen Sie <skill>/modules/01-intake.md nur, wenn eine Kernfrage offen ist.

  • Stellen Sie alle fehlenden Fragen in einer nummerierten Nachricht mit Standardwerten (oder beginnen Sie sofort, wenn der Benutzer vollständige Angaben gemacht oder "defaults" / "go ahead" gesagt hat).
  • Schreiben Sie den festgelegten Plan in .atelier/BRIEF.md, damit die Kontextkomprimierung nie Anforderungen verliert.

3. Route zu EINEM Build-Modul

Wählen Sie den Oberflächenmodus aus dem Brief und lesen Sie nur diese Datei:

  • Brand / Landing / Portfolio / Lokales Gewerbe (Überzeugen oder Erleben): Lesen Sie <skill>/modules/02-brand-site.md.
  • SaaS / Dashboard / Dokumentation / Bestehende App (Betreiben oder Lesen): Lesen Sie <skill>/modules/03-app-ui.md.
  • 3D-Welt / WebGL / Shader (3D): Lesen Sie <skill>/modules/04-3d-visual.md.

4. Universelle Craft-Grundlage (immer aktiv)

  1. Tokens statt rohem Hex: Verwenden Sie CSS-Custom-Properties (:root) oder die vorhandenen Tailwind-/Theme-Tokens des Projekts.
  2. Keine Layout-Fallen: overflow-x: clip auf html, body (niemals 100vw); minmax(0, 1fr) auf Bildraster-Spuren; min-width: 0; overflow-wrap: break-word auf Überschriften.
  3. Bewegung & Barrierefreiheit: Niemals transition: all; animieren Sie nur transform / opacity / clip-path / filter; fügen Sie :focus-visible und @media (prefers-reduced-motion: reduce) hinzu.
  4. Anti-Schludrig-Sperrliste: Keine unverdienten Lila-zu-Blau-Verläufe, kein Gradiententext auf Body/Überschriften, keine verschachtelten Karten in Karten, keine 01/02/03-Eyebrow-Kicker über Überschriften, keine Emojis als UI-Icons, keine erfundenen Testimonials, Logos oder Metriken.
  5. Kontrast & Zustände: Textkörper >= 4,5:1, großer Text >= 3:1; jedes interaktive Steuerelement deckt die Zustände Standard, Hover, Focus-Visible, Deaktiviert, Laden, Leer und Fehler ab.
  6. Sauberer Text: Buttons sind <Verb> <Objekt> (niemals generisch "Mehr erfahren"). Lassen Sie niemals Platzhaltertexte stehen (Lorem ipsum, Acme, TODO).

(Mechanische Prüfungen leben in lint-ui.mjs und check-ui.mjs; strukturelle Layout-Regeln wie verschachtelte Karten und minmax(0, 1fr) werden von Ihnen und dem Kritiker der Stufe 3 überprüft.)

5. Verifikation & Kritik-Gate

Lesen Sie nach dem Build <skill>/modules/05-qa-gate.md und führen Sie die QA-Leiter aus:

  1. Statischer Schludrigkeits-Lint (tools.impeccableCmd falls erkannt, plus node "<skill>/scripts/lint-ui.mjs" <target-dir>).
  2. Browser-Check (agent-browser, das Browser-Tool Ihrer Umgebung oder node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet) bei Desktop (1440x900) und Mobil (390x844).
  3. Optionaler kontextfreier visueller Kritiker-Review unter Verwendung der aufgenommenen Screenshots (wenn QA-Tiefe = critic oder deep).

Dateien in diesem Skill

Pfad (unter <skill>/)Laden, wenn …
modules/01-intake.mdSchritt 2: Klären mehrdeutiger Briefe & Schreiben von .atelier/BRIEF.md
modules/02-brand-site.mdSchritt 3: Neue Marketing-, Firmen-, lokale Gewerbe- oder Portfolio-Seiten
modules/03-app-ui.mdSchritt 3: Dashboards, Tools, Docs oder Verfeinerung bestehender Apps
modules/04-3d-visual.mdSchritt 3: Three.js, WebGL oder Shader-Builds
modules/05-qa-gate.mdSchritt 5: Ausführen von Lints, Browser-Checks und kontextfreien Kritiker-Reviews
library/themes.jsonSchritt 3 (02-brand-site): Umgang mit nicht-generischen Farb- & Schriftkombinationen
scripts/detect-env.mjsSchritt 1: Erkennen des Projektstacks und installierter CLI-/Browser-Tools
scripts/lint-ui.mjsSchritt 5: Integrierter, abhängigkeitsfreier Schludrigkeits- & Craft-Grundlagen-Linter
scripts/check-ui.mjsSchritt 5: Integrierter, abhängigkeitsfreier Chrome DevTools Protocol (CDP)-Verifizierer

Verwandte Skills

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