Communitygithub.com

plugin87/redesign

Mejora un sitio web o aplicación existente a calidad premium sin romper la funcionalidad: audita el diseño actual, identifica marcas genéricas o de IA, y aplica criterio estético y reglas del sistema de forma quirúrgica. Úsalo cuando el usuario quiera mejorar, modernizar, pulir o "hacer mejor" una interfaz o base de código existente.

¿Qué es redesign?

Esta skill de agente de IA realiza una auditoría y rediseño de interfaces existentes priorizando la preservación de la funcionalidad. El proceso sigue una secuencia estructurada de cinco fases: Escaneo (análisis del framework, método de estilos y tokens existentes), Diagnóstico (aplicación de listas de verificación de malas prácticas y rúbricas de revisión de diseño), Dirección (selección de un arquetipo estético compatible con la marca), Aplicación (implementación ordenada: tokens → tipografía/espaciado → estados de componentes → animaciones, sin alterar rutas, datos ni semántica de marcado, excepto correcciones de accesibilidad) y Verificación (re-ejecución de auditorías de diseño y accesibilidad, pruebas de humo en flujos funcionales, y validación de contraste y valores fijos mediante scripts). La skill es crítica para aplicaciones multi-página, ya que exige la consolidación de un único tema de tokens compartido que todas las páginas consuman, verificando con un linter que no se reintroduzcan valores fuera del tema. Está diseñada para plataformas como Claude Code, Cursor o Codex, ofreciendo un flujo de trabajo quirúrgico y automatizado que evita romper funcionalidades existentes mientras mejora drásticamente la calidad visual y de accesibilidad.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/redesign
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Skill: Rediseño y Auditoría

Rediseño basado en auditoría que preserva el comportamiento.

Pasos

  1. Leer workflows/redesign-audit.md (la secuencia completa Escaneo → Diagnóstico → Dirección → Aplicación → Verificación + Completitud de Salida).
  2. Escanea la base de código: framework, método de estilos (→ enrutar al adaptador frameworks/ correspondiente), realidad de tokens, componentes, lo que debe preservarse.
  3. Diagnostica con la lista de verificación de Valores Predeterminados Prohibidos (taste/design-taste.md) + la rúbrica de revisión (skill design-review). Produce una tabla priorizada de hallazgos.
  4. Dirige: elige un arquetipo/sistema (skill apply-aesthetic) que se ajuste a la marca.
  5. Aplica en orden — primero tokens, luego tipografía/espaciado, luego estados de componentes, luego animaciones — sin cambiar rutas/datos/semántica de marcado (excepto correcciones de accesibilidad).
  6. Verifica: vuelve a ejecutar design-review + a11y-audit; prueba de humo cada flujo que funcionaba previamente; comprobación puntual de modo oscuro + diseño responsive. Ejecuta scripts/validate_contrast.py sobre la fuente de tokens y scripts/lint_hardcodes.py sobre el código modificado.

Barreras de seguridad

Nunca sacrifiques una funcionalidad que funciona por la estética. Nunca publiques un color de marca que no cumpla con el contraste. Nunca elimines las facilidades de accesibilidad existentes. Entrega archivos completos — sin marcadores de posición.

Consistencia de tema único (crítico para aplicaciones multi-página)

Consolida en UN tema de tokens compartido y haz que cada página lo consuma — un rediseño que deje diferentes páginas en diferentes paletas ha fallado. Reemplaza los colores por página/ad-hoc con tokens semánticos; verifica con scripts/lint_hardcodes.py que ninguna página reintroduzca valores fuera del tema. Los cambios de tema deben provenir de la única fuente de tokens, no de ediciones por página (.claude/rules/tokens-and-color.md → Consistencia de Tema Único).

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community