Communitygithub.com

Atelier UI — Orquestador de Diseño

Orquestador adaptativo de frontend y diseño visual. Enruta de forma limpia entre sitios de marca/landing, refinamiento de UI SaaS/app y construcciones visuales 3D/WebGL usando intake de 1 turno, carga progresiva de módulos, fallbacks sin instalación y compuertas QA deterministas. Actívalo ante solicitudes de diseño UI/sitios web, rediseños, landing pages, dashboards o pulido visual.

¿Qué es Atelier UI — Orquestador de Diseño?

Atelier UI es una habilidad diseñada para agentes de IA (como Claude Code, Gemini, Codex AI) que orquesta tareas de diseño frontend y visual de manera adaptativa y eficiente. Su propósito principal es evitar la sobrecarga cognitiva cargando únicamente el módulo de construcción necesario tras un rápido proceso de intake de un solo turno. Esto lo hace ideal para una amplia gama de proyectos: desde sitios de marca y landing pages (usando el módulo `02-brand-site.md`), pasando por dashboards y refinamiento de aplicaciones SaaS existentes (con `03-app-ui.md`), hasta mundos 3D y shaders WebGL (con `04-3d-visual.md`). La habilidad se apoya en un conjunto robusto de reglas universales de diseño (Craft Floor) que garantizan calidad, accesibilidad y coherencia visual, y utiliza scripts de verificación deterministas (`lint-ui.mjs`, `check-ui.mjs`) para validar el resultado, con la opción adicional de una revisión crítica visual (QA critic). Atelier UI está diseñado para ser multiplataforma, funcionando con cualquier agente que pueda ejecutar Node.js y comandos de shell, y su estructura modular y ligera evita dependencias externas pesadas.

Compatible con✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/yashh1323/atelier-ui/tree/HEAD
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace Atelier UI — Orquestador de Diseño?

Mantén el contexto ligero. Nunca cargues todos los módulos a la vez—enruta a un módulo de construcción después del intake, y delega las comprobaciones mecánicas a scripts.

En los comandos y rutas a continuación, <skill> es el directorio que contiene este archivo SKILL.md (por ejemplo ~/.gemini/config/skills/atelier-ui, %USERPROFILE%\.gemini\config\skills\atelier-ui en Windows, o workpace-local/.agents/skills/atelier-ui). Siempre encierra entre comillas "<skill>/..." en los comandos de shell para que las rutas con espacios funcionen.

Flujo de Trabajo

1. Sondear el Entorno (Una Vez)

Ejecuta el escáner de capacidades en la raíz del proyecto:

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

No asumas que las herramientas externas (impeccable, agent-browser) existen. Usa la salida JSON (project.framework, project.devCommand, tools.impeccableCmd, tools.agentBrowser, tools.browserBinary, tools.cdpSupported) para elegir la pila tecnológica y el nivel de QA.

2. Intake (1 Turno, Con Valores por Defecto)

Lee <skill>/modules/01-intake.md solo si alguna pregunta central está abierta.

  • Haz todas las preguntas faltantes en un mensaje numerado con valores por defecto (o comienza de inmediato si el usuario proporcionó todos los detalles o dijo "defaults" / "go ahead").
  • Escribe el plan acordado en .atelier/BRIEF.md para que la compactación de contexto nunca pierda los requisitos.

3. Enrutar a UN Módulo de Construcción

Elige el modo de superficie del brief y lee solo ese archivo:

  • Marca / Landing / Portafolio / Negocio Local (Persuadir o Experiencia): lee <skill>/modules/02-brand-site.md.
  • SaaS / Dashboard / Docs / App Existente (Operar o Leer): lee <skill>/modules/03-app-ui.md.
  • Mundo 3D / WebGL / Shaders (3D): lee <skill>/modules/04-3d-visual.md.

4. Suelo de Artesanía Universal (Siempre Activo)

  1. Tokens sobre hex brutos: Usa propiedades personalizadas de CSS (:root) o los tokens de Tailwind/tema existentes del proyecto.
  2. Sin trampas de layout: overflow-x: clip en html, body (nunca 100vw); minmax(0, 1fr) en las pistas de la cuadrícula de imágenes; min-width: 0; overflow-wrap: break-word en encabezados de display.
  3. Movimiento y accesibilidad: Nunca transition: all; anima solo transform / opacity / clip-path / filter; añade :focus-visible y @media (prefers-reduced-motion: reduce).
  4. Lista de prohibiciones anti-copia: Sin gradientes de púrpura a azul inmerecidos, sin texto con gradiente en cuerpo/encabezados, sin tarjetas anidadas dentro de tarjetas, sin etiquetas de ceja 01/02/03 sobre titulares, sin emojis como iconos de UI, sin testimonios, logotipos o métricas inventadas.
  5. Contraste y estados: Texto del cuerpo >= 4.5:1, texto grande >= 3:1; cada control interactivo cubre los estados: predeterminado, hover, focus-visible, deshabilitado, cargando, vacío y error.
  6. Texto limpio: Los botones son <Verbo> <Objeto> (nunca el genérico "Learn more"). Nunca dejes texto de relleno (Lorem ipsum, Acme, TODO).

(Las comprobaciones mecánicas residen en lint-ui.mjs y check-ui.mjs; las reglas de layout estructural, como tarjetas anidadas y minmax(0, 1fr), son verificadas por ti y el crítico de Nivel 3.)

5. Verificar y Barrera de Crítica

Después de construir, lee <skill>/modules/05-qa-gate.md y ejecuta la escalera de QA:

  1. Lint anti-copia estático (tools.impeccableCmd si se detecta, más node "<skill>/scripts/lint-ui.mjs" <target-dir>).
  2. Comprobación de navegador (agent-browser, la herramienta de navegador de tu entorno, o node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet) en escritorio (1440x900) y móvil (390x844).
  3. Revisión crítica visual sin contexto opcional usando las capturas de pantalla (cuando Profundidad de QA es critic o deep).

Archivos en Esta Habilidad

Ruta (bajo <skill>/)Cargar Cuando
modules/01-intake.mdPaso 2: aclarar briefs ambiguos y escribir .atelier/BRIEF.md
modules/02-brand-site.mdPaso 3: nuevas páginas de marketing, empresa, negocio local o portafolio
modules/03-app-ui.mdPaso 3: dashboards, herramientas, documentación o refinamiento de apps existentes
modules/04-3d-visual.mdPaso 3: construcciones con Three.js, WebGL o shaders
modules/05-qa-gate.mdPaso 5: ejecutar lints, comprobaciones de navegador y revisiones críticas sin contexto
library/themes.jsonPaso 3 (02-brand-site): manejar combinaciones de color y fuente no genéricas
scripts/detect-env.mjsPaso 1: detectar la pila del proyecto y las herramientas CLI/navegador instaladas
scripts/lint-ui.mjsPaso 5: linter anti-copia y del Suelo de Artesanía integrado, sin dependencias
scripts/check-ui.mjsPaso 5: verificador del Protocolo de Herramientas de Desarrollo de Chrome (CDP) integrado, sin dependencias

Skills relacionados

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