# DESIGN.md with v0, Lovable, Bolt, Replit

> Where v0, Lovable, Bolt and Replit keep project instructions, how to add DESIGN.md to each, and a short prompt you can paste into any of them.

Canonical page: https://sitepeel.dev/guides/design-md-app-builders/

Put DESIGN.md where each builder keeps lasting context: Lovable or Bolt Knowledge, Replit’s replit.md, or a v0 Instruction plus the attached file. Then build one screen first.

Published: 2026-10-24

Tool used in this guide: [Design MD generator](https://sitepeel.dev/design-md-generator/index.md)

## How to use it

1. **Make and review DESIGN.md** Generate it from a site with Sitepeel. Check the primary color, headings and buttons before you use it.
2. **Add it to the project** Attach the file in chat or add it to the project files, and keep it at the project root.
3. **Add a lasting rule** In Knowledge, Instructions or replit.md, write: “For all UI, follow DESIGN.md in the project root.”
4. **Paste the starter prompt** Use the prompt below. It asks for one screen, then a stop for your review.
5. **Review before building more** Compare the screen with DESIGN.md at phone and desktop widths, then continue page by page.

## Where each builder keeps project instructions

Lasting instructions in AI app builders

| Builder | Where lasting rules go | How to add DESIGN.md |
| --- | --- | --- |
| v0 | Instructions: + in the prompt bar, then Instructions, then New Instruction. Saved to your account | Attach the file with +, then Upload from computer. Turn on a short design Instruction |
| Lovable | Project settings, then Knowledge (up to 10,000 characters). A root AGENTS.md in the project’s Git repository | Paste the rules into Project knowledge, or commit DESIGN.md and point to it from AGENTS.md |
| Bolt | Gear icon, then Knowledge. Bolt also reads an agents.md file in the project | Attach DESIGN.md in chat, ask Bolt to save it in the project root, then add a Knowledge rule |
| Replit | replit.md in the project root. Workspace Custom instructions on Pro and Enterprise | Upload DESIGN.md to the root and add a line to replit.md |

## A prompt to paste into any builder

Attach DESIGN.md first, or paste it under the prompt. Asking for one screen lets you catch problems before they spread to every page.

Example: design-prompt.txt

```
I attached DESIGN.md, our design system.
Save it as DESIGN.md in the project root and follow it for all UI.

- Use only its color, typography, spacing and radius tokens.
- Match its button, card and input styles.
- Follow its Do's and Don'ts.
- If DESIGN.md has no rule for something, ask me first.

Build the home page only, then stop so I can review it.
```

## Notes for each builder

- v0: chat attachments accept text files; checked Instructions apply to your messages until you uncheck them
- Lovable: Knowledge is always included, but very long chats may follow it less consistently
- Bolt: Knowledge stays available in long chats and after you clear the context
- Replit: replit.md must sit in the project root, and Agent may edit it, so check your design line stays

## Check the first screen

- Compare buttons, headings and spacing with DESIGN.md at phone and desktop widths
- Ask which tokens it used, and look for colors that aren’t in the file
- When a mistake repeats, fix the rule or DESIGN.md, not just the screen

- [Make a DESIGN.md from any website, free](https://sitepeel.dev/design-md/index.md)
- [The builder still ignores the design? Check these five things](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md)

## Questions and answers

### Does Bolt support DESIGN.md?

Yes. Bolt’s docs show it: attach DESIGN.md in chat, ask Bolt to save it in the project root, then add a Project Knowledge rule telling Bolt to follow the file for new parts of the app.

### Where do I add project knowledge in Lovable?

Open Project settings, then Knowledge. Project knowledge holds up to 10,000 characters and is always included in context. Workspace knowledge, managed by owners and admins, applies to every project.

### What is replit.md?

A Markdown file in your project root that Replit Agent reads for your conventions and preferences. Agent creates it for new projects, and you can edit it.

### Does v0 have project instructions?

v0 has Instructions: reusable rules saved to your account and turned on from the + button in the prompt bar. For a design system, attach DESIGN.md to the chat and keep a short Instruction that points to it.

## Further reading

- [v0 docs: Instructions](https://v0.app/docs/instructions)
- [v0 docs: Images, videos and file uploads](https://v0.app/docs/images-and-videos)
- [Lovable docs: Workspace and project knowledge](https://docs.lovable.dev/features/knowledge)
- [Bolt docs: Add your Stitch design system (DESIGN.md) to Bolt](https://support.bolt.new/integrations/google-stitch)
- [Bolt docs: Manage project context and agents.md](https://support.bolt.new/prompting/manage-context)
- [Replit docs: replit.md](https://docs.replit.com/features/project-setup/replit-dot-md)
- [Replit docs: Agent customization](https://docs.replit.com/features/agent/agent-customization)

## Related pages

- [What is DESIGN.md](https://sitepeel.dev/guides/what-is-design-md/index.md): DESIGN.md is a Markdown design-system file for AI coding agents. See its format, a small example, the official linter and how to make one from any site.
- [DESIGN.md with Claude Code](https://sitepeel.dev/guides/design-md-claude-code/index.md): Import DESIGN.md into CLAUDE.md with @DESIGN.md so Claude Code follows your colors, type and spacing. Includes a sample CLAUDE.md and checks.
- [DESIGN.md with Cursor](https://sitepeel.dev/guides/design-md-cursor/index.md): Point Cursor at DESIGN.md with a project rule in .cursor/rules, AGENTS.md or an @ mention. Includes a sample .mdc rule and the four rule types.
- [Use Design MD with AI](https://sitepeel.dev/guides/use-design-md-with-ai/index.md): Hand DESIGN.md to Cursor, Claude Code or another AI coding assistant: where to save it, two prompts to copy and how to review what it builds.
- [Create a Design MD file](https://sitepeel.dev/guides/create-design-md-from-website/index.md): Make a DESIGN.md file from any website with the free generator or Sitepeel’s Design MD tool, then check it so an AI can use it well.