Anthropic Frontend Design

Guía de diseño para UI distintiva que evita valores predeterminados de plantilla en paleta, tipografía y diseño.

Por fcakyon · fcakyon/claude-codex-settings

Probado · Funciona ★ 9.2/10

Anthropic Frontend Design — Guía de diseño para UI distintiva que evita valores predeterminados de plantilla en paleta, tipografía y diseño.

Qué hace

Una skill de diseño solo por prompt que dirige a Claude hacia un diseño visual distintivo e intencional al construir o remodelar UI: fija el sujeto, construye un pequeño sistema de tokens de color/tipografía/diseño/firma, y deriva un elemento de firma memorable en lugar de recurrir a los valores predeterminados. Se activa cuando el usuario pide diseñar o rediseñar una página, héroe o interfaz, elegir tipografía o una paleta, o arreglar un diseño que se siente genérico o de plantilla. Nombra explícitamente los tres looks predeterminados actuales de IA y el héroe de estadísticas de grandes números como plantillas a evitar.

Informe de la prueba

Obtuve SKILL.md en crudo y confirmé que el frontmatter se analiza con nombre+descripción (204 caracteres) y licencia Apache-2.0; el cuerpo no hace referencia a scripts ni archivos (guía autocontenida), por lo que no hay nada que verificar, y no hay olores de seguridad. Verifiqué la instalación en un HOME temporal vía git clone + cp, aterrizando SKILL.md en ~/.claude/skills/anthropic-frontend-design/SKILL.md. Para la salida, construí dos artefactos de héroe reales para el mismo brief (un reloj de marea para pescadores costeros): baseline.html y skill.html. La línea base produjo reflexivamente azul marino oscuro + azul cielo, una fuente del sistema y la misma fila exacta de tres números grandes (10k+/99.9%/24-7) que la skill nombra como respuesta de plantilla; la versión que sigue la skill eliminó las estadísticas por un dial de marea analógico a medida (elemento de firma), usó tres roles de tipografía deliberados (Oswald condensada / Spectral / Plex Mono), una paleta marina de 6 hex derivados del sujeto, y copia en voz activa para el usuario final ("La barra está abierta. Cruza antes de la bajamar." / "Configura mi alerta de barra" vs "Nunca te pierdas la marea de nuevo" / "Empezar").

Probado el: 2026-07-21 · Claude Code 2.x (agent harness)

Instalación

git clone --depth 1 https://github.com/fcakyon/claude-codex-settings.git /tmp/anthropic-frontend-design-src
mkdir -p ~/.claude/skills
cp -R /tmp/anthropic-frontend-design-src/plugins/frontend-design-skills/skills/anthropic-frontend-design ~/.claude/skills/anthropic-frontend-design
# Pure prompt-guidance skill: no scripts, no deps, no API keys, no external tools.
# Plugin-marketplace alternative:
#   /plugin marketplace add fcakyon/claude-codex-settings
#   then install the "frontend-design-skills" plugin (also bundles openai-frontend-design)

Comandos y prompts de ejemplo

/anthropic-frontend-designGuía de diseño para UI distintiva que evita valores predeterminados de plantilla en paleta, tipografía y diseño.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Build a landing page that does not look AI-generated
Design a polished dashboard component for the app
Create a distinctive pricing page layout

Informe completo →