Continue.dev .continuerc.json

DESIGN.md + Continue.dev

Configuration reference: contextProviders DESIGN.md

Why Continue.dev + DESIGN.md Is Ideal for Teams

Continue stands out because of:

  1. Open-source - no vendor lock-in, no data sent to third parties (can run 100% locally)
  2. Multi-model - switch Claude for GPT or Llama without changing workflow
  3. Context providers - programmable context injection mechanism
  4. Custom slash commands - create shortcuts like /design-check that validate against DESIGN.md
  5. Shareable configuration - .continuerc.json goes in the repo, everyone uses the same setup

For design systems in a team setting, this combination is unmatched. The designer updates DESIGN.md, commits, and instantly every developer (VS Code AND JetBrains) generates code using the new tokens. No extra configuration, no reinstalling anything.

Step by Step Setup

1. Install Continue.dev

VS Code: Extensions > search “Continue” > Install

JetBrains: Settings > Plugins > search “Continue” > Install

Configure the model in ~/.continue/config.json or through the extension settings:

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

2. Project structure

my-project/
├── DESIGN.md
├── .continuerc.json      ← Per-project configuration
├── .continue/
│   └── prompts/          ← Custom slash commands
│       └── design-check.prompt
├── src/
└── ...

3. Create .continuerc.json

The .continuerc.json at the project root configures Continue specifically for this repo. It gets merged with the user’s global config:

{
  "customContextProviders": [
    {
      "name": "design-system",
      "description": "Injects DESIGN.md tokens and guidelines into context",
      "type": "file",
      "filePath": "DESIGN.md"
    }
  ],
  "systemMessage": "This project uses DESIGN.md as the source of truth for visual decisions. Before generating any UI component, read and apply the tokens defined in DESIGN.md. Use exclusively the colors, typography and spacing defined there. Respect the listed constraints.",
  "docs": [
    {
      "name": "Design System",
      "startUrl": "DESIGN.md"
    }
  ]
}

Key fields:

  • customContextProviders - creates a @design-system context provider that injects DESIGN.md
  • systemMessage - global instructions included in every interaction
  • docs - indexes DESIGN.md as searchable documentation

4. Configure the @file context provider

Continue has the native @file provider that lets you reference any file. But creating a semantic alias provides better UX:

In ~/.continue/config.json (global configuration):

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

Now, in Continue’s chat, you can use:

@file DESIGN.md Create a sidebar navigation component

Or with the custom provider:

@design-system Create a sidebar navigation component

5. Create Custom Slash Commands

Create reusable prompts in .continue/prompts/:

# .continue/prompts/design-check.prompt

---
name: design-check
description: Checks if the selected code follows DESIGN.md
---

Analyze the selected code and verify if it follows the project's DESIGN.md:

{{{ input }}}

Checklist:
1. Are the colors used in the DESIGN.md palette?
2. Do font sizes follow the typographic scale?
3. Are spacings multiples of the base?
4. Do border-radius values use the defined tokens?
5. Do interactive elements have hover, focus and disabled?
6. Is any constraint being violated?

For each problem found, show:
- Line with the issue
- What's wrong
- How to fix using DESIGN.md tokens

Reference: @file DESIGN.md

Usage in chat:

/design-check [select code in the editor]

Another useful command for generating components:

# .continue/prompts/component.prompt

---
name: component
description: Generates a component following DESIGN.md
---

Generate a React TypeScript component for: {{{ input }}}

Mandatory rules:
- Read and apply tokens from @file DESIGN.md
- Named export with Props interface
- Variants via prop when applicable
- States: default, hover, focus, disabled
- Accessible: aria-labels, keyboard navigation
- Responsive: work on mobile and desktop

Generate the complete component, ready for use.

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

Continue.dev v1.0 introduced a rules system similar to Cursor. Create in .continue/rules/:

# .continue/rules/design-system.md

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

When working on UI files:
1. Read DESIGN.md at the root before suggesting or generating code
2. Use ONLY colors from the defined palette
3. Follow the exact typographic scale
4. Spacing in multiples of the base (8px)
5. Respect documented constraints

Concrete Usage Example

In Continue’s chat (VS Code or JetBrains):

@file DESIGN.md

Create a feature comparison table component for the pricing page.
3 columns (Free, Pro, Enterprise). Rows with features and checkmarks/X.
Highlight on the Pro column. Responsive with horizontal scroll on mobile.

Generated result:

// 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]">
              Feature
            </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>
  );
}

