Gerador de DESIGN.md: transforme qualquer site em um DESIGN.md

Um DESIGN.md é um guia de estilo em texto puro que as ferramentas de programação com IA leem antes de construir uma tela. O Stylasso escreve um a partir de qualquer site que você abrir: as cores que ele realmente pinta, os níveis tipográficos, raios, espaçamento e estilos de botão, no formato aberto DESIGN.md do Google Labs.

O que é um DESIGN.md

DESIGN.md é um formato aberto publicado pelo Google Labs (google-labs-code/design.md). O começo do arquivo é um front matter YAML com os tokens normativos: colors, typography, rounded, spacing e components. Abaixo vêm oito seções em ordem fixa, de Overview a Do's and Don'ts, que explicam como esses tokens devem ser usados. Um agente de IA que lê o arquivo recebe valores exatos em vez de adivinhar a partir de um print ou do nome de um site.

Por que funciona melhor que "deixa igual a este site"

Peça ao Cursor, ao Claude Code, ao v0 ou ao Lovable uma página "no estilo de" um site e eles trabalham de memória: a paleta fica mais ou menos parecida, e a tipografia e os botões saem genéricos. Com um DESIGN.md no projeto, eles podem usar os códigos hex reais, a escala tipográfica com pesos e espaçamento entre letras, o raio e o padding dos botões, e uma linha que descreve o caráter do site (por exemplo, "claro, títulos leves, botões levemente arredondados, superfícies planas separadas por bordas").

Como criar um com o Stylasso

  1. Instale o Stylasso no Chrome ou no Edge.
  2. Abra o site cujo estilo você quer seguir e clique no ícone do Stylasso.
  3. Escolha DESIGN.md na barra de exportação e clique em Copy DESIGN.md, ou baixe o arquivo.
  4. Coloque o DESIGN.md na raiz do projeto e peça à sua ferramenta: Build a pricing page that follows @DESIGN.md.

O Stylasso tira amostras da página do jeito que o seu navegador a renderiza, então as funções vêm do que é realmente pintado: a cor dos botões principais vira primary, a cor de texto mais usada vira on-surface, e assim por diante. Fontes comerciais ganham uma nota com a fonte gratuita do Google mais parecida, porque provavelmente o seu projeto não tem licença da original.

Um exemplo real

Este é o arquivo completo que o Stylasso escreveu para a Northwind Roasters, uma cafeteria fictícia que criamos para as demos. O linter oficial (npx @google/design.md lint) aponta 0 erros e 0 avisos: 7 cores, 6 níveis tipográficos, 5 raios, 13 passos de espaçamento e 7 componentes. O arquivo está em inglês, do jeito que a extensão gera.

---
version: alpha
name: "Northwind Roasters"
description: "Visual style of https://northwind-roasters.test/, extracted 2026-11-07."
colors:
  primary: "#c2410c"
  secondary: "#4d7c5a"
  neutral: "#fffaf3"
  surface: "#f6eadb"
  on-surface: "#2b1d14"
  on-surface-variant: "#7a6656"
  outline: "#ead8c3"
typography:
  headline-display:
    fontFamily: "Fraunces"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -1.28px
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.4px
  body-lg:
    fontFamily: "Fraunces"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Hanken Grotesk"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
  button-label:
    fontFamily: "Hanken Grotesk"
    fontSize: 17px
    fontWeight: 600
rounded:
  md: 6px
  lg: 10px
  r16: 16px
  r18: 18px
  full: 9999px
spacing:
  base: 4px
  s4: 4px
  s6: 6px
  s11: 11px
  s12: 12px
  s16: 16px
  s18: 18px
  s20: 20px
  s24: 24px
  s28: 28px
  s32: 32px
  s56: 56px
  s72: 72px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button-label}"
    rounded: "{rounded.lg}"
    padding: "11px 20px"
  button-secondary:
    backgroundColor: "#4d7c5a"
    textColor: "#ffffff"
    typography: "{typography.button-label}"
    padding: "11px 20px"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "#ffffff"
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  caption:
    textColor: "{colors.on-surface-variant}"
  divider:
    backgroundColor: "{colors.outline}"
---
# Northwind Roasters

## Overview

Visual style extracted from https://northwind-roasters.test/ on 2026-11-07 by sampling the rendered page. It is a light interface with #c2410c as the brand color, set in Fraunces.

Character: medium-weight headlines, tight letter-spacing on large type, softly rounded buttons, soft shadows for depth.

## Colors

- **primary (#c2410c):** Brand color for main buttons, links and active states.
- **secondary (#4d7c5a):** Second brand color for highlights and badges.
- **neutral (#fffaf3):** Page background.
- **surface (#f6eadb):** Cards, panels and sections.
- **on-surface (#2b1d14):** Body text and headings.
- **on-surface-variant (#7a6656):** Secondary text and captions.
- **outline (#ead8c3):** Borders and dividers.

Other colors on the page, by painted area: #f59e0b (2.9%), #9a3412 (0.8%).

Body text on the background has a contrast of 15.6:1. The brand color has 4.9:1 against the background.

## Typography

- **heading:** Fraunces (Google Fonts, weights 600). CSS stack: `Fraunces, ui-sans-serif, system-ui, sans-serif`. Load it from Google Fonts as Fraunces.
- **body:** Hanken Grotesk (Google Fonts, weights 400, 500, 600). CSS stack: `"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif`. Load it from Google Fonts as Hanken Grotesk.
- **mono:** JetBrains Mono (Google Fonts, weights 400). CSS stack: `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace`. Load it from Google Fonts as JetBrains Mono.

The base size is 17px and the scale grows by about 1.556 per step.

## Layout

Spacing follows a 4px grid; the common steps are 4px, 6px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 56px, 72px.

## Elevation & Depth

Shadows in use, smallest first: `rgba(43, 29, 20, 0.12) 0px 1px 2px 0px`; `rgba(43, 29, 20, 0.08) 0px 1px 3px 0px`; `rgba(43, 29, 20, 0.35) 0px 24px 48px -16px`.

Gradients used for hero and feature backgrounds: `linear-gradient(135deg, rgb(194, 65, 12), rgb(245, 158, 11))`.

## Shapes

Corner radii: md 6px, lg 10px, r16 16px, r18 18px, full 9999px.

## Components

Primary buttons use #c2410c with #ffffff text, 49px tall, padded 11px 20px, bold 17px text, radius 10px, with a shadow. Secondary buttons on the first screen are #4d7c5a with #ffffff text, 49px tall, padded 11px 20px, bold 17px text, radius 10px, with a shadow.

## Do's and Don'ts

- Do use only the tokens above; do not invent new colors, sizes or radii.
- Do reserve the primary color for the main action on a screen.
- Do keep body text at or above the contrast stated in Colors.
- Don't copy the source site's logos, images, illustrations or text.

O que o Stylasso coloca no arquivo

Perguntas

O formato DESIGN.md é estável?

A especificação está marcada como alfa. O Stylasso acompanha as mudanças e confere a saída com o linter oficial nos testes.

É grátis?

Sim. As exportações para DESIGN.md, variáveis CSS, Tailwind v4 e JSON são grátis e sem limite diário. O Pro (US$ 9,99, pagamento único) adiciona um tema de shadcn/ui, tokens do Figma, um ZIP de SVGs e 100 kits salvos.

Ele copia o site?

Não. Ele registra valores de estilo (cores, tamanhos, espaçamento, raios) e dá o nome das fontes. Nunca exporta textos, imagens nem logos da página, e o arquivo pede à sua ferramenta de IA que também não copie.

Relacionados

Gere seu primeiro DESIGN.md com um clique

O Stylasso é gratuito para Chrome e Edge. Variáveis CSS, Tailwind v4, DESIGN.md e JSON são grátis; o tema de shadcn/ui e os tokens do Figma vêm com o Pro (US$ 9,99, pagamento único).

Disponível na Chrome Web Store e no Edge Add-ons.