Ir a la guía de uso
improve-uipor Julien Thibeaut

Improve UI Skill.

Un skill de Claude Code y Codex para revisión de diseño: audita una superficie de producto contra su propia evidencia de diseño y escribe planes de implementación.

  • Revisión de Diseño y Accesibilidad
  • Informe de revisión
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
Encabezados de sección y metadatos leídos del archivo original el 14/09/2026 · 7816 caracteres en total

01 Qué hace

Qué hace el skill improve-ui 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

Improve UI audita una superficie de producto coherente frente al sistema de diseño que realmente la rige, y luego redacta planes de implementación autónomos para que otro agente los ejecute. Es de solo lectura sobre el código fuente del producto: los archivos se crean o editan únicamente bajo design-plans, y no se permiten dependencias, formateadores, commits ni pushes.

Los hallazgos deben superar tres pruebas, contrato, en tiempo de ejecución y de corrección, además de una revisión posterior de falsación, y el informe se detiene en tres, ordenados por confianza, impacto en el usuario, alcance y costo de corrección. Es adecuado para diseñadores y desarrolladores que revisan, refinan o depuran una interfaz sin sustituir su identidad, que investigan el desvío del sistema de diseño, o que preparan una entrega de diseño. Los problemas de accesibilidad, comportamiento, rendimiento y arquitectura quedan fuera del alcance salvo que se solicite lo contrario.

Informe de revisión
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Seleccionar Una Superficie Coherente

    Una solicitud amplia se acota a una única aplicación desplegable y a una familia de superficies coherente para una tarea principal del producto; el skill declara esa selección en lugar de tratar el repositorio como un único producto.

  2. 02
    Reconstruir El Sistema Local

    Solo utiliza una fuente después de comprobar que está vigente y que rige la superficie seleccionada; los borradores, propuestas, migraciones y listas de tareas describen una intención futura salvo que se haya aceptado explícitamente y esté vigente.

  3. 03
    Exigir Tres Pruebas Por Candidato

    Todo candidato que se conserve necesita un contrato, una ruta en tiempo de ejecución y una corrección determinista; los resultados de búsqueda, la repetición y las diferencias de implementación producen candidatos, no hallazgos.

  4. 04
    Verificar Y Falsear

    Los candidatos se atacan de nuevo antes de informar, y solo los que superan esa revisión pueden entrar en la tabla de hallazgos.

  5. 05
    Informe, Ordenado Y Limitado

    Los hallazgos se ordenan por confianza, impacto en el usuario, alcance y costo de corrección, y la lista se corta en tres.

  6. 06
    Especificar Los Cambios Seleccionados

    Antes de escribir, se vuelven a abrir las fuentes citadas, se registra el commit actual cuando está disponible, y se identifican primitivas reutilizables y ejemplos exactos en las superficies afectadas.

02 Encuentra tu caso de uso

Cuándo usar el skill improve-ui

Usa el skill improve-ui 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 están tomados del archivo propio del skill.

Buen caso de uso

  • Cuando se pida revisar, refinar, mejorar o limpiar una interfaz sin reemplazar su identidad

Conozca los límites

  • Nunca modificar el código fuente del producto. Crear o editar archivos solo bajo design-plans/.
  • No instalar dependencias, ejecutar formateadores, hacer commit, push o mutar el árbol de trabajo.
  • No actualices documentación de diseño. Registra los cambios de documentación aceptados en el plan para su ejecutor.
  • Usar evidencia renderizada solo cuando el usuario la proporcione o solicite explícitamente inspección visual.

03 Dentro del skill

Qué aporta el skill improve-ui a la revisión de diseño

4 cosas que el SKILL.md instruye a Claude Code o Codex a hacer, en el orden de secciones del propio archivo.

  1. 1. Seleccionar la superficie

    Respetar el alcance del usuario. Si la solicitud es amplia, seleccionar una aplicación desplegable y una familia de superficies coherente que represente una tarea de producto primaria.

  2. 2. Reconstruir el sistema local

    Busca DESIGN.md, la guía del repositorio y la documentación de diseño local de la superficie.

  3. Lenguaje de diseño

    Escribir None documented en Explicit exceptions a menos que una fuente citada identifique explícitamente la excepción.

  4. 3. Probar hallazgos

    Antes de aplicar la compuerta de prueba, inspeccionar las etiquetas de cara al usuario de cada superficie trazada, presentación de estado activo, ramas responsivas y variantes hermanas para detectar contradicciones internas.

04 Ponlo a trabajar

Instalar improve-ui 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 improve-ui a Claude Code, Codex o tu agente

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

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

Forma genérica de la CLI skills para skills/improve-ui/SKILL.md; el repositorio puede documentar su propia ruta.

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

El SKILL.md no incluye un prompt de ejemplo; este iniciador está escrito desde la línea descriptiva del catálogo. Reemplaza la línea de tarea con tu 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.

Fuente: prompt de inicio escrito desde el uso de una línea del catálogo (no desde el SKILL.md).

Revisa el primer resultado

Antes de aceptar el resultado, busca esto en la transcripción y los archivos:

  • El resultado se entrega como informe de revisión, tal como el catálogo indica para este skill.
  • El agente nombra el skill improve-ui en su plan o transcripción antes de producir el resultado.
  • Su propio contenido, nombres y números aparecen sin cambios en la salida.

En OpenDesign, importa improve-ui desde su enlace de SKILL.md: Plugins → Add → Skill → Import from link, y luego elígelo en la barra superior.

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.

Repository
github.com/ibelick/ui-skills Rama main
Archivo de skill
skills/improve-ui/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 79081ab
License
MIT De LICENSE.
Estrellas del repositorio
8.402 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio ibelick/ui-skills, que contiene 5 skills en este catálogo. No es una calificación ni un recuento de uso de improve-ui.
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.
La descripción propia del Skill
Auditar una interfaz de producto existente contra su propia evidencia de diseño, identificar problemas de interfaz verificados y redactar planes de implementación autocontenidos para otro agente. Estrictamente de solo lectura sobre el código fuente del producto. Usar cuando se solicite revisar, refinar, mejorar o limpiar una interfaz sin reemplazar su identidad; investigar desviaciones del sistema de diseño; o preparar una entrega de diseño.

Descripción del front-matter de SKILL.md. El archivo completo tiene unos 7.816 caracteres. Lee el archivo completo en GitHub.

Improve UI

Ejecuta improve-ui en una tarea real de revisión de diseño.

Descarga OpenDesign, importa improve-ui desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

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

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows