# Onefold

> Free DESIGN.md generator. Turn your colors, type and voice into one design spec that Claude Code, Cursor and Codex follow, so vibe-coded UI stays on brand.

Start here: https://onefold.me/start. Free, no account needed, about five minutes.

## What it is for

Onefold is a free DESIGN.md generator for vibe coding and AI coding agents.

Coding agents such as Claude Code, Cursor and Codex, and vibe coding tools such as
Lovable, v0 and Bolt, build interfaces but don't know a team's brand. Vibe-coded UI
picks colors that are almost right, rounds corners inconsistently and writes copy
in a generic voice. Onefold is a guided wizard that starts from a team's website,
or one brand color, and turns its colors, dark theme, typography, shape, depth,
component library, icon set and voice into one DESIGN.md that agents read before
changing UI.

## What is DESIGN.md

DESIGN.md is the emerging convention for giving AI coding agents a design spec: a
Markdown file in the repository with design tokens and the reasoning behind them.
AGENTS.md says how to work in a codebase; DESIGN.md says how the product should
look and sound. Reference DESIGN.md from AGENTS.md so every agent task uses it.

## How to create one

1. Start from your website. Enter your address and Onefold reads your colors, type, corners, shadows and tone, so every step starts from what you already have. No website yet? One brand color becomes a complete, readable palette.
2. Get help with the rest. Onefold suggests grays that suit your brand, status colors that won’t clash with it, a dark theme, a type scale and a voice, and shows each choice on a live preview. Keep a suggestion or make it yours.
3. Hand it to every agent. Download your DESIGN.md and put it next to your code. Claude Code, Cursor, Codex and every agent that reads your repository follows it from the next prompt on.

It helps with every decision instead of starting from a blank page: a website
import fills colors, typefaces, corners, shadows and tone, one brand color becomes
a complete palette with readable text on buttons, and Onefold suggests grays,
status colors, a dark theme, a type scale and a voice that fit. Imported values
only fill decisions that are still open and stay editable. Every choice shows on
a live preview. Anything left undecided is marked in the file, so agents ask
instead of guessing.

## What you get

- Generates a DESIGN.md design spec for AI coding agents and vibe coding tools
- Starts from a website: reads colors, typefaces, corners, shadows and tone into an editable draft
- Turns one brand color into a complete palette with readable text on every button
- Suggests neutral grays and status colors that suit the brand
- Builds a dark theme from the same color scales, with contrast checked
- Builds a type scale around the chosen typefaces
- Captures corner style, depth, and voice and tone, with ready-made starting points
- Records the component library and icon set, so agents don’t add a second one
- Shows every choice on a live preview
- Tells agents which clichés of AI-generated UI to avoid
- Marks undecided parts so agents ask instead of guessing
- Exports a DESIGN.md, CSS variables and a Tailwind theme
- Free, no signup

## Works with

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, Tailwind CSS.

## Topics

- DESIGN.md
- DESIGN.md generator
- vibe coding
- vibe-coded UI
- AI-generated UI design
- AI design slop
- avoid AI-generated design clichés
- design spec for AI agents
- design system for AI coding agents
- brand guidelines for AI agents
- AGENTS.md
- design tokens
- Claude Code design system
- Cursor design rules
- Tailwind theme generator
- Tailwind dark mode theme
- dark mode design tokens
- extract brand colors from a website
- shadcn/ui design system
- color palette generator
- voice and tone guide

## Questions and answers

### What is a DESIGN.md?

A Markdown file in your repository that describes how your product looks and sounds: colors, typography, spacing, corners, shadows and voice, as exact design tokens plus the reasoning behind them. AI coding agents read it before they build UI, so vibe-coded screens match your brand instead of a generic default.

### How is DESIGN.md different from AGENTS.md?

AGENTS.md tells an agent how to work in your codebase: commands, conventions, what not to touch. DESIGN.md tells it how the product should look and sound. They work best together: add one line to AGENTS.md that points at DESIGN.md.

### What do I get at the end?

A DESIGN.md that describes your colors, dark theme, typography, corners, shadows, component library, icon set and voice, and tells agents which clichés of AI-generated UI to avoid. You can take the same decisions as CSS variables or a Tailwind theme, so your code and the file use the same names.

### Can Onefold start from my website?

Yes. Enter your address and Onefold reads your product name, colors, typefaces, corners, shadows and tone from the live site. It only fills decisions you haven’t made yet, and every value stays editable in its step.

### Do I need an account?

