From frontend-design
Create a visual content design system for a website — typographic scale, vertical rhythm, and styled content blocks (citations, callouts, code, tables, lists, alerts, examples). Use when building a visual foundation, type scale, or content components, or on "create a design system", "style the content blocks", "make the content look good", "set up typography", "create visual hierarchy", "everything looks the same", "bland design", "blocks have no personality", "grille visuelle", "mise en page de contenu", "système typographique". Also triggers when a new site needs its visual layer built from scratch. Complements frontend-audit-visual (diagnoses) and frontend-audit-functional (audits). This skill creates, those skills audit.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design:content-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a complete, opinionated visual system for web content — from typographic
Generate a complete, opinionated visual system for web content — from typographic scale to styled content blocks — adapted to the project's ambiance and content type.
The three most common failures in AI-generated web content layouts:
This skill prevents all three by enforcing measurable rules at every step.
references/content-blocks.md — Detailed CSS specs for all 7 content block types (citations, callouts, code, tables, lists, alerts, examples). Read this file before generating Step 3 output.Before generating anything, establish the project context. Ask the user if missing.
## Brief du projet
- Type de contenu : [long-form / vitrine / hybride]
- Ambiance cible : [ex. dark fantasy / éditorial / SaaS / corporate]
- Inspirations : [ex. Stripe docs, A24, Notion, iA Writer]
- Thème : [clair / sombre / les deux]
- Framework CSS : [aucun / Tailwind / Bootstrap / autre]
- Polices souhaitées : [ex. Inter + Literata / system fonts / à proposer]
- Contenu enrichi : [citations / callouts / code / tableaux / listes / alertes / exemples]
- Densité cible : [aéré / compact / variable]
Si non fourni : inférer du contexte, proposer le brief rempli, attendre validation.
Adaptation au type de contenu :
.hero (vitrine) et .prose (long-form) avec transition fluideL'échelle typographique est la colonne vertébrale. Tout le reste en découle.
| Ratio | Nom | Effet | Usage idéal |
|---|---|---|---|
| 1.125 | Major Second | Subtil, compact | Dashboards, UI dense |
| 1.200 | Minor Third | Équilibré | Docs techniques |
| 1.250 | Major Third | Lisible, confortable | Blogs, articles |
| 1.333 | Perfect Fourth | Expressif, aéré | Éditorial, magazines |
| 1.500 | Perfect Fifth | Dramatique | Landing pages, héros |
| 1.618 | Golden Ratio | Très dramatique | Sites artistiques |
Règles critiques :
À partir du ratio et d'une base (min 1rem / 16px) :
body = base h4 = base × ratio^3
h6 = base × ratio^1 h3 = base × ratio^4
h5 = base × ratio^2 h2 = base × ratio^5
h1 = base × ratio^6
display = base × ratio^7 (optionnel, héros)
Vérifications obligatoires :
La taille seule ne suffit pas. Chaque heading se différencie sur ≥ 2 axes :
| Niveau | Axes recommandés |
|---|---|
| h1 | Taille + bold + letter-spacing serré (-0.02em) + font optionnelle |
| h2 | Taille + semibold + border-bottom ou couleur accent |
| h3 | Taille + semibold + text-transform ou couleur muted |
| h4 | Taille + medium + italic ou small-caps |
| h5 | Taille ≈ body + bold + uppercase + letter-spacing élargi |
| h6 | Taille ≈ body + semibold + couleur muted |
Anti-pattern : h2 et h3 ne diffèrent QUE par 2px → indistinguables. Ajouter un signal supplémentaire.
/* margin-top ≥ 2× margin-bottom → association visuelle titre → contenu */
h1 { margin-top: 0; margin-bottom: 1.5rem; }
h2 { margin-top: 3.5rem; margin-bottom: 1rem; }
h3 { margin-top: 2.5rem; margin-bottom: 0.75rem;}
h4 { margin-top: 2rem; margin-bottom: 0.5rem; }
h5 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
h6 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
Bloc CSS complet avec toutes les tailles en rem, line-height adapté (tight pour grands titres, normal pour petits), font-weight, letter-spacing, font-family par niveau, marges verticales, commentaires avec le ratio et la logique de différenciation.
:root {
--rhythm: 1.7rem; /* line-height body (1.7) × font-size (1rem) */
}
Tous les espacements sont des multiples de cette unité.
| Transition | Espacement | Justification |
|---|---|---|
| p → p | 1× rhythm | Séparation standard |
| heading → p | 0.5× rhythm | Titre lié au contenu qui suit |
| p → heading | 2–3× rhythm | Rupture de section, respiration |
| p → blockquote/callout/code | 1.5× rhythm | Distinguer du flux |
| blockquote/callout → p | 1.5× rhythm | Retour au flux |
| p → liste | 1× rhythm | Continuité naturelle |
| section → section | 3–4× rhythm | Rupture majeure |
| section → section (vitrine) | 4–6× rhythm | Respiration dramatique |
.prose vs .hero) pour basculer→ Lire references/content-blocks.md avant de générer cette section.
Chaque bloc de contenu enrichi doit avoir une identité visuelle propre qui le distingue immédiatement du texte courant.
Principe directeur : un content block se différencie du body text sur ≥ 3 axes visuels parmi : fond, bordure, padding, typographie, icône, couleur, indentation, ombre.
| Type | Rôle | Signal visuel principal |
|---|---|---|
| Citation | Propos rapporté, extrait | Border-left + italic + fond subtil |
| Callout | Information contextuelle | Border-left colorée + icône + fond |
| Code | Contenu technique exécutable | Font mono + fond contrasté + border |
| Tableau | Données structurées comparables | Header distinct + bandes alternées |
| Liste | Énumération ordonnée ou non | Puces custom + espacement généreux |
| Alerte | Message transitoire/actionnable | Fond coloré + icône + dismiss button |
| Exemple | Démo visuelle avec source | Zone preview + zone code + caption |
Silhouette test : un lecteur qui scrolle rapidement doit pouvoir identifier chaque type de bloc sans lire le contenu. Si deux types se ressemblent visuellement, ils manquent de différenciation.
thead des tableaux diffère du tbody sur ≥ 2 signauxLe wrapper .prose applique toutes les règles sur un bloc de contenu.
.prose {
max-width: var(--content-max-width, 68ch);
margin-inline: auto;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body, 1.7);
color: var(--color-text);
& > * + * { margin-top: 1.25em; }
& hr {
border: none;
border-top: 1px solid var(--color-border);
margin: 3em auto;
max-width: 5em;
}
& a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color var(--duration-base) var(--ease-default);
&:hover { text-decoration-thickness: 2px; }
}
& img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1.5em 0; }
& figure {
margin: 2em 0;
& figcaption {
margin-top: 0.5em;
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
}
}
/* Variante vitrine */
.prose--hero {
max-width: 80ch;
font-size: var(--text-lg);
& > * + * { margin-top: 2em; }
}
:root + règles CSS classiquestailwind.config.js (theme.extend) + @layer components avec @apply. Les tokens deviennent des entrées du config, pas des classes arbitraires$font-size-base, $headings-*, $spacer) + CSS custom pour les composants non couverts## Checklist Content Design System
### Échelle typographique
- [ ] Ratio choisi et documenté
- [ ] h1/body ≥ 2.0×
- [ ] Chaque paire adjacente diffère sur ≥ 2 axes
- [ ] h6 ≥ taille du body
- [ ] line-height adapté par niveau
### Rythme vertical
- [ ] Unité de base définie (--rhythm)
- [ ] margin heading→content < margin content→heading
- [ ] Espacement entre sections ≥ 3× rhythm
- [ ] Mode long-form ET vitrine couverts (si hybride)
### Content blocks
- [ ] Chaque bloc se distingue du body sur ≥ 3 axes visuels
- [ ] Silhouette test passé
- [ ] Callouts : couleur + icône par type sémantique
- [ ] Code : inline et bloc différenciés, overflow-x géré
- [ ] Tableaux : thead distinguable, responsive wrapper
- [ ] Listes : espacement inter-items ≥ 0.4em
- [ ] Tokens sémantiques (info, warning, danger, success)
- [ ] Thème sombre vérifié (si applicable)
### Conteneur prose
- [ ] max-width ≤ 70ch
- [ ] line-height ≥ 1.6
- [ ] Liens avec underline visible + hover
- [ ] Images responsives
background subtils du clair deviennent souvent invisibles en dark.npx claudepluginhub camauger/dev-skills --plugin frontend-designCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.