DESIGN.md vs SKILL.md: Visual Context and Workflow
Use a visual context file for the project’s appearance, a skill for the reusable procedure, and a brief for the current change. This separation makes it easier to carry a consistent design direction across pages without turning every task into the same layout.
Reviewed on 8 October 2026. Check the linked official documentation for your installed tool version.
Build on a working page
Preview a working HTML page, then use its source and paired prompt to apply these techniques with your coding agent.
Framewise — AI Product Landing Page HTML Template
Practice a clear product story, visual hierarchy and responsive hero.
Preview templateAster Hale — Product Designer Portfolio HTML Template
Adapt the service sections, project stories and contact flow to your own work.
Preview templateSkills stay free to read and copy without signing in. Template previews are public; source downloads and paired prompts require an account and the applicable purchase or plan. View source access and pricing
What belongs in DESIGN.md?
Google’s DESIGN.md describes visual identity; its specification is alpha. For your own context, explain color roles, typography, spacing, controls and responsive behavior. Say why each choice serves the audience. Our example below is plain Markdown context, not a validated file in Google’s token schema.
What belongs in SKILL.md?
Put a repeatable task procedure in a skill: when to review, what to inspect, which behavior to preserve and how to report failures. Keep project facts and today’s request outside the reusable procedure. Our instruction-only example illustrates this split and is not a packaged third-party skill.
Combine both with a concrete website brief
Name the page, intended visitor, primary action, real content and protected behavior. Ask the agent to read your visual context and chosen procedure explicitly. Have it summarize the relevant constraints before editing. Sharing a filename does not prove that every tool automatically loads or enforces the file.
Keep context useful as the website changes
After an accepted change, update the affected design explanation and record what was checked. Keep a stable rule for shared controls while allowing different section layouts. If a requirement concerns behavior or accessibility, verify it in source and browser; a note alone cannot enforce it.
Original exercises you can adapt
These original Neruve examples remain in English. They are proposed inputs, not tested tool outputs or paid template prompts. Replace the fictional facts before using them.
A visual identity note
# 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.An instruction-only review skill
---
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.A real exercise: Fieldnote with Codex
Fieldnote includes an original brief, the unchanged Codex HTML and desktop/mobile checks. No frontend-design Skill was supplied; this is not a ChatGPT or Claude Design test.
A real exercise: Fieldnote with CodexCommon questions
Can I use these files with Claude Code, Codex or Stitch?
Use the format and loading mechanism each tool documents. The plain context example can be supplied as text; conversion, automatic discovery and extensions need their own checks. Neruve does not promise a DESIGN.md export or an automatic integration through this guide.
Explore designs and paired prompts
Neruve's public catalog offers website designs, available paired prompts and a skills directory. Interactive previews are available without signing in; paired prompts follow the item and plan access rules. This workflow uses your own coding tool and does not require a public Neruve site generator.
Official references
Third-party tools and skills belong to their respective authors. These links are references, not a claim of partnership or bundled access.