DESIGN.md tokens applied: #5F6368 (text-secondary), #202124 (text-primary), #1A73E8 (primary), #34A853 (success/secondary), #F8F9FA (background). Spacing in multiples of 4. No gradients, no exaggerated shadows. Constraints respected.

Continue.dev-Specific Tips

Tab autocomplete with design context

Continue supports inline autocomplete (like Copilot). Configure it to consider DESIGN.md:

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

With the systemMessage configured in .continuerc.json, even autocomplete receives the instruction to follow the design system.

@codebase for visual auditing

Continue has the @codebase provider that indexes the entire project. Use it for auditing:

@codebase Find all components that use hardcoded colors NOT in the DESIGN.md.
List each file, line and the incorrect color.

Multiple models for different tasks

Configure different models for different tasks:

{
  "models": [
    {
      "title": "Claude (UI generation)",
      "provider": "anthropic",
      "model": "claude-sonnet-4-20250514",
      "systemMessage": "UI specialist. Always follow the project's DESIGN.md."
    },
    {
      "title": "GPT-4o (logic/backend)",
      "provider": "openai",
      "model": "gpt-4o"
    }
  ]
}

For UI tasks, select Claude with the design system message. For backend work, use the other model without that instruction.

Share configuration with the team

The .continuerc.json goes in the repository (commit it to git). Every developer who opens the project with Continue gets:

  • The same design system context provider
  • The same system message
  • The same slash commands
  • The same rules

Zero individual configuration. Instant onboarding.

Dynamic context providers (advanced)

For projects with multiple 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"
    }
  ]
}

In chat: @design-light Create... or @design-dark Create...

JetBrains: same configuration

Continue in JetBrains reads the same config. The .continuerc.json at the root works identically. Developers using IntelliJ, WebStorm, and PyCharm get the same experience. This is rare. Most AI coding tools are VS Code-only.

Troubleshooting and Gotchas

The @design-system context provider doesn’t appear

Check:

  • .continuerc.json is at the project root
  • The JSON is valid (no trailing commas, no comments)
  • The filePath points to the correct DESIGN.md (relative to root)
  • Restart VS Code/JetBrains after creating .continuerc.json

System message isn’t being applied

The systemMessage in .continuerc.json gets merged with the global config. If the global has conflicting instructions:

  1. Remove conflicting system messages from ~/.continue/config.json
  2. Or use the field at the model level (overrides global)
  3. Check with “Show System Message” in Continue’s debug output

Autocomplete ignores the design system

Inline autocomplete uses a different model (usually smaller and faster). It may lack the capacity to follow complex instructions:

  1. Use a capable model for tab autocomplete (Codestral works well)
  2. For complex components, use chat instead of autocomplete
  3. Autocomplete works best for completing patterns WITHIN components that already follow the design system

DESIGN.md too large for context

If the model complains about context or ignores parts:

  1. Keep DESIGN.md below 3000 tokens
  2. Use concise YAML front matter (more token-efficient than prose)
  3. Create a separate DESIGN-TOKENS.md with just the tokens (for the context provider)
  4. Keep the full DESIGN.md as human documentation

Conflict between .continuerc.json and global config

The project config (.continuerc.json) gets merged with global. Arrays are concatenated, not replaced. If there are duplicate context providers:

  1. Use different names to avoid collisions
  2. Project-specific has priority for scalar fields
  3. Arrays stack. Context providers from project + global all become available

Continue doesn’t find the referenced file

If @file DESIGN.md returns empty:

  1. The workspace must be open at the root (File > Open Folder)
  2. The path is relative to the workspace root
  3. In a monorepo, you might need the full path: @file packages/ui/DESIGN.md

Team Workflow

1. Design lead creates/updates DESIGN.md
2. Commit + push
3. .continuerc.json distributes configuration to all devs
4. Each dev generates components with @design-system in Continue
5. CI/CD can validate tokens (script comparing colors in code vs DESIGN.md)
6. PR review includes visual check

This workflow is zero-friction. Nobody needs to “remember” to read the design system because Continue does it automatically in every UI interaction.

Conclusion and Next Step

Continue.dev with DESIGN.md is the democratic option. Open-source, multi-IDE, multi-model, shareable via git. For teams that want visual consistency without paying for proprietary tools or getting locked into a vendor, it’s the obvious choice.

The context providers system is the real differentiator. No other tool lets you create @design-system as an alias for automatic DESIGN.md injection. It’s ergonomic, explicit, and works in both VS Code and JetBrains.

Setup takes 15 minutes. Once .continuerc.json is in the repo, every developer using Continue is already configured. The design system stops being “that file nobody reads” and becomes an active part of the code generation flow.

Next steps:

Useful links