DESIGN.md vs SKILL.md: identidad visual y procedimiento

Qué incluir en DESIGN.md

DESIGN.md de Google describe la identidad visual y su especificación es alpha. Explica funciones de color, tipografía, espaciado, controles y comportamiento adaptable, con sus motivos. El ejemplo es Markdown común, no un archivo validado con el esquema de tokens de Google.

Qué incluir en SKILL.md

Describe un procedimiento repetible: cuándo revisar, qué inspeccionar, qué conservar y cómo informar de fallos. Mantén los hechos del proyecto y la solicitud actual por separado. Nuestro ejemplo contiene instrucciones, no una skill externa empaquetada.

Combinar ambos con un brief concreto

Indica la página, el visitante, la acción principal, el contenido real y el comportamiento protegido. Pide leer explícitamente el contexto y el procedimiento, y resumir las restricciones antes de editar. Un nombre de archivo no garantiza carga ni aplicación automática.

Actualizar el contexto cuando cambia el sitio

Después de aceptar un cambio, actualiza la explicación del diseño y registra las comprobaciones. Conserva reglas estables para controles compartidos y permite variaciones de composición. Verifica comportamiento y accesibilidad en código y navegador; una nota no los impone.

Ejercicios originales para adaptar

Estos ejemplos originales de Neruve se mantienen en inglés. Son entradas propuestas, no resultados comprobados ni prompts de plantillas de pago. Sustituye los datos ficticios antes de usarlos.

# 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.

---
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.

Ejercicio real: Fieldnote con Codex

Fieldnote incluye el brief original, el HTML de Codex sin modificar y comprobaciones de escritorio y móvil. No se proporcionó un Skill frontend-design; no es una prueba de ChatGPT ni de Claude Design.

Preguntas frecuentes

Explora diseños y sus prompts

El catálogo público de Neruve ofrece diseños web, prompts asociados disponibles y un directorio de Skills. Las vistas previas interactivas no requieren iniciar sesión; los prompts dependen de las condiciones del recurso y del plan. Este flujo utiliza tu propia herramienta de desarrollo y no requiere un generador público de sitios de Neruve.

• Explorar biblioteca
• Plantillas HTML de landing para SaaS y prompts
• Plantillas web de portafolio y prompts de diseño

Referencias oficiales

• Google · DESIGN.md
• Claude Code · SKILL.md

Las herramientas y skills externas pertenecen a sus autores. Los enlaces son referencias; no implican colaboración ni acceso incluido.