Biblioteca aberta · 759 arquivos documentados

DESIGN MD (DESIGN.md)

Logo do designmd.app

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

759 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

759 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

Cada agente tem seu próprio setup. Escolha o seu para uma visão rápida, ou vá direto para o guia completo com configuração passo a passo.

Todas as integrações →

Sobre o projeto

De Vibe Styles a uma referência aberta

O designmd.app nasceu com outro nome — Vibe Styles — e era uma biblioteca simples com quase 100 estilos para referenciar em agentes e no NotebookLM e gerar sites, vídeos e diagramas.

Com o lançamento do padrão DESIGN(.)md, o site passou a gerar também esses arquivos e foi hospedado em domínio próprio. Cresceu, ganhou categorias, e hoje reúne quase 800 variações e 1.500 acessos diários — todos orgânicos.

O projeto cobre também Real Brands — marcas brasileiras, um conteúdo que não é tão fácil de achar.

O vídeo resume o percurso. É um dos projetos que mais aprendi nessa jornada de #AIDLC — foi nele que testei as primeiras implementações de multiagentes, especificações com BMAD e diversos outros frameworks, web scraping, SEO, GEO entre outras coisas.

Resumo do projeto — 44s

References