Communitygithub.com

vinay-v-7/design-studio

Sistema de design unificado para criar e revisar interfaces limpas, distintas e não genéricas: sites, landing pages, UI de produtos, dashboards, formulários, telas web e nativas, slides em HTML e diagramas.

O que é design-studio?

O design-studio é uma skill abrangente para agentes de IA (como Claude Code, Cursor, Codex) que combina direção de arte, comandos de execução impecável, um banco de dados de UI/UX, revisão de padrões de IA e templates de slides e diagramas em uma única doutrina anti-slop e portão de qualidade. Seu objetivo é eliminar interfaces genéricas, com aparência de template ou feitas por IA, fornecendo roteamento inteligente para diferentes tipos de tarefa: build (landing pages, portfólios), app (dashboards, formulários, telas nativas), direction (paletas, fontes, estilos), review/audit/roast, slides, diagramas e muito mais. A skill carrega apenas os módulos necessários para a solicitação (taste, impeccable, ui-ux-pro-max, ai-design-review, slides, diagrams) e segue um fluxo de trabalho definido: Brief → Direction (DESIGN.md) → Build → Look → Gate → Report. O portão de qualidade garante que scanners específicos sejam executados, que não haja bugs P0, que a genericidade seja ≤ 3/10 para novas UIs e que todos os critérios SD1–SD5 sejam atendidos. Ela também oferece suporte a hooks (pré-commit e por edição) para aplicação contínua das regras em projetos reais, respeitando a política de consentimento do usuário.

Funciona com✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add vinay-v-7/design-studio-skill
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

O que design-studio faz?

<studio> é a pasta que contém este SKILL.md. No Windows, use python se python3 estiver ausente, e modules/impeccable/scripts/impeccable.cmd em vez do launcher não processado.

Carregamento

  1. Este arquivo.
  2. Doutrina para a rota: doctrine/workflow.md, doctrine/principles.md, doctrine/gate.md; doctrine/conflicts.md quando os módulos discordam.
  3. Apenas o(s) arquivo(s) MODULE.md roteado(s) abaixo e, em seguida, as referências que eles apontam.

Nunca carregue todos os módulos. Arquivos MODULE.md fornecidos por terceiros não são skills independentes.

Precedência

  1. A instrução explícita do usuário e os ativos reais da marca
  2. O arquivo DESIGN.md / PRODUCT.md do projeto
  3. Doutrina do design-studio
  4. As regras do módulo ativo
  5. Escolhas do banco de dados ui-ux-pro-max — entradas, nunca decisões; toda escolha deve passar pelo piso anti-slop

Roteamento

/design-studio <rota> [alvo]. Se não houver rota, inferir a partir da solicitação.

Intenção / argCarregarNotas
build — landing, marketing, portfólio, página públicamodules/taste/MODULE.md + modules/impeccable/MODULE.md (persuadir)ui-ux-pro-max apenas para diretrizes de stack
app — dashboard, configurações, formulários, UI de produto, telas nativasimpeccable (operar) + taste references/app-screens.mdui-ux-pro-max stack + diretrizes de UX
direction — paleta, fontes, estilobiblioteca taste primeiro; modules/ui-ux-pro-max/MODULE.md pesquisa em segundo lugar, filtrado por slopescreve DESIGN.md
review / audit / roastmodules/ai-design-review/MODULE.md e seu formato de relatórioscanners abaixo; deduplicar em IDs
polish bolder quieter typeset colorize animate harden clarify distill delight adapt onboard optimize layout overdrive shape init document extract critique audit live generatereferência de comandos impeccablepin/unpin desabilitados
slides / deck / apresentaçãomodules/slides/MODULE.mdtemplate-library/ último recurso; .pptx → skill pptx
diagram (+ `import mermaiddrawioexcalidraw, export`)
gráficos em um appskill dataviz se instalada, senão domínio de gráficos ui-ux-pro-max
copy longotextos do ai-design-review; skill unslop se instalada
`hooks onoffstatus`

Fluxo de trabalho

Brief (PRODUCT.md) → Direção (DESIGN.md) → Construir → Avaliar → Portão → Relatório. Detalhes: doctrine/workflow.md.

Os arquivos de trabalho do Taste permanecem em .taste-skill/. Resuma a direção escolhida em DESIGN.md para que cada módulo leia um único arquivo.

Portão

Concluído quando: tamanhos de entrega avaliados; scanners relevantes executados; zero P0; cada P1 justificado pelo brief; genericidade ≤ 3/10 para nova UI; SD1–SD5 aprovados; nada inventado; app UI tem estados vazio/carregamento/erro; relatório nomeia as camadas executadas. Tabela completa: doctrine/gate.md.

Scanners de revisão (deduplicar em IDs de catálogo):

node <studio>/modules/ai-design-review/scripts/scan.mjs <target> --json
<studio>/modules/impeccable/scripts/impeccable detect <target>
node <studio>/modules/taste/scripts/lint.mjs <target>

Detect no Windows: <studio>\modules\impeccable\scripts\impeccable.cmd detect <target>.

Política de hooks

Desativado por padrão. Nunca ative silenciosamente.

No início de uma rota build ou app em um projeto real, execute:

<studio>/modules/impeccable/scripts/impeccable hooks status

Propor aceitação, uma frase de motivo, quando alguma das seguintes condições ocorrer: a tarefa tocará ≥3 arquivos de UI ou abrangerá sessões; uma revisão encontrou ≥2 P0/P1 mecânicos (contraste, texto com gradiente, brilho, overflow, desvio do design system); o usuário solicitar aplicação contínua.

Explicar: varredura por edição via .claude/settings.local.json (Claude Code) ou .cursor/hooks.json (Cursor). O Cursor recebe apenas verificações por edição, sem passada profunda Stop. Aponte para <studio>/modules/impeccable/scripts/impeccable.

Respeite hook.consent em .impeccable/config.local.json. Não pergunte novamente naquele projeto.

Se aceitarem: impeccable hooks on. Se recusarem: hooks off e não pergunte novamente ali.

Ambiente

NecessidadeUsado porSe ausente
Node 18+scan.mjspular scanner, informar
Node 22+taste draw / lint / inspectpular scripts do taste
Python 3ui-ux-pro-max, diagram verify-geometrypular esses
Chrome / Edgetaste inspect, impeccable URL detectpular camada visual do navegador
Playwrightexportação de slides para PDFpular PDF
python-pptximportação PPTpular importação

Mapa de módulos

CaminhoFunção
modules/taste/Direção de arte (draw.mjs), lint/inspect
modules/impeccable/Comandos de craft, detect, hooks
modules/ui-ux-pro-max/Estilos / paletas / stacks pesquisáveis
modules/ai-design-review/Catálogo de tells, scan, relatório de revisão
modules/slides/Decks HTML; template-library/ é referência de implementação
modules/diagrams/Diagramas HTML/SVG

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