Biblioteca aberta · 461 arquivos documentados

DESIGN MD (DESIGN.md)

designmd.app é uma biblioteca open-source de arquivos DESIGN.md — especificações estruturadas de design system que agentes de IA leem antes de gerar UI. Cada arquivo define cores, tipografia, espaçamento e regras de componentes em Markdown com tokens YAML. Escolha um estilo, coloque no seu repo, e seu agente produz interfaces consistentes desde o primeiro prompt.

Compatível com Claude Code · Cursor · Kiro · Windsurf · Cline

Biblioteca

461 DESIGN.md prontos para usar

Ver todos →

01

Agentes não lembram do seu design

LLMs processam cada prompt isoladamente. Sem referência no repositório, cada componente gerado usa decisões visuais diferentes.

02

DESIGN.md entra no context window

YAML front matter com design tokens (cores, tipografia, espaçamento) + prosa Markdown com racional e restrições. O agente lê antes de gerar qualquer UI.

03

Copie da biblioteca, cole no projeto

461 design systems documentados. Escolha um estilo, baixe o DESIGN.md e configure seu agente.

Leitura

Artigos e guias

Ver todos →
Guia

Como usar DESIGN.md com Cursor

Use .cursor/rules para injetar o DESIGN.md em cada geração de UI.

Ler guia →

Guia

Como usar DESIGN.md com Cursor

Configure .cursor/rules/*.mdc to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Kiro

Adicione DESIGN.md ao diretório .kiro/steering do seu projeto.

Ler guia →

Guia

Como usar DESIGN.md com Kiro

Configure .kiro/steering/ to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Windsurf

Configure global_rules.md para apontar para seu DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Windsurf

Configure .windsurfrules to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Google Stitch

Exporte DESIGN.md diretamente do Google Stitch.

Ler guia →

Guia

Como usar DESIGN.md com Google Stitch

Configure Native UI to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com GitHub Copilot

Configure copilot-instructions.md to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com GitHub Copilot

Configure copilot-instructions.md to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Cline

Configure .clinerules to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Cline

Configure .clinerules to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Aider

Configure .aider.conf.yml to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Aider

Configure .aider.conf.yml to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Codex

Configure AGENTS.md to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Codex

Configure AGENTS.md to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Devin

Configure Knowledge Base to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Devin

Configure Knowledge Base to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Continue.dev

Configure .continuerc.json to reference your DESIGN.md.

Ler guia →

Guia

Como usar DESIGN.md com Continue.dev

Configure .continuerc.json to reference your DESIGN.md.

Ler guia →

Artigo

DESIGN.md + AGENTS.md + RULES.md: qual arquivo faz o quê

Mapa definitivo dos arquivos de contexto para agentes IA — DESIGN.md, AGENTS.md, RULES.md,…

Artigo

DESIGN.md em escala: quando os tokens não bastam (e o que adicionar)

DESIGN.md resolve tokens visuais mas agentes IA ainda adivinham comportamento de component…

Estrutura

Anatomia de um DESIGN.md

Oito seções na ordem canônica da especificação oficial. YAML front matter com tokens + prosa Markdown com racional. O agente lê o arquivo completo antes de gerar qualquer componente.

Ver formato completo →
DESIGN.md
---
name: Productivity App
colors:
  primary: "#2665fd"
  surface: "#0b1326"
  on-surface: "#dae2fd"
typography:
  headline:
    fontFamily: Geist
    fontSize: 2rem
    fontWeight: 600
  body:
    fontFamily: Geist
    fontSize: 1rem
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 12px
spacing:
  sm: 8px
  md: 16px
  lg: 32px
---

## Overview
Interface minimal para app de produtividade.
Linhas limpas, alta densidade de informação.

## Colors
- **Primary** (#2665fd): CTAs, estados ativos
- **Surface** (#0b1326): Backgrounds

## Typography
- Headlines: Geist, semi-bold
- Body: Geist, regular, 14–16px

## Components
- Buttons: rounded-lg, primary filled
- Inputs: 1px border, surface-variant bg

## Do's and Don'ts
- Do usar primary apenas para ações principais
- Don't misturar cantos arredondados e retos

Guias de configuração

Configure o DESIGN.md com seu agente de IA

References