Ir para o guia de uso
improve-uipor Julien Thibeaut

Improve UI Skill.

Um skill de Claude Code e Codex para revisão de design: audita uma superfície de produto em relação à sua própria evidência de design e redige planos de implementação.

  • Design Review & Accessibility
  • Relatório de revisão
ibelick/ui-skills · skills/improve-ui/SKILL.mdSKILL.md
--- name: improve-ui description: Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff. --- ## Boundaries ## 1. Select the surface ## 2. Reconstruct the local system ## Design language ## 3. Prove findings ## 4. Vet findings
Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 7.816 caracteres no total

01 O que faz

O Que a Skill improve-ui Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

O improve-ui audita uma superfície coerente do produto em relação ao design system que realmente a governa e, então, escreve planos de implementação autocontidos para outro agente executar. É somente leitura no código-fonte do produto: arquivos só são criados ou editados em design-plans, e não são permitidas dependências, formatadores, commits ou pushes.

As descobertas precisam resistir a três provas — contrato, execução em runtime e correção — além de uma verificação de falsificação posterior, e o relatório se limita a três itens, ordenados por confiança, impacto no usuário, alcance e custo de correção. É indicado para designers e desenvolvedores que revisam, refinam ou organizam uma interface sem substituir sua identidade, investigam desvios do design system ou preparam um handoff de design. Questões de acessibilidade, comportamento, desempenho e arquitetura estão fora do escopo, a menos que solicitadas.

Relatório de revisão
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Selecione Uma Superfície Coerente

    Uma solicitação ampla é reduzida a uma aplicação implantável e uma família de superfícies coerente para uma tarefa primária do produto; a skill declara essa seleção em vez de tratar o repositório como um único produto.

  2. 02
    Reconstrua o Sistema Local

    Ela só usa uma fonte após comprovar que está atualizada e governa a superfície selecionada; rascunhos, propostas, migrações e listas de tarefas descrevem intenções futuras, a menos que explicitamente aceitas e atuais.

  3. 03
    Exija Três Provas por Candidata

    Toda candidata mantida precisa de um contrato, um caminho em runtime e uma correção determinística; resultados de busca, repetição e diferenças de implementação geram candidatas, não descobertas.

  4. 04
    Verifique e Tente Falsificar

    As candidatas são atacadas novamente antes do relatório, e apenas as que resistem a essa verificação podem entrar na tabela de descobertas.

  5. 05
    Relatório, Ordenado e Limitado

    As descobertas são ordenadas por confiança, impacto no usuário, alcance e custo de correção, e a lista é cortada em três.

  6. 06
    Especifique as Mudanças Selecionadas

    Antes de escrever, as fontes citadas são reabertas, o commit atual é registrado quando disponível, e primitivas reutilizáveis exatas e exemplares são identificados nas superfícies afetadas.

02 Encontre o ideal para você

Quando Usar a Skill improve-ui

Use a skill improve-ui no Claude Code ou Codex quando o trabalho for revisão de design desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

  • Quando solicitado a revisar, refinar, melhorar ou limpar uma interface sem substituir sua identidade

Conheça os Limites

  • Nunca modifique o código-fonte do produto. Crie ou edite arquivos apenas em design-plans/.
  • Não instale dependências, execute formatadores, faça commit, push ou modifique a árvore de trabalho.
  • Não atualize a documentação do design. Registre as alterações de documentação aceitas no plano para o executor.
  • Use evidência renderizada apenas quando o usuário a fornecer ou solicitar explicitamente inspeção visual.

03 Dentro da skill

O que a Skill improve-ui Traz para Revisão de Design

4 coisas que o SKILL.md instrui Claude Code ou Codex a fazer, na ordem de seção do próprio arquivo.

  1. 1. Selecione a Superfície

    Respeite o escopo do usuário. Se a solicitação for ampla, selecione um aplicativo implantável e uma família de superfície coerente representando uma tarefa primária do produto.

  2. 2. Reconstruir o Sistema Local

    Verifique DESIGN.md, orientações do repositório e documentação de design local.

  3. Linguagem de Design

    Escreva Nenhuma documentada em Exceções explícitas, a menos que uma fonte citada identifique explicitamente a exceção.

  4. 3. Comprove as Descobertas

    Antes de aplicar o gate de validação, inspecione os rótulos voltados ao usuário de cada superfície rastreada, a apresentação do estado ativo, as ramificações responsivas e as variantes irmãs para detectar contradições internas.

04 Coloque em prática

Instale improve-ui no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione improve-ui ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

Forma genérica da CLI skills para skills/improve-ui/SKILL.md; o repositório pode documentar seu próprio caminho.

Dar à Skill uma Primeira Tarefa de Revisão de Design

O SKILL.md não inclui um prompt de exemplo; este inicial foi escrito a partir da descrição resumida do catálogo. Substitua a linha da tarefa pelo seu briefing real.

Starter prompt
Use the improve-ui skill on the material I attach. What the skill should do here: Audits a product surface against its own design evidence and writes implementation plans. Rules: do not invent copy, data or brand assets. State your plan first, then produce the result and tell me what to check.

Origem: prompt inicial escrito a partir do uso resumido do catálogo (não do SKILL.md).

Verifique o Primeiro Resultado

Antes de aceitar o resultado, procure por estes itens na transcrição e nos arquivos:

  • O resultado é entregue como relatório de revisão, conforme listado no catálogo para este skill.
  • O agente menciona a skill improve-ui em seu plano ou transcrição antes de produzir o resultado.
  • Seu próprio conteúdo, nomes e números aparecem inalterados na saída.

No OpenDesign, importe o improve-ui a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, e então selecione-o na barra superior.

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Repository
github.com/ibelick/ui-skills Branch main
Arquivo da skill
skills/improve-ui/SKILL.md Checksum do conteúdo registrado na verificação; commit 79081ab
License
MIT De LICENSE.
Estrelas do repositório
8.402 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório ibelick/ui-skills, que contém 5 skills neste catálogo. Não é uma avaliação ou contagem de uso do improve-ui.
Verificado pelo OpenDesign
14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.
A Descrição da Própria Skill
"Audite uma superfície de produto existente contra sua própria evidência de design, identifique problemas de UI verificados e escreva planos de implementação autocontidos para outro agente. Estritamente somente leitura no código-fonte do produto. Use quando solicitado a revisar, refinar, melhorar ou limpar uma interface sem substituir sua identidade; investigar desvio de sistema de design; ou preparar um handoff de design."

Descrição do front-matter extraída do SKILL.md. O arquivo completo tem cerca de 7.816 caracteres. Leia o arquivo completo no GitHub.

Improve UI

Execute improve-ui em uma tarefa real de revisão de design.

Baixe OpenDesign, importe improve-ui pelo link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill improve-ui

OpenDesign Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS e Windows