Communitygithub.com

atelier-ui

Orquestrador adaptativo de frontend e design visual. Roteia de forma limpa entre sites de marca/landing pages, refinamento de UI SaaS/app e construções visuais 3D/WebGL, usando captura em 1 turno, carregamento progressivo de módulos, fallbacks sem instalação e portas de garantia de qualidade determinísticas.

O que é atelier-ui?

Atelier UI é uma skill especializada para agentes de IA que atuam como orquestradores de design de frontend e design visual. Ela permite que o agente lidere projetos de UI/UX de forma estruturada, roteando automaticamente para o módulo de construção correto com base no tipo de projeto: marca/landing pages, SaaS/dashboard ou visualizações 3D/WebGL. A skill utiliza uma abordagem de contexto enxuto, carregando módulos sob demanda para evitar sobrecarga de informações. O fluxo de trabalho começa com uma sonda de ambiente para detectar ferramentas e frameworks disponíveis, seguida por uma captura de requisitos em um único turno (com defaults) e a seleção de um módulo de construção. A skill impõe regras universais de design ("Craft Floor"), como uso de tokens, evitar layouts problemáticos, garantir acessibilidade e contraste, e proibir práticas de baixa qualidade ("anti-slop"). Após a construção, uma porta de verificação de qualidade (QA Gate) executa verificações automáticas de linting, testes visuais em diferentes viewports e, opcionalmente, uma revisão crítica com imagens de screenshot para garantir que o resultado atenda aos padrões. A skill suporta fallbacks sem instalação para ferramentas de verificação, garantindo que funcione em diversos ambientes.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Atelier UI — Orquestrador de Design

Mantenha o contexto enxuto. Nunca carregue todos os módulos de uma vez—roteie para um módulo de construção após a captura e delegue verificações mecânicas para scripts.

Nos comandos e caminhos abaixo, <skill> é o diretório que contém este arquivo SKILL.md (por exemplo, ~/.gemini/config/skills/atelier-ui, %USERPROFILE%\.gemini\config\skills\atelier-ui no Windows, ou .agents/skills/atelier-ui local ao workspace). Sempre use aspas "<skill>/..." em comandos de shell para que caminhos com espaços funcionem.

Fluxo de Trabalho

1. Sondar o Ambiente (Uma Vez)

Execute o scanner de capacidades na raiz do projeto:

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

Não presuma que ferramentas externas (impeccable, agent-browser) existam. Use a saída JSON (project.framework, project.devCommand, tools.impeccableCmd, tools.agentBrowser, tools.browserBinary, tools.cdpSupported) para escolher a stack e o nível de QA.

2. Captura (1 Turno, Com Defaults)

Leia <skill>/modules/01-intake.md apenas se alguma pergunta central estiver em aberto.

  • Faça todas as perguntas faltantes em uma mensagem numerada com defaults (ou comece imediatamente se o usuário forneceu detalhes completos ou disse "defaults" / "go ahead").
  • Escreva o plano definido em .atelier/BRIEF.md para que a compactação de contexto nunca perca os requisitos.

3. Roteie para UM Módulo de Construção

Escolha o modo de superfície a partir do brief e leia apenas aquele arquivo:

  • Marca / Landing / Portfólio / Negócio Local (Persuadir ou Experiência): leia <skill>/modules/02-brand-site.md.
  • SaaS / Dashboard / Docs / Aplicativo Existente (Operar ou Ler): leia <skill>/modules/03-app-ui.md.
  • Mundo 3D / WebGL / Shaders (3D): leia <skill>/modules/04-3d-visual.md.

4. Piso de Criação Universal (Sempre Ativo)

  1. Tokens em vez de hex cru: Use propriedades personalizadas CSS (:root) ou os tokens Tailwind/tema existentes do projeto.
  2. Sem armadilhas de layout: overflow-x: clip em html, body (nunca 100vw); minmax(0, 1fr) em trilhas de grade de imagens; min-width: 0; overflow-wrap: break-word em cabeçalhos de exibição.
  3. Movimento e acessibilidade: Nunca transition: all; anime apenas transform / opacity / clip-path / filter; adicione :focus-visible e @media (prefers-reduced-motion: reduce).
  4. Lista de proibições anti-porcaria: Sem gradientes roxo-para-azul não merecidos, sem texto gradiente em corpo/cabeçalhos, sem cartões aninhados dentro de cartões, sem indicadores 01/02/03 acima de manchetes, sem emojis como ícones de UI, sem depoimentos, logotipos ou métricas inventados.
  5. Contraste e estados: Texto do corpo >= 4,5:1, texto grande >= 3:1; todo controle interativo cobre os estados padrão, hover, focus-visible, desabilitado, carregando, vazio e erro.
  6. Texto limpo: Botões são <Verbo> <Objeto> (nunca genérico "Saiba mais"). Nunca deixe texto placeholder (Lorem ipsum, Acme, TODO).

(Verificações mecânicas estão em lint-ui.mjs e check-ui.mjs; regras estruturais de layout, como cartões aninhados e minmax(0, 1fr), são verificadas por você e pelo crítico de Nível 3.)

5. Verificar e Portão de Crítica

Após construir, leia <skill>/modules/05-qa-gate.md e execute a escada de QA:

  1. Lint de porcaria estático (tools.impeccableCmd se detectado, mais node "<skill>/scripts/lint-ui.mjs" <target-dir>).
  2. Verificação de navegador (agent-browser, a ferramenta de navegador do seu ambiente, ou node "<skill>/scripts/check-ui.mjs" <target> --out .atelier/shots --full --sheet) no desktop (1440x900) e mobile (390x844).
  3. Opcional: revisão de crítico visual sem contexto usando as capturas de tela (quando Profundidade de QA for critic ou deep).

Arquivos Nesta Skill

Caminho (em <skill>/)Carregar Quando
modules/01-intake.mdPasso 2: esclarecendo briefs ambíguos e escrevendo .atelier/BRIEF.md
modules/02-brand-site.mdPasso 3: novas páginas de marketing, empresa, negócio local ou portfólio
modules/03-app-ui.mdPasso 3: painéis, ferramentas, docs ou refinamento de aplicativos existentes
modules/04-3d-visual.mdPasso 3: construções Three.js, WebGL ou shaders
modules/05-qa-gate.mdPasso 5: executando lints, verificações de navegador e revisões críticas sem contexto
library/themes.jsonPasso 3 (02-brand-site): lidando com combinações de cores e fontes não genéricas
scripts/detect-env.mjsPasso 1: detectando stack do projeto e ferramentas CLI/navegador instaladas
scripts/lint-ui.mjsPasso 5: linter de porcaria e Piso de Criação integrado, sem dependências
scripts/check-ui.mjsPasso 5: verificador integrado do Chrome DevTools Protocol (CDP), sem dependências

Habilidades Relacionadas

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