No. Open the wizard and start. Your progress is saved as you go, so you can close the tab and pick up later where you stopped.

### What does it cost?

Nothing. Creating and downloading your DESIGN.md is free.

### I don’t have a design system. Is this for me?

Especially. If you have a website, Onefold starts from it. If you only have a brand color and a font you like, that’s enough too. Onefold suggests the rest, and every suggestion is yours to change.

### Will agents stop adding new libraries and icons?

Yes, once your DESIGN.md names the ones you use. Pick your component library, such as shadcn/ui, MUI or Mantine, and your icon set, such as Lucide or Phosphor. Agents reuse them instead of installing a second library or drawing one-off icons.

### Does it cover dark mode?

Yes. Onefold builds your dark colors from the same scales as your light ones, checks their contrast and writes down how your product switches themes. If your product is light only, the file says so, and agents don’t invent a dark theme.

### We never wrote down a voice and tone.

Most teams haven’t. Start from your website and Onefold suggests a voice from how your product already sounds, or pick the template closest to you. If you do have a guide, paste the lines you care about most.

### Which agents does it work with?

Any agent that reads files in your repository: Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI and others. Mention DESIGN.md in your agent instructions and it becomes part of every task.

### Does it work with Lovable, v0 or Bolt?

Yes. Paste your DESIGN.md into the project’s knowledge or custom instructions, and every screen the tool generates starts from your brand instead of its defaults.

### What happens to what I enter?

Your draft is kept in your browser, and Onefold doesn’t store it. If you import a website, Onefold reads that public site to fill in your draft. When you start and when you download, Onefold records the website, product name and brand color you used, so we can see how the wizard is used. Nothing else from your draft leaves your browser.

## Help articles

- [Add your DESIGN.md to Claude Code, Cursor, Codex and other agents](https://onefold.me/help/using-design-md/add-design-md-to-your-agent): Where to put your DESIGN.md, and the one line that makes Claude Code, Cursor, Codex, Copilot, Windsurf or Gemini CLI read it before building UI. Updated 2026-09-15.
- [What’s in your DESIGN.md](https://onefold.me/help/using-design-md/whats-in-your-design-md): A walk through each section of the DESIGN.md Onefold creates, from color roles, dark theme and spacing to components, icons and the rules that stop agents building UI that looks AI-generated. Updated 2026-09-16.

## Pages

- [DESIGN.md generator for on-brand vibe coding](https://onefold.me/): Free DESIGN.md generator. Turn your colors, type and voice into one design spec that Claude Code, Cursor and Codex follow, so vibe-coded UI stays on brand.
- [Help](https://onefold.me/help): How to hand your DESIGN.md to Claude Code, Cursor, Codex and other agents, and what each part of it tells them.
- [Free DESIGN.md generator for AI coding agents](https://onefold.me/design-md): Create a DESIGN.md with your colors, typography, UI rules and voice, ready for Claude Code, Cursor, Codex and other AI coding agents.
- [AI design guidelines for coding agents](https://onefold.me/ai-design-guidelines): Give AI coding agents design guidelines they can follow: exact tokens, interface rules and voice in one editable DESIGN.md file.
- [Brand guidelines for on-brand vibe coding](https://onefold.me/vibe-coding-brand-guidelines): Stop generic vibe-coded UI. Turn your brand decisions into a DESIGN.md that keeps every AI-built screen on brand.
- [Avoid AI design slop in generated UI](https://onefold.me/avoid-ai-design-slop): Avoid the generic gradients, filler copy and default UI patterns that make AI-generated design look AI-made. Create a DESIGN.md your agents follow.
- [shadcn/ui DESIGN.md for Cursor and Claude Code](https://onefold.me/shadcn-design-md): Keep AI agents on your shadcn/ui components, built on Base UI or Radix, and your icon set. A DESIGN.md that stops a second library from creeping in.
- [Extract brand colors from a website into DESIGN.md](https://onefold.me/extract-brand-colors-from-website): Paste a URL and turn your brand colors, typefaces, corners, shadows and tone into design tokens: an editable DESIGN.md, CSS variables and a Tailwind theme.
- [Dark mode design tokens and a Tailwind dark theme](https://onefold.me/dark-mode-design-tokens): Dark mode design tokens built from your own color scales, with contrast checked. Export CSS variables and a Tailwind dark theme that switch the way your product does.
- [Imprint](https://onefold.me/imprint): Legal notice and contact details for Onefold.

## Contact

Oliver Pitsch, Cologne, Germany. onefold@pitsch.me