O que é flawless-ui-ux?
flawless-ui-ux é uma skill de design UI/UX e uma CLI de inspeção local para agentes de código. Ela ajuda agentes a criar, redesenhar, refinar e revisar interfaces ao redor do público, conteúdo e identidade de um produto.
A skill orienta decisões de layout, tipografia, cor e interação para interfaces web, mobile nativas e desktop. A CLI inspeciona arquivos de código-fonte selecionados e interfaces em execução no navegador, fornecendo observações que o agente pode usar para encontrar problemas e verificar correções. Você descreve a tarefa; seu agente de código aplica as diretrizes no seu projeto existente.
Sem skill vs. Com skill
Criado no Codex com GPT 6.1 Sol (baixo), depois refinado com flawless-ui-ux usando o mesmo modelo e configuração de raciocínio.
Instalação
A partir do diretório do seu projeto, execute um comando com seu gerenciador de pacotes preferido:
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
Requer Node 22.12+. Em um terminal, escolha escopo do projeto ou global, selecione um ou mais agentes, e confirme os destinos antes de copiar. Use Espaço para selecionar e Enter para continuar. Ctrl+C cancela antes de os arquivos de instalação serem gravados.
Flags explícitas executam diretamente:
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes pula o menu e usa os padrões quando nenhuma outra flag é fornecida: todos os agentes suportados no projeto atual. Saída JSON, CI e execução em não-terminal permanecem não interativas. Use --format json para saída legível por máquina.
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
Isso instala a skill através da Skills CLI. Seus requisitos de execução e seleção de agente seguem esse instalador. A CLI de inspeção está disponível separadamente através dos comandos npm neste guia.
bash /caminho/absoluto/flawless-ui-ux/install.sh --codex --project
A alternativa Bash requer --project para instalação local; seu padrão é global. Usuários do Windows precisam de Git Bash ou WSL.
Usar a skill
Descreva a interface que você precisa e nomeie a skill:
Use a skill flawless-ui-ux para construir um dashboard financeiro para freelancers.
No Codex, invoque $flawless-ui-ux. Hosts com comandos de barra usam /flawless-ui-ux; o Pi usa /skill:flawless-ui-ux. Você também pode solicitar a skill pelo nome através do mecanismo de skill do seu host. Inicie uma nova sessão após a instalação se a descoberta precisar ser atualizada.
Continue na mesma conversa à medida que a interface se desenvolve:
| Tarefa | Exemplo de solicitação |
|---|---|
| Criar | Crie uma landing page para um aplicativo que coordena implantações e transferências de incidentes. |
| Redesenhar | Redesenhe esta tela de conta para mobile usando a paleta da marca fornecida. Preserve seu conteúdo e comportamento. |
| Refinar | Dê mais destaque à ação principal, preservando o caráter visual da página. |
| Foco | Melhore a tipografia e o espaçamento. Preserve redação, cores e funcionalidade. |
| Revisar | Revise este dashboard quanto a legibilidade, navegação, acessibilidade e padrões genéricos repetidos. Relate descobertas sem editar arquivos. |
Como funciona
A skill orienta design e implementação. Ela conecta o contexto do produto à composição, tipografia, cor, densidade, imagens e interação. Referências focadas apoiam criação, redesenho, refinamento e revisão em sua stack existente.
Para interfaces novas e redesenhos amplos, o agente considera pelo menos três composições significativamente diferentes internamente antes da implementação, depois escolhe uma abordagem para o produto e a tarefa. Refinamentos focados preservam o escopo autorizado e as decisões estabelecidas.
As diretrizes de design se aplicam a interfaces web, mobile nativas e desktop. As verificações renderizadas da CLI cobrem interfaces de navegador; a verificação nativa usa ferramentas de plataforma e projeto apropriadas.
O refinamento desenvolve o caráter pretendido. Uma interface pode precisar de mais presença, menos ênfase concorrente ou um acabamento mais consistente. A intervenção certa depende do conteúdo e da tarefa. Cópias genéricas, decoração repetitiva e padrões familiares são revisados em contexto, juntamente com usabilidade e acessibilidade.
A CLI verifica a implementação. Colete contexto do projeto, inspecione arquivos de código-fonte selecionados ou uma interface em execução e compare o resultado após as correções. Seu agente faz as alterações; a CLI fornece observações e registra o que foi realmente verificado.
Contexto do produto e fluxos de trabalho
Mantenha fatos do produto e decisões de design em seus documentos Markdown existentes. O agente os reutiliza em todas as tarefas; arquivos de contexto são opcionais. Use context --source docs/brief.md para selecionar um documento fora dos locais convencionais.
Para preparar registros ausentes, execute:
npx flawless-ui-ux init
A CLI cria modelos Markdown de produto/design ou reutiliza documentos existentes suportados, preservando seu conteúdo. Seu agente preenche os registros a partir do projeto e de suas decisões. Leia-os mais tarde com context; a inicialização não gera um briefing nem escolhe um estilo visual.
Inspecione telas relacionadas com entradas repetidas --url e --consistency para um inventário de estilo contextual. Adicione --flow flows/edit-member.json para exercitar ações de UI, expectativas e estados nomeados explicitamente definidos em um ambiente de teste permitido. A verificação requer que o arquivo de fluxo inalterado seja selecionado novamente. Veja exemplos de fluxos de trabalho e limites.
Inspecionar e verificar
Use a CLI diretamente, ou peça ao seu agente para incluir essas verificações em seu trabalho. Substitua npx por pnpm dlx ou bunx em todo o processo.
Comece com contexto e fonte
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
Verifique a interface em execução
Inicie seu aplicativo e prepare o navegador uma vez:
npx [email protected] install chromium
# ou: pnpm dlx [email protected] install chromium
# ou: bunx [email protected] install chromium
Inspecione a URL real do servidor de desenvolvimento e salve uma linha de base:
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
Após as correções, repita o escopo salvo:
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
A comparação separa achados persistentes, novos e não mais observados. Alvos confirmados ausentes e condições alteradas permanecem não verificados.
| Área | Evidência coletada |
|---|---|
| Acessibilidade | Regras selecionadas de contraste e nome acessível do axe, incluindo resultados incompletos para revisão |
| Texto e layout | Tamanhos de fonte calculados e estouro horizontal nas larguras amostradas |
| Ativos e tempo de execução | Imagens quebradas visíveis e ur |