{
  "id": "frontend-design",
  "handle": "frontend-design",
  "canonicalUrl": "https://bestskillsforclaude.com/es/skills/frontend-design",
  "language": "es",
  "alternates": {
    "en": "https://bestskillsforclaude.com/en/skills/frontend-design",
    "es": "https://bestskillsforclaude.com/es/skills/frontend-design",
    "pt-BR": "https://bestskillsforclaude.com/pt-br/skills/frontend-design",
    "ja": "https://bestskillsforclaude.com/ja/skills/frontend-design"
  },
  "category": {
    "id": "design-and-interface",
    "name": "Diseño e interfaz"
  },
  "publisher": {
    "name": "Anthropic",
    "url": "https://github.com/anthropics"
  },
  "source": "https://github.com/anthropics/skills/tree/main/skills/frontend-design",
  "documentation": null,
  "licenseAsStated": "Apache 2.0",
  "runtime": "Claude apps and Claude Code",
  "lastReviewed": "2026-08-05",
  "headline": "¿Por qué toda la interfaz generada se parece, y frontend-design lo arregla?",
  "summary": "La skill más usada del conjunto oficial, porque el estilo por defecto es el fallo más visible.",
  "verdict": "La skill frontend-design da a Claude una dirección de diseño explícita para que las interfaces generadas dejen de converger en la misma tarjeta centrada, la misma cabecera con degradado y las mismas esquinas redondeadas. Cambia el punto de partida, no tu criterio: sigues teniendo que rechazar el primer resultado cuando es aburrido.",
  "bestFor": "Landings, paneles, prototipos y artefactos donde el aspecto forma parte del objetivo.",
  "skipIf": "Trabajas dentro de un sistema de diseño existente, donde los componentes ya deciden el lenguaje visual.",
  "keyTakeaways": [
    "Ataca el estilo genérico, que es la señal más reconocible de una interfaz generada.",
    "Las restricciones funcionan mejor que los adjetivos. Di qué hay que evitar.",
    "No conoce tu marca si no se la das, y para eso están brand-guidelines y theme-factory.",
    "La calidad de diseño sigue necesitando una decisión humana al final."
  ],
  "quickStart": [
    "Instálala desde anthropics/skills con licencia Apache 2.0.",
    "Nombra una sensación de referencia y una restricción, por ejemplo denso y editorial con un solo color de acento, nada juguetón.",
    "Pide dos direcciones contrapuestas en vez de una, y quédate con la menos previsible."
  ],
  "sections": [
    {
      "heading": "Qué cambia en la práctica",
      "paragraphs": [
        "Pide a cualquier modelo una landing y sale casi siempre el mismo artefacto: héroe con degradado, tres tarjetas de características, esquinas muy redondeadas y una llamada a la acción que nadie pulsaría. Pasa porque el promedio de todo es seguro, y lo seguro es lo que sale por defecto.",
        "La skill carga criterios de diseño deliberados antes de generar, así que el modelo parte de un punto de vista y no de un promedio. En la práctica, el primer resultado deja de parecer una plantilla y empieza a parecer una decisión, que es la diferencia entre algo editable y algo que tiras."
      ]
    },
    {
      "heading": "Dónde decepciona",
      "paragraphs": [
        "No rescata un briefing confuso. Si no sabes si la página debe sentirse como un banco o como una revista independiente, la skill elegirá por ti y no te gustará la elección.",
        "Tampoco conoce tus activos de marca. Colores, tipografía y voz tienen que venir de algún sitio, por eso se combina con las skills de marca en vez de sustituirlas."
      ]
    }
  ],
  "faq": [
    {
      "question": "¿Sirve para componentes React y no solo para páginas?",
      "answer": "Sí. Actúa sobre las decisiones de diseño, no sobre el framework, así que aplica donde importe el resultado visual."
    },
    {
      "question": "¿Respetará mi sistema de diseño?",
      "answer": "Por sí sola no. Aporta el sistema o combínala con brand-guidelines y theme-factory."
    },
    {
      "question": "¿Basta con un prompt?",
      "answer": "Pocas veces. Pide dos direcciones contrapuestas y elige, que es más rápido que iterar sobre una mediocre."
    }
  ],
  "sources": [
    {
      "label": "anthropics/skills en GitHub",
      "url": "https://github.com/anthropics/skills",
      "kind": "repository"
    },
    {
      "label": "anthropics/skills, carpeta de la skill frontend-design",
      "url": "https://github.com/anthropics/skills/tree/main/skills/frontend-design",
      "kind": "documentation"
    }
  ],
  "machineReadable": {
    "markdown": "https://bestskillsforclaude.com/es/skills/frontend-design/content.md",
    "json": "https://bestskillsforclaude.com/es/skills/frontend-design/skill.json"
  },
  "disclosure": "Editorial desk review based on the publisher's own repository. Not a security audit, a benchmark or a guarantee of maintenance."
}