Audita tu web con las reglas de diseño de Apple: guía paso a paso

Lo que necesitas

Claude

Claude Code, o la app de Claude con acceso a la carpeta de tu proyecto, con soporte de skills.

Git

Para descargar el repositorio de la skill.

Tu web

Con código local o con una URL que Claude pueda abrir.

Medición

La consola del navegador, o Python con Playwright, para comprobar los números.

Instálala bien a la primera

La guía original del repositorio dice git clone dentro de ~/.claude/skills. Con este repositorio eso deja la skill en una carpeta anidada y Claude no la encuentra. Esto es lo que sí funcionó.

1. Descarga el repositorio

   Desde cualquier carpeta temporal:

   git clone https://github.com/NutshellEngineering/apple-design-skill.git

2. Copia solo la subcarpeta de la skill

   La skill vive en skills/apple-design-skill. Esa es la carpeta que debes copiar, no el repositorio entero.

   mkdir -p ~/.claude/skills
   cp -r apple-design-skill/skills/apple-design-skill ~/.claude/skills/

   En Windows (PowerShell):

   Copy-Item -Recurse apple-design-skill\skills\apple-design-skill $HOME\.claude\skills\

   Resultado esperado: ~/.claude/skills/apple-design-skill/SKILL.md y una carpeta references/. Son solo archivos de texto Markdown, sin scripts ni ejecutables.

3. Reinicia Claude Code

   Ciérralo y ábrelo de nuevo. Escribe /: debe aparecer apple-design-skill.

4. Alternativa: como plugin

   Si prefieres no copiar carpetas:

   /plugin marketplace add https://github.com/NutshellEngineering/apple-design-skill

   /plugin install apple-design-skill@apple-design-skill-marketplace

Audita sin tocar el código

Este prompt solo diagnostica. Empieza siempre con "Use the apple-design-skill skill" hasta que veas que se activa; así evitas consejos genéricos. Los puntos 1 a 6 vienen de la guía "The Apple Design Audit"; el 7 (objetivos táctiles) lo agregué porque mi corrida lo necesitó.

Use the apple-design-skill skill for this task.

Audit this site against Apple's design principles. Do NOT change any code yet.
Keep my existing colors and brand. Apply the structural rules only:
scale, spacing, hierarchy, contrast, motion.

Go through it in this order and give me a numbered list of findings:
1. TYPE SCALE. What sizes am I actually using? Flag anything that isn't on a
   consistent scale. Give the exact px values I have and the ones you'd use.
2. SPACING. Is there a base unit (4px or 8px)? List every value that breaks it.
3. HIERARCHY. On each screen, what is the one thing the eye should land on first?
4. CONTRAST. Measured ratio for every text/background pair. Flag under 4.5:1
   (body) and 3:1 (large text).
5. MOTION. Every transition with duration and easing. Flag over 300ms or linear.
6. DENSITY. Where am I cramming and where am I wasting space?
7. TAP TARGETS. Every clickable control under 44px.

For every finding: file and line, what's wrong in one sentence, and the exact
replacement value. Rank the list by how much each fix changes how expensive the
site feels. Measure with a real browser; do not estimate.

Te devolverá una lista numerada y ordenada por impacto. Revísala antes de aprobar nada.

Arregla de tres en tres

Pedir todo de una vez es la forma más rápida de que Claude reescriba medio proyecto. Hazlo por lotes y comprueba cada uno.

1. Lote 1: hallazgos 1 a 3

   Fix findings 1 through 3 only. Keep my existing colors and brand.
   Do not touch anything I didn't ask about.
   After each fix, show before and after of the exact lines you changed.
   When you're done, re-measure those areas and tell me if they pass.

2. Revisa y vuelve a medir

   Mira el antes y el después de las líneas cambiadas. Si tienes pruebas, ejecútalas. Comprueba que la marca (colores, tipografía) no cambió.

3. Lote 2: hallazgos 4 a 6

   Repite el mismo prompt cambiando "1 through 3" por "4 through 6". En mi web fueron 2 rondas de 3 y unos 12 minutos en total.

Los 5 números que debes revisar

Medidos en mi web antes y después. Los tuyos serán distintos; lo importante es que los midas.

Para contar tus tamaños de letra, pega esto en la consola del navegador (F12):

const s = {};
document.querySelectorAll('body *').forEach(e => {
  if ([...e.childNodes].some(n => n.nodeType === 3 && n.textContent.trim())) {
    const f = getComputedStyle(e).fontSize; s[f] = (s[f] || 0) + 1;
  }
});
console.log(Object.keys(s).length, s);

Si algo no sale bien