redesign-existing-projectspor Leonxlnx

Redesign Existing Projects Skill.

Uma skill de Claude Code e Codex para revisão de design: audita um site ou aplicativo existente e o eleva a qualidade visual premium.

Design Review & Accessibility
Relatório de revisão

Baixar OpenDesign Ver guia de uso

Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md

--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules

Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 15.032 caracteres no total

01 O que faz

O que o Skill redesign-existing-projects 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

Eleva sites e aplicativos existentes a uma qualidade visual premium ao auditar o design atual, identificar padrões genéricos de IA e aplicar padrões de design sofisticados sem quebrar a funcionalidade. Funciona com qualquer framework CSS ou CSS puro.

O skill examina a base de código para identificar o framework e o método de estilização, diagnostica todos os padrões genéricos e pontos fracos por meio de uma auditoria de design abrangente e, então, aplica melhorias direcionadas trabalhando com a stack existente. As mudanças são priorizadas por impacto visual e risco, desde troca de fontes e limpeza de cores até substituição de componentes e refinamento de tipografia.

Relatório de revisão

Veja o exemplo de prompt ↗

Como funciona

01
Examinar a Base de Código
Leia a base de código para identificar o framework, o método de estilização (Tailwind, CSS puro, styled-components, etc.) e os padrões de design atuais.
02
Diagnosticar Padrões Genéricos
Percorra a auditoria de design para listar todos os padrões genéricos, pontos fracos e estados ausentes encontrados no projeto.
03
Corrigir com Melhorias Direcionadas
Aplique melhorias direcionadas trabalhando com a stack existente sem reescrever do zero, aprimorando o que já existe.

02 Encontre o ideal para você

Quando Usar a Skill redesign-existing-projects

Use a skill redesign-existing-projects 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

Sites e aplicativos existentes que precisam ser elevados a uma qualidade premium
Projetos com padrões genéricos de design de IA que precisam ser identificados e substituídos
Projetos que usam qualquer framework CSS (Tailwind, styled-components) ou CSS puro

03 Dentro da skill

Regras que o Skill redesign-existing-projects dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Trabalhe com a Stack Tecnológica Existente
Não migre frameworks ou bibliotecas de estilo. Mantenha as alterações compatíveis com a configuração atual.
Teste Após Cada Alteração
Não quebre a funcionalidade existente. Teste após cada alteração para garantir que o projeto continue funcionando.
Verifique as Dependências Antes de Importar
Antes de importar qualquer nova biblioteca, verifique primeiro o arquivo de dependências do projeto para ver o que já está disponível.
Verifique a Versão do Tailwind
Se o projeto usar Tailwind, verifique se é v3 ou v4 antes de modificar o arquivo de configuração.
Use CSS Puro Quando Não Houver Framework
Se o projeto não tiver framework, use CSS puro em vez de introduzir um novo sistema de estilo.
Nunca Use Lorem Ipsum
Nunca use texto latino de preenchimento. Escreva um briefing de texto real em vez de conteúdo genérico de preenchimento.
Siga a Ordem de Prioridade de Correções
Aplique as alterações em ordem de prioridade: primeiro a troca de fonte (maior melhoria instantânea, menor risco), depois a limpeza de cores, estados de hover, layout, substituição de componentes, estados e, por último, o refinamento da tipografia.
Mantenha as Alterações Revisáveis
Mantenha as alterações revisáveis e focadas. Faça melhorias pequenas e direcionadas em vez de grandes reescritas.

04 Coloque em prática

Instalar redesign-existing-projects no Claude Code ou Codex

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

Adicionar redesign-existing-projects 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/Leonxlnx/taste-skill --skill redesign-existing-projects

Forma genérica do CLI skills para skills/redesign-skill/SKILL.md; o repositório pode documentar seu próprio caminho.

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

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Confirme se todos os ícones têm larguras de traço consistentes em todo o projeto
Verifique se todas as imagens têm texto alternativo descritivo para leitores de tela

No OpenDesign importe o redesign-existing-projects a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

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.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Arquivo da skill: skills/redesign-skill/SKILL.md Checksum de conteúdo registrado na verificação; commit ccbc156
License: MIT De LICENSE.
Estrelas do repositório: 86.946 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório Leonxlnx/taste-skill, que contém 11 skills neste catálogo. Não é uma classificação ou contagem de uso para redesign-existing-projects.
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.

Dentro do SKILL.md

Como Isso FuncionaProcesso de três etapas: escanear a base de código, diagnosticar padrões e corrigir com melhorias direcionadas
Auditoria de DesignChecklist completo abrangendo tipografia, cor, layout, interatividade, conteúdo, componentes, ícones, qualidade de código e omissões estratégicas
TipografiaCorrija padrões do navegador, presença de títulos, largura do corpo de texto, variedade de pesos, formatação de números, espaçamento entre letras e palavras órfãs
Cor e SuperfíciesSubstitua o preto puro, acentos supersaturados, cinzas misturados, gradientes de IA, sombras genéricas, design flat e iluminação inconsistente
LayoutQuebre a simetria, substitua cards de três colunas, use CSS Grid, adicione containers, varie o raio, crie profundidade, corrija alinhamentos
Interatividade e EstadosAdicione estados de hover, active, focus, loading, vazio e erro com transições suaves e animações aceleradas por GPU
ConteúdoUse nomes e dados realistas, remova clichês de IA, escreva na voz ativa, varie datas, evite Lorem Ipsum
Padrões de ComponentesSubstitua cards genéricos, pares de botões, badges, acordeões, carrosséis, modais, avatares, toggles e listas de links extensas no rodapé
IconografiaVá além dos padrões do Lucide/Feather, evite metáforas clichês, padronize a espessura dos traços, adicione favicon, use fotos reais
Qualidade de CódigoUse HTML semântico, estilo consistente, unidades relativas, texto alternativo, z-index limpo, remova código morto, adicione meta tags
Omissões EstratégicasAdicione links legais, navegação de retorno, página 404 personalizada, validação de formulários, skip links e consentimento de cookies quando necessário
Técnicas de AprimoramentoTécnicas de alto impacto para tipografia, layout, movimento e melhorias de superfície para substituir padrões genéricos

A Descrição da Própria Skill

"Atualiza sites e aplicativos existentes para qualidade premium. Audita o design atual, identifica padrões genéricos de IA e aplica padrões de design de alta qualidade sem quebrar a funcionalidade. Funciona com qualquer framework CSS ou CSS puro."

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

Redesign Existing Projects

Execute redesign-existing-projects em uma tarefa real de revisão de design.

Baixe o OpenDesign, importe redesign-existing-projects a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

O que o Skill redesign-existing-projects Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill redesign-existing-projects

Boa Combinação

Regras que o Skill redesign-existing-projects dá ao Claude Code e ao Codex

Trabalhe com a Stack Tecnológica Existente

Teste Após Cada Alteração

Verifique as Dependências Antes de Importar

Verifique a Versão do Tailwind

Use CSS Puro Quando Não Houver Framework

Nunca Use Lorem Ipsum

Siga a Ordem de Prioridade de Correções

Mantenha as Alterações Revisáveis