redesign-existing-projectspor Leonxlnx

Redesign Existing Projects Skill.

Una skill de Claude Code y Codex para revisión de diseño: audita un sitio web o app existente y lo actualiza a calidad visual premium.

Revisión de Diseño y Accesibilidad
Informe de revisión

Descargar OpenDesign Ver guía 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

Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 15 032 caracteres completos

01 Qué hace

Qué Hace el Skill redesign-existing-projects en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Mejora sitios web y aplicaciones existentes a una calidad visual premium auditando el diseño actual, identificando patrones genéricos de IA y aplicando estándares de diseño de alto nivel sin romper la funcionalidad. Funciona con cualquier framework de CSS o CSS vanilla.

El skill escanea el código base para identificar el framework y el método de estilos, diagnostica cada patrón genérico y punto débil mediante una auditoría de diseño exhaustiva, y luego aplica mejoras específicas trabajando con la pila existente. Los cambios se priorizan por impacto visual y riesgo, desde cambios de fuente y limpieza de color hasta el reemplazo de componentes y el pulido de tipografía.

Informe de revisión

Ver el ejemplo de prompt ↗

Cómo funciona

01
Escanear el Código Base
Lea el código base para identificar el framework, el método de estilos (Tailwind, CSS vanilla, styled-components, etc.) y los patrones de diseño actuales.
02
Diagnosticar Patrones Genéricos
Recorra la auditoría de diseño para listar cada patrón genérico, punto débil y estado faltante encontrado en el proyecto.
03
Corregir con Mejoras Específicas
Aplique mejoras específicas trabajando con la pila existente sin reescribir desde cero, mejorando lo que ya está allí.

02 Encuentra tu caso de uso

Cuándo usar el skill redesign-existing-projects

Usa el skill redesign-existing-projects en Claude Code o Codex cuando el trabajo sea revisión de diseño de este tipo. El alcance y límites a continuación provienen del archivo propio del skill.

Buen caso de uso

Sitios web y aplicaciones existentes que necesitan mejorarse a calidad premium
Proyectos con patrones de diseño genéricos de IA que deben identificarse y sustituirse
Proyectos que usan cualquier framework CSS (Tailwind, styled-components) o CSS vanilla

03 Dentro del skill

Reglas que el skill redesign-existing-projects da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Trabajar con el Stack Tecnológico Existente
No migre frameworks ni bibliotecas de estilos. Mantenga los cambios compatibles con la configuración actual.
Pruebe Después de Cada Cambio
No rompa la funcionalidad existente. Pruebe después de cada cambio para asegurarse de que el proyecto siga funcionando.
Verifique las Dependencias Antes de Importar
Antes de importar cualquier biblioteca nueva, verifique primero el archivo de dependencias del proyecto para ver qué ya está disponible.
Verifique la Versión de Tailwind
Si el proyecto usa Tailwind, verifique si es v3 o v4 antes de modificar el archivo de configuración.
Use CSS Vanilla Cuando No Exista un Framework
Si el proyecto no tiene framework, use CSS vanilla en lugar de introducir un nuevo sistema de estilos.
Nunca Use Lorem Ipsum
Nunca use texto latino de relleno. Escriba un briefing real en su lugar de contenido genérico de relleno.
Siga el Orden de Prioridad de Correcciones
Aplique los cambios en orden de prioridad: primero el cambio de fuente (la mejora instantánea más grande, con el menor riesgo), luego la limpieza de color, los estados hover, el layout, la sustitución de componentes, los estados, y por último el pulido de la tipografía.
Mantenga los Cambios Revisables
Mantenga los cambios revisables y enfocados. Realice mejoras pequeñas y específicas en lugar de grandes reescrituras.

04 Ponlo a trabajar

Instalar redesign-existing-projects en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar redesign-existing-projects a Claude Code, Codex o su agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Formulario genérico de la CLI skills para skills/redesign-skill/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Confirme que todos los iconos tengan grosores de trazo consistentes en todo el proyecto
Verifique que todas las imágenes tengan texto alternativo descriptivo para lectores de pantalla

En OpenDesign importe redesign-existing-projects desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Rama main
Archivo de skill: skills/redesign-skill/SKILL.md Suma de verificación del contenido registrada en la verificación; commit ccbc156
License: MIT Desde LICENSE.
Estrellas del repositorio: 86.946 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio Leonxlnx/taste-skill, que contiene 11 skills en este catálogo. No es una calificación ni un recuento de uso para redesign-existing-projects.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cómo Funciona EstoProceso de tres pasos: escanear el código base, diagnosticar patrones y corregir con mejoras específicas
Auditoría de DiseñoChecklist completo que cubre tipografía, color, layout, interactividad, contenido, componentes, iconos, calidad de código y omisiones estratégicas
TipografíaCorrija los valores predeterminados del navegador, la presencia de titulares, el ancho del cuerpo de texto, la variedad de pesos, el formato de números, el espaciado entre letras y las palabras huérfanas
Color y SuperficiesReemplace el negro puro, los acentos sobresaturados, los grises mezclados, los gradientes de IA, las sombras genéricas, el diseño plano y la iluminación inconsistente
LayoutRompa la simetría, reemplace las tarjetas de tres columnas, use CSS Grid, agregue contenedores, varíe el radio, cree profundidad, corrija la alineación
Interactividad y EstadosAgregue estados de hover, activo, foco, carga, vacío y error con transiciones suaves y animaciones aceleradas por GPU
ContenidoUse nombres y datos realistas, elimine los clichés de IA, escriba en voz activa, varíe las fechas, evite el Lorem Ipsum
Patrones de ComponentesReemplace tarjetas genéricas, pares de botones, badges, acordeones, carruseles, modales, avatares, toggles y granjas de enlaces en el footer
IconografíaVaya más allá de los valores predeterminados de Lucide/Feather, evite metáforas cliché, estandarice los grosores de trazo, agregue favicon, use fotos reales
Calidad de CódigoUse HTML semántico, estilos consistentes, unidades relativas, texto alternativo, z-index limpio, elimine código muerto, agregue meta tags
Omisiones EstratégicasAgregue enlaces legales, navegación de retorno, página 404 personalizada, validación de formularios, skip links y consentimiento de cookies donde sea necesario
Técnicas de MejoraTécnicas de alto impacto para tipografía, layout, movimiento y mejoras de superficie que reemplazan patrones genéricos

La descripción propia del Skill

"Mejora sitios web y apps existentes a calidad premium. Audita el diseño actual, identifica patrones genéricos de IA y aplica estándares de diseño de alta gama sin romper la funcionalidad. Funciona con cualquier framework CSS o CSS vanilla."

Descripción del front-matter de SKILL.md. El archivo completo tiene aproximadamente 15.032 caracteres. Lea el archivo completo en GitHub.

Redesign Existing Projects

Ejecute redesign-existing-projects en una tarea real de revisión de diseño.

Descarga OpenDesign, importa redesign-existing-projects desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

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

Qué Hace el Skill redesign-existing-projects en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill redesign-existing-projects

Buen caso de uso

Reglas que el skill redesign-existing-projects da a Claude Code y Codex

Trabajar con el Stack Tecnológico Existente

Pruebe Después de Cada Cambio

Verifique las Dependencias Antes de Importar

Verifique la Versión de Tailwind

Use CSS Vanilla Cuando No Exista un Framework

Nunca Use Lorem Ipsum

Siga el Orden de Prioridad de Correcciones

Mantenga los Cambios Revisables