🌱 Empieza aquí · Pulir tu diseño visual
Esta semilla le enseña a tu asistente a revisar tus diseños con ojo de profesional. Cuando algo se vea "raro" (una presentación, una landing, un carrusel, un documento), le pides que lo revise y te devuelve una calificación del 0 al 10 más una lista de arreglos concretos, aplicando los 7 principios del libro Refactoring UI. No necesitas ser diseñador ni tener uno a la mano.
Para instalarla
Abre esta carpeta con Claude Code o Cowork y dile a tu asistente:
"Siembra esta semilla 🌱"
Con eso basta de tu parte. Tu asistente hace todo lo técnico y al final te dice cómo comprobar que quedó funcionando. Vas a ver algunas palabras en inglés en la pantalla; ni caso, él te guía.
¿Otras formas de pedírselo? "instala esta semilla", "pon a funcionar el revisor de diseño", "haz el setup de esto". Te entiende igual.
Para el asistente que siembra 🤖
Esto es un skill (habilidad), no un hook (gancho de automatización). No necesita entrada en settings.json ni permisos de ejecución: los skills se descubren solos cuando viven en la carpeta correcta. Tu trabajo es copiar el archivo del kernel al lugar adecuado y verificar que quedó.
1. Decide el alcance con el usuario
- Alcance global (recomendado): disponible en todas las conversaciones del usuario. Va en
$HOME/.claude/skills/refactoring-ui/SKILL.md. - Alcance de un proyecto: solo dentro de una carpeta específica. Va en
<TU-RUTA>/.claude/skills/refactoring-ui/SKILL.md, donde<TU-RUTA>es la carpeta raíz del proyecto del usuario.
Si el usuario no tiene preferencia, usa el alcance global.
2. Copia el archivo del kernel
Claude Code / Cowork (macOS o Linux), alcance global:
mkdir -p "$HOME/.claude/skills/refactoring-ui"
cp kernel/SKILL.md "$HOME/.claude/skills/refactoring-ui/SKILL.md"
Windows (Git Bash / WSL): misma ruta ~/.claude/skills/refactoring-ui/. Es un archivo de texto, así que funciona igual en cualquier sistema. Si prefieres PowerShell nativo:
New-Item -ItemType Directory -Force "$HOME\.claude\skills\refactoring-ui"
Copy-Item kernel\SKILL.md "$HOME\.claude\skills\refactoring-ui\SKILL.md"
No hace falta
chmod:SKILL.mdes un archivo de texto que el asistente lee, no un programa que se ejecute.
3. (Opcional) Menciónale su guía de marca
El método funciona tal cual, sin tocar nada. No tiene placeholders obligatorios.
Si el usuario ya tiene una guía de marca (su paleta de colores y sus fuentes decididas), déjaselo saber al asistente para que el método respete esa decisión y aplique los principios encima, en lugar de reabrir la paleta. No hay nada que editar en el archivo: es solo contexto que le das al asistente cuando le pidas una revisión.
4. Verificación post-siembra (obligatoria)
Paso A · comprueba que el archivo quedó en su lugar y con el nombre correcto:
ls -la "$HOME/.claude/skills/refactoring-ui/SKILL.md" && grep -m1 '^name:' "$HOME/.claude/skills/refactoring-ui/SKILL.md"
Salida esperada (el archivo listado con su tamaño, exit=0, más la línea del nombre):
-rw-r--r-- 1 usuario staff ... SKILL.md
name: refactoring-ui
Si sale No such file or directory, la copia no se hizo; repite el paso 2.
Paso B · prueba funcional (el asistente la corre él mismo, sin scripts). Los skills se cargan al inicio de la conversación, así que reinicia la sesión primero. Luego pídele que audite este mini-diseño escrito a propósito con errores:
"Una tarjeta con el título, el precio y la descripción, todos del mismo tamaño (16 px), en negro puro (#000000), pegados sin espacio entre ellos, con el texto a todo lo ancho de la pantalla."
La auditoría correcta debe dar un score de 0 a 10 y señalar al menos estos arreglos, cada uno atado a un principio del método:
- Jerarquía: no todo puede ser del mismo tamaño; el elemento más importante debe destacar por tamaño, peso o color.
- Color: el negro puro (#000) se ve duro; usar un gris muy oscuro (nivel 900).
- Espaciado: falta espacio entre los elementos; agrupar lo relacionado y separar los grupos.
- Ancho de texto: el texto a todo lo ancho cansa la vista; limitarlo a unos 65 caracteres por línea.
Si el asistente devuelve un score y arreglos como esos, el skill está vivo. Avísale al usuario que ya quedó y explícale en una línea qué gana con esto.
✅ ¿Cómo sé que funcionó?
De ahora en adelante, cuando algo visual se te vea "off", solo dile a tu asistente "revisa el diseño de esto" y te dará una calificación más una lista de arreglos concretos. Y cuando estés por publicar algo con audiencia visual (un PDF, un carrusel, una página), pídele que lo audite antes: va a salir pulido de una, sin que tengas que adivinar qué estaba mal.
La prueba más fácil: pásale un slide o una página que sientas amateur y pídele que la puntúe. Si te dice el número y te explica en cristiano qué mover (espacio, jerarquía, color), el skill está haciendo su trabajo. 🌱