Anthropic Frontend Design

Guide de conception pour une UI distinctive évitant les valeurs par défaut des modèles en palette, typographie et mise en page

par fcakyon · fcakyon/claude-codex-settings

Testé · Fonctionne ★ 9.2/10

Anthropic Frontend Design — Guide de conception pour une UI distinctive évitant les valeurs par défaut des modèles en palette, typographie et mise en page

Ce que fait

Une compétence de conception basée sur des invites qui oriente Claude vers une conception visuelle distinctive et intentionnelle lors de la création ou de la refonte d'une UI : épingler le sujet, construire un petit système de jetons couleur/type/mise en page/signature, et dériver un élément de signature mémorable au lieu d'utiliser les valeurs par défaut. Se déclenche lorsque l'utilisateur demande de concevoir ou de redessiner une page, un hero, ou une interface, de choisir une typographie ou une palette, ou de corriger un design qui semble générique ou basé sur un modèle. Il nomme explicitement les trois looks par défaut actuels de l'IA et le hero à grandes statistiques comme modèles à éviter.

Rapport de test

Récupéré SKILL.md brut et confirmé que le frontmatter est parsé avec name+description (204 caractères) et la licence Apache-2.0 ; le corps ne référence aucun script ou fichier (guide autonome), donc rien à vérifier, et aucune faille de sécurité. Installation vérifiée dans un HOME temporaire via git clone + cp, plaçant SKILL.md à ~/.claude/skills/anthropic-frontend-design/SKILL.md. Pour la sortie, j'ai construit deux artefacts hero réels pour le même brief (une horloge à marée pour les pêcheurs côtiers) : baseline.html et skill.html. La référence a produit de manière réflexe du bleu marine foncé + bleu ciel, une police système, et la rangée exacte de trois statistiques à grands nombres (10k+/99.9%/24-7) que la compétence nomme comme réponse modèle ; la version suivant la compétence a abandonné les statistiques pour un cadran de marée analogique sur mesure (élément de signature), a utilisé trois rôles de type délibérés (Oswald condensed / Spectral / Plex Mono), une palette marine de 6 hexadécimaux dérivée du sujet, et une copie en voix active pour l'utilisateur final ("The bar is open. Cross before slack." / "Set my bar alert" vs "Never miss the tide again" / "Get Started").

Testé le: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

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)

Commandes et exemples de prompts

/anthropic-frontend-designGuide de conception pour une UI distinctive évitant les valeurs par défaut des modèles en palette, typographie et mise en page

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →