DESIGN.md + Continue.dev

Por que Continue.dev + DESIGN.md é ideal para times

O Continue se destaca por:

1. Open-source — sem vendor lock-in, sem dados enviados para terceiros (pode rodar 100% local)
2. Multi-modelo — troque Claude por GPT ou Llama sem mudar workflow
3. Context providers — mecanismo programável de injeção de contexto
4. Custom slash commands — crie atalhos como /design-check que validam contra DESIGN.md
5. Configuração compartilhável — .continuerc.json vai no repo, todo time usa igual

Para design systems em time, essa combinação é imbatível. O designer atualiza o DESIGN.md, commita, e instantaneamente todos os devs (VS Code E JetBrains) passam a gerar código com os novos tokens. Sem configuração extra, sem reinstalar nada.

Passo a Passo de Configuração

1. Instalar o Continue.dev

VS Code: Extensions → buscar “Continue” → Install

JetBrains: Settings → Plugins → buscar “Continue” → Install

Configure o modelo em ~/.continue/config.json ou no settings da extensão:

{
  "models": [
    {
      "title": "Claude Sonnet",
      "provider": "anthropic",
      "model": "claude-sonnet-4-20250514",
      "apiKey": "sk-ant-..."
    }
  ]
}

2. Estrutura do projeto

meu-projeto/
├── DESIGN.md
├── .continuerc.json      ← Configuração por projeto
├── .continue/
│   └── prompts/          ← Custom slash commands
│       └── design-check.prompt
├── src/
└── ...

3. Criar o .continuerc.json

O .continuerc.json na raiz do projeto configura o Continue especificamente para esse repo. É mergido com a config global do usuário:

{
  "customContextProviders": [
    {
      "name": "design-system",
      "description": "Injects DESIGN.md tokens and guidelines into context",
      "type": "file",
      "filePath": "DESIGN.md"
    }
  ],
  "systemMessage": "Este projeto usa DESIGN.md como source of truth para decisões visuais. Antes de gerar qualquer componente de UI, leia e aplique os tokens definidos no DESIGN.md. Use exclusivamente as cores, tipografia e espaçamentos definidos lá. Respeite as restrições listadas.",
  "docs": [
    {
      "name": "Design System",
      "startUrl": "DESIGN.md"
    }
  ]
}

Campos importantes:

• customContextProviders — cria um context provider @design-system que injeta o DESIGN.md
• systemMessage — instruções globais que vão em toda interação
• docs — indexa o DESIGN.md como documentação pesquisável

4. Configurar o context provider @file

O Continue tem o provider @file nativo que permite referenciar qualquer arquivo. Mas criar um alias semântico é melhor UX:

No ~/.continue/config.json (configuração global):

{
  "contextProviders": [
    {
      "name": "file",
      "params": {}
    },
    {
      "name": "code",
      "params": {}
    },
    {
      "name": "docs",
      "params": {}
    }
  ]
}

Agora, no chat do Continue, você pode usar:

@file DESIGN.md Crie um componente de sidebar navigation

Ou com o provider custom:

@design-system Crie um componente de sidebar navigation

5. Criar Custom Slash Commands

Crie prompts reutilizáveis em .continue/prompts/:

# .continue/prompts/design-check.prompt

name: design-check
description: Verifica se o código selecionado segue o DESIGN.md

Analise o código selecionado e verifique se segue o DESIGN.md do projeto:

{{{ input }}}

Checklist:
1. As cores usadas estão na paleta do DESIGN.md?
2. Os tamanhos de fonte seguem a escala tipográfica?
3. Os espaçamentos são múltiplos do base?
4. Os border-radius usam os valores definidos?
5. Elementos interativos têm hover, focus e disabled?
6. Alguma restrição está sendo violada?

Para cada problema encontrado, mostre:
- Linha do problema
- O que está errado
- Como corrigir usando os tokens do DESIGN.md

Referencie: @file DESIGN.md

Uso no chat:

/design-check [selecione o código no editor]

Outro comando útil — gerar componentes:

# .continue/prompts/component.prompt

name: component
description: Gera um componente seguindo o DESIGN.md

Gere um componente React TypeScript para: {{{ input }}}

Regras obrigatórias:
- Ler e aplicar tokens do @file DESIGN.md
- Named export com interface de Props
- Variantes via prop quando aplicável
- Estados: default, hover, focus, disabled
- Acessível: aria-labels, keyboard navigation
- Responsivo: funcionar em mobile e desktop

Gerar o componente completo, pronto para uso.

6. Rules system (Continue.dev v1.0+)

O Continue.dev v1.0 introduziu um sistema de rules similar ao Cursor. Crie em .continue/rules/:

# .continue/rules/design-system.md

description: Enforces DESIGN.md tokens in UI code
globs: ["**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte", "**/*.astro"]

Ao trabalhar em arquivos de UI:
1. Leia DESIGN.md na raiz antes de sugerir ou gerar código
2. Use APENAS cores da paleta definida
3. Siga escala tipográfica exata
4. Espaçamentos em múltiplos do base (8px)
5. Respeite restrições documentadas

Exemplo Concreto de Uso

No chat do Continue (VS Code ou JetBrains):

@file DESIGN.md

Crie um componente de feature comparison table para a página de pricing.
3 colunas (Free, Pro, Enterprise). Linhas com features e checkmarks/X.
Highlight na coluna Pro. Responsivo com scroll horizontal em mobile.

Resultado gerado:

// src/components/ComparisonTable.tsx
interface Feature {
  name: string;
  free: boolean | string;
  pro: boolean | string;
  enterprise: boolean | string;
}

interface ComparisonTableProps {
  features: Feature[];
  popularPlan?: 'free' | 'pro' | 'enterprise';
}

export function ComparisonTable({ features, popularPlan = 'pro' }: ComparisonTableProps) {
  const plans = ['free', 'pro', 'enterprise'] as const;
  const planNames = { free: 'Free', pro: 'Pro', enterprise: 'Enterprise' };

  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse">
        <thead>
          <tr>
            <th className="text-left p-4 text-sm font-medium text-[#5F6368]">
              Funcionalidade
            </th>
            {plans.map((plan) => (
              <th
                key={plan}
                className={`p-4 text-center text-sm font-bold text-[#202124] ${
                  plan === popularPlan
                    ? 'bg-[#1A73E8]/5 border-t-2 border-[#1A73E8] rounded-t-lg'
                    : ''
                }`}
              >
                <div className="flex flex-col items-center gap-1">
                  {plan === popularPlan && (
                    <span className="text-[10px] uppercase tracking-wider text-[#1A73E8] font-bold">
                      Popular
                    </span>
                  )}
                  {planNames[plan]}
                </div>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {features.map((feature, idx) => (
            <tr
              key={feature.name}
              className={idx % 2 === 0 ? 'bg-[#F8F9FA]' : 'bg-white'}
            >
              <td className="p-4 text-sm text-[#202124]">
                {feature.name}
              </td>
              {plans.map((plan) => {
                const value = feature[plan];
                return (
                  <td
                    key={plan}
                    className={`p-4 text-center ${
                      plan === popularPlan ? 'bg-[#1A73E8]/5' : ''
                    }`}
                  >
                    {typeof value === 'boolean' ? (
                      value ? (
                        <CheckCircle className="w-5 h-5 text-[#34A853] mx-auto" />
                      ) : (
                        <XCircle className="w-5 h-5 text-[#5F6368]/40 mx-auto" />
                      )
                    ) : (
                      <span className="text-sm text-[#202124] font-medium">{value}</span>
                    )}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Tokens do DESIGN.md aplicados: #5F6368 (text-secondary), #202124 (text-primary), #1A73E8 (primary), #34A853 (success/secondary), #F8F9FA (background). Espaçamento em múltiplos de 4. Sem gradientes, sem sombras exageradas — restrições respeitadas.

Dicas Específicas do Continue.dev

Tab autocomplete com contexto de design

O Continue suporta autocomplete inline (como Copilot). Configure-o para considerar o DESIGN.md:

{
  "tabAutocompleteOptions": {
    "multilineCompletions": "always",
    "useFileSuffix": true
  },
  "tabAutocompleteModel": {
    "title": "Codestral",
    "provider": "mistral",
    "model": "codestral-latest"
  }
}

Com o systemMessage configurado no .continuerc.json, até o autocomplete recebe a instrução de seguir o design system.

@codebase para auditoria visual

O Continue tem o provider @codebase que indexa todo o projeto. Use para auditoria:

@codebase Encontre todos os componentes que usam cores hardcoded que NÃO estão no DESIGN.md.
Liste cada arquivo, linha e a cor incorreta.

Multiple models para diferentes tarefas

Configure modelos diferentes para tarefas diferentes:

{
  "models": [
    {
      "title": "Claude (UI generation)",
      "provider": "anthropic",
      "model": "claude-sonnet-4-20250514",
      "systemMessage": "Especialista em UI. Sempre seguir DESIGN.md do projeto."
    },
    {
      "title": "GPT-4o (logic/backend)",
      "provider": "openai",
      "model": "gpt-4o"
    }
  ]
}

Para tarefas de UI, selecione o Claude com system message de design. Para backend, use outro modelo sem essa instrução.

Compartilhar configuração com o time

O .continuerc.json vai no repositório (commite no git). Todo dev que abrir o projeto com Continue terá:

• O mesmo context provider de design system
• O mesmo system message
• Os mesmos slash commands
• As mesmas rules

Zero configuração individual. Onboarding instantâneo.

Context providers dinâmicos (avançado)

Para projetos com múltiplos design systems (multi-tenant, white-label):

{
  "customContextProviders": [
    {
      "name": "design-light",
      "type": "file",
      "filePath": "design/DESIGN-LIGHT.md"
    },
    {
      "name": "design-dark",
      "type": "file", 
      "filePath": "design/DESIGN-DARK.md"
    }
  ]
}

No chat: @design-light Crie... ou @design-dark Crie...

JetBrains: mesma configuração

O Continue no JetBrains lê a mesma config. O .continuerc.json na raiz funciona identicamente. Devs de IntelliJ, WebStorm e PyCharm têm a mesma experiência. Isso é raro — a maioria das ferramentas de AI coding é VS Code only.

Troubleshooting e Gotchas

O context provider @design-system não aparece

Verifique:

• .continuerc.json está na raiz do projeto
• O JSON é válido (sem trailing commas, sem comentários)
• O filePath aponta para o DESIGN.md correto (relativo à raiz)
• Reinicie o VS Code/JetBrains após criar o .continuerc.json

System message não está sendo aplicada

O systemMessage no .continuerc.json é mergeado com o global. Se o global tem instruções conflitantes:

1. Remova system messages conflitantes do ~/.continue/config.json
2. Ou use o campo no nível do model (sobrescreve global)
3. Verifique com “Show System Message” no debug do Continue

Autocomplete ignora o design system

O autocomplete inline usa modelo diferente (geralmente menor e mais rápido). Ele pode não ter capacidade de seguir instruções complexas:

1. Use modelo capaz para tab autocomplete (Codestral é bom)
2. Para componentes complexos, use o chat em vez do autocomplete
3. O autocomplete é melhor para completar padrões DENTRO de componentes que já seguem o design system

DESIGN.md muito grande para o contexto

Se o modelo reclama de contexto ou ignora partes:

1. Mantenha o DESIGN.md abaixo de 3000 tokens
2. Use front matter YAML conciso (é mais token-efficient que prosa)
3. Crie um DESIGN-TOKENS.md separado com só os tokens (para o context provider)
4. O DESIGN.md completo fica como documentação humana

Conflito entre .continuerc.json e config global

A config do projeto (.continuerc.json) é mergeada com a global. Arrays são concatenados, não substituídos. Se houver context providers duplicados:

1. Use nomes diferentes para evitar colisão
2. O projeto-specific tem prioridade para campos escalares
3. Arrays somam — context providers do projeto + global ficam todos disponíveis

Continue não encontra o arquivo referenciado

Se @file DESIGN.md retorna vazio:

1. O workspace deve estar aberto na raiz (File > Open Folder)
2. O caminho é relativo à raiz do workspace
3. Se usa monorepo, pode precisar de caminho completo: @file packages/ui/DESIGN.md

Workflow para Times

1. Design lead cria/atualiza DESIGN.md
2. Commit + push
3. .continuerc.json distribui a configuração para todos os devs
4. Cada dev gera componentes com @design-system no Continue
5. CI/CD pode validar tokens (script que compara cores no código vs DESIGN.md)
6. PR review inclui check visual

Esse workflow é zero-friction. Ninguém precisa “lembrar” de ler o design system — o Continue faz isso automaticamente em toda interação de UI.

Conclusão e Próximo Passo

O Continue.dev com DESIGN.md é a opção democrática. Open-source, multi-IDE, multi-modelo, compartilhável via git. Para times que querem consistência visual sem pagar por ferramenta proprietária ou ficar preso a um vendor, é a escolha óbvia.

O sistema de context providers é o diferencial real. Nenhuma outra ferramenta permite criar @design-system como alias para injeção automática do DESIGN.md. É ergonômico, explícito e funciona tanto no VS Code quanto no JetBrains.

O setup leva 15 minutos. Uma vez que o .continuerc.json está no repo, todo dev que usar Continue já está configurado. O design system deixa de ser “aquele arquivo que ninguém lê” e vira parte ativa do fluxo de geração de código.

Próximos passos:

• O que é DESIGN.md — especificação completa do formato
• Biblioteca de DESIGN.md — 450+ design systems prontos
• Guias de outros agentes: GitHub Copilot · Cursor · Aider · Cline