Neruve
Accueil

DESIGN.md vs SKILL.md : identité visuelle et procédure

Placez l’apparence du projet dans le contexte visuel, la procédure réutilisable dans une skill et la modification actuelle dans le brief. Vous gardez une direction cohérente sans imposer la même mise en page partout.

Vérifié le 8 octobre 2026. Consultez la documentation officielle correspondant à la version de votre outil.

Partez d’une page fonctionnelle

Prévisualisez une page HTML fonctionnelle, puis appliquez ces techniques avec son code et le prompt fourni dans votre agent de programmation.

Framewise — Modèle HTML de landing page pour produit IA

Exercez la présentation du produit, la hiérarchie visuelle et une section d’accueil responsive.

Prévisualiser le modèle

Aster Hale — Modèle HTML de portfolio pour designer produit

Adaptez les services, les études de cas et le parcours de contact à votre activité.

Prévisualiser le modèle

Les Skills restent gratuites à lire et copier sans connexion. Les aperçus des modèles sont publics ; télécharger le code et le prompt fourni nécessite un compte et l’achat ou le forfait correspondant. Voir l’accès au code et les tarifs

Que mettre dans DESIGN.md ?

Le DESIGN.md de Google décrit l’identité visuelle ; la spécification est alpha. Expliquez les rôles des couleurs, la typographie, les espaces, les contrôles et leur adaptation. Notre exemple est du Markdown ordinaire, pas un fichier validé selon le schéma de tokens de Google.

Que mettre dans SKILL.md ?

Décrivez une procédure répétable : quand revoir, quoi inspecter, quel comportement préserver et comment signaler les échecs. Séparez les faits du projet et la demande actuelle. L’exemple illustre des instructions, sans fournir une skill tierce empaquetée.

Associer les deux à un brief concret

Précisez page, visiteurs, action principale, contenu réel et comportements protégés. Demandez de lire explicitement le contexte et la procédure et de rappeler les contraintes avant édition. Un nom de fichier ne prouve ni chargement ni application automatique.

Maintenir le contexte quand le site évolue

Après un changement accepté, actualisez l’explication et les contrôles réalisés. Gardez des règles stables pour les contrôles partagés tout en variant les sections. Vérifiez fonctionnement et accessibilité dans le code et le navigateur : une note ne les impose pas.

Exercices originaux à adapter

Ces exemples originaux de Neruve restent en anglais. Ce sont des entrées proposées, pas des résultats testés ni des prompts de modèles payants. Remplacez les faits fictifs avant utilisation.

Une note d’identité visuelle

# Fieldnote visual context — original exercise
Audience: small product teams comparing research notes.
Primary action: Explore the workflow → #workflow.
Background: warm paper; primary text: ink; muted text must remain readable.
Typography: a strong but compact heading, readable body text, short line lengths.
Spacing: use a consistent scale; the research-note specimen has more breathing room.
Links and buttons: clear intent, visible keyboard focus, readable hover states.
Motion: brief and optional; respect reduced-motion preferences.
Mobile: stack the specimen below the introduction; avoid horizontal scrolling.
Protected facts: no invented customers, testimonials, prices or signup behavior.

This is plain Markdown context, not a validated DESIGN.md token-schema file.
If converting it to Google's format, check the current alpha specification.

Une skill de revue fondée sur des instructions

---
name: review-website-layout
description: Review a website layout and propose one evidence-backed repair.
---

1. Read the project's supplied visual context and protected behavior.
2. Open the actual page at desktop and mobile widths.
3. Record a concrete layout defect and its viewport; do not infer a pass from code.
4. Propose one scoped repair before changing source.
5. Repeat the same check after the repair; retain unresolved defects.

This is an original instruction-only exercise, not Anthropic's frontend-design
skill, a packaged plugin, or a compatibility-tested installation.

Exercice réel : Fieldnote avec Codex

Fieldnote comprend le brief original, le HTML Codex non modifié et les vérifications sur ordinateur et mobile. Aucun Skill frontend-design n’a été fourni ; ce n’est pas un test de ChatGPT ou de Claude Design.

Exercice réel : Fieldnote avec Codex

Questions fréquentes

Peut-on utiliser ces fichiers avec Claude Code, Codex ou Stitch ?

Suivez le format et le chargement documentés par chaque outil. Un contexte simple peut être fourni comme texte ; conversion, découverte et extensions exigent leurs propres vérifications. Ce guide ne promet ni export DESIGN.md ni intégration automatique Neruve.

Explorer les designs et leurs prompts

Le catalogue public de Neruve propose des designs web, des prompts associés disponibles et un répertoire de Skills. Les aperçus interactifs sont accessibles sans connexion ; les prompts suivent les droits du contenu et de votre offre. Ce workflow utilise votre propre outil de développement et ne nécessite pas de générateur public de sites Neruve.

Références officielles

Les outils et skills externes appartiennent à leurs auteurs. Les liens servent de références, sans partenariat ni accès inclus.