DESIGN.md vs SKILL.md: identidade visual e procedimento
Use o contexto visual para a aparência, a skill para o procedimento recorrente e o briefing para a mudança atual. Isso mantém a direção entre páginas sem impor o mesmo layout a todas.
Revisado em 8 de outubro de 2026. Consulte a documentação oficial da versão da ferramenta utilizada.
Comece com uma página funcional
Visualize uma página HTML funcional e aplique estas técnicas com o código e o prompt incluído no seu agente de programação.
Framewise — Template HTML de landing page para produto de IA
Pratique a apresentação do produto, a hierarquia visual e um destaque responsivo.
Visualizar modeloAster Hale — Template HTML de portfólio para designer de produto
Adapte os serviços, os casos de projetos e o contato ao seu trabalho.
Visualizar modeloAs Skills continuam gratuitas para leitura e cópia sem login. As prévias dos modelos são públicas; baixar o código e seu prompt exige conta e a compra ou o plano correspondente. Ver acesso ao código e preços
O que colocar em DESIGN.md?
O DESIGN.md do Google descreve identidade visual; a especificação está em alpha. Explique papéis das cores, tipografia, espaçamento, controles e comportamento responsivo com seus motivos. O exemplo é Markdown comum, não um arquivo validado pelo esquema de tokens do Google.
O que colocar em SKILL.md?
Descreva uma tarefa repetível: quando revisar, o que inspecionar, quais comportamentos preservar e como relatar falhas. Separe fatos do projeto e pedido atual. O exemplo contém instruções e não é uma skill externa empacotada.
Combinar os arquivos com um briefing concreto
Informe página, visitante, ação principal, conteúdo real e comportamentos protegidos. Peça a leitura explícita do contexto e do procedimento e um resumo dos limites antes de editar. O nome do arquivo não comprova carregamento ou aplicação automática.
Manter o contexto quando o site muda
Após aceitar uma mudança, atualize a explicação e registre as verificações reais. Mantenha regras estáveis para controles compartilhados, permitindo layouts distintos. Comportamento e acessibilidade também exigem verificação no código e navegador; uma nota não os garante.
Exercícios originais para adaptar
Estes exemplos originais da Neruve permanecem em inglês. São entradas propostas, não resultados testados nem prompts de templates pagos. Substitua os dados fictícios antes de usar.
Uma nota de identidade visual
# 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.Uma skill de revisão apenas com instruções
---
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.Exercício real: Fieldnote com Codex
Fieldnote inclui o briefing original, o HTML do Codex sem alterações e verificações em desktop e celular. Nenhum Skill frontend-design foi fornecido; não é um teste do ChatGPT ou do Claude Design.
Exercício real: Fieldnote com CodexPerguntas frequentes
Posso usar com Claude Code, Codex ou Stitch?
Siga o formato e carregamento documentados por cada ferramenta. O contexto comum pode ser fornecido como texto; conversão, descoberta e extensões exigem verificações próprias. Este guia não promete exportação DESIGN.md ou integração automática da Neruve.
Explore designs e os prompts associados
O catálogo público da Neruve oferece designs de sites, prompts associados disponíveis e um diretório de Skills. As prévias interativas não exigem login; os prompts seguem as permissões do item e do plano. Este fluxo usa sua própria ferramenta de desenvolvimento e não exige um gerador público de sites da Neruve.
Referências oficiais
Ferramentas e skills externas pertencem aos seus autores. Os links são referências, sem indicar parceria ou acesso incluído.