Repolode
Enviar
educlopez

educlopez/ui-craft

Uma skill de agente e CLI que ensinam agentes de programação com IA a criar interfaces refinadas e prontas para produção, em vez de designs genéricos com cara de IA.

Ver no GitHubSite
Estrelas
435
Forks
23
Issues abertas
3
Último commit
há 23 horas

O que é?

UI Craft é um sistema de design engineering para agentes de programação com IA. Ele reúne regras de design de interface com opiniões definidas, um conjunto de slash commands para criar, revisar e refinar telas e verificações determinísticas que sinalizam padrões comuns de interfaces geradas por IA, como gradientes roxos, easing com bounce e grades de cards idênticos. É independente de stack e se adapta a Tailwind, CSS Modules, styled-components, CSS puro e estilos em componentes de arquivo único.

Pode ser instalado por meio de uma CLI multiplataforma escrita em Go (`ui-craft install`), como plugin do Claude Code ou do Cursor, ou pela spec Agent Skills, para outros harnesses. A CLI grava skills, commands, MCP quality gates e agentes de revisão na configuração nativa de cada harness, com backups e rollback. Superfícies como dashboards, landing pages e telas de autenticação são orientadas por receitas de composição com nome e uma checklist de aceitação.

O pacote complementar `ui-craft-detect` é um scanner sem dependências, com 43 regras que abrangem antipadrões, acessibilidade, formulários e textos provisórios. Ele pode analisar o código-fonte local, uma URL ativa ou apenas as linhas alteradas, além de instalar hooks de edição para Claude Code e Cursor e workflows de pre-commit e GitHub Actions.

Recursos principais

  • 01Regras de design e orientações de acabamento que direcionam agentes de IA a priorizar hierarquia, animações discretas e tokens específicos do projeto.
  • 02Slash commands para criar, avaliar, refinar e animar superfícies individuais.
  • 03Receitas com nome para dashboards, landing pages e telas de autenticação, com critérios de aceitação antes do lançamento.
  • 04Instalador compatível com vários harnesses, como Claude Code, Cursor, Codex, Gemini e OpenCode, com backup e rollback.
  • 05Detector sem dependências, com 43 regras de antipadrões, acessibilidade e textos, que pode ser usado em CI ou em hooks do git.

Casos de uso

  • Pedir a um agente de programação com IA que crie dashboards ou páginas de marketing com aparência pronta para produção já na primeira tentativa.
  • Revisar um frontend existente em busca de padrões genéricos de IA e problemas de acessibilidade antes do merge.
  • Adicionar uma verificação de CI que só bloqueie pull requests quando eles introduzirem novos antipadrões de interface.
  • Padronizar decisões de design entre sessões usando um brief persistido e tokens de design.

Início rápido

  1. 1

    Instale a CLI do ui-craft com o Homebrew (macOS)

    brew install --cask educlopez/tap/ui-craft
  2. 2

    Execute o script oficial de instalação para seu sistema operacional, disponível no README (macOS/Linux ou Windows)

  3. 3

    Detecte seu ambiente de programação com IA e configure o skill, os commands e os gates

    ui-craft install
  4. 4

    Peça ao seu agente para criar um surface usando o comando craft

Antes de usar

  • A versão para macOS com Intel foi compilada e publicada, mas nunca foi testada.
  • Os binários para Linux arm64 e Windows arm64 foram compilados, mas não são executados no CI.

Em coleções

Pacotes de skills para Claude Code e CodexSkills de design de interface para agentes de programaçãoFerramentas, skills e plugins para Claude CodeAssistentes e agentes de programação com IABibliotecas de skills para agentes de IAFrameworks frontend e componentes de interface

Tópicos

#agent-skills#design-system#frontend#css#claude-code#cursor#accessibility#ui-review#anti-slop#codex

Perguntas frequentes

O que é ui-craft?
Uma skill de agente e CLI que ensinam agentes de programação com IA a criar interfaces refinadas e prontas para produção, em vez de designs genéricos com cara de IA. UI Craft é um sistema de design engineering para agentes de programação com IA. Ele reúne regras de design de interface com opiniões definidas, um conjunto de slash commands para criar, revisar e refinar telas e verificações determinísticas que sinalizam padrões comuns de interfaces geradas por IA, como gradientes roxos, easing com bounce e grades de cards idênticos. É independente de stack e se adapta a Tailwind, CSS Modules, styled-components, CSS puro e estilos em componentes de arquivo único.
ui-craft é gratuito? Qual é a licença?
ui-craft é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
ui-craft ainda é mantido?
Manutenção ativa. O último commit de ui-craft foi em 6 de nov. de 2026.
Para que posso usar ui-craft?
Pedir a um agente de programação com IA que crie dashboards ou páginas de marketing com aparência pronta para produção já na primeira tentativa. Revisar um frontend existente em busca de padrões genéricos de IA e problemas de acessibilidade antes do merge. Adicionar uma verificação de CI que só bloqueie pull requests quando eles introduzirem novos antipadrões de interface. Padronizar decisões de design entre sessões usando um brief persistido e tokens de design.
Como instalar ui-craft?
Instale a CLI do ui-craft com o Homebrew (macOS): brew install --cask educlopez/tap/ui-craft Execute o script oficial de instalação para seu sistema operacional, disponível no README (macOS/Linux ou Windows) Detecte seu ambiente de programação com IA e configure o skill, os commands e os gates: ui-craft install Peça ao seu agente para criar um surface usando o comando craft
Onde consigo ui-craft?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/educlopez/ui-craft

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados