Onefold
Start free

Your agents, finally on brand.

Vibe coding gets you a working screen in minutes, and a generic one. Onefold reads your website and turns your colors, type and tone into a DESIGN.md that Claude Code, Cursor and Codex follow, so what they ship looks and sounds like your product.

Create your DESIGN.mdSee how it works
Primaryfrom #6d4aff
50100200300400500600700800900950
Button5.1:1 AA
Suggested for youyours to change
Grayssuit a cool brand
Status colorswon’t clash
Dark themefrom your scales
Type scalebalanced
Voicefriendly
DESIGN.mdread by your agents
1# Acme
2
3## Color
4- color-action     #6d4aff
5  Primary buttons and links
6- color-danger     #dc2626
7  Errors and destructive actions
8- color-surface    #ffffff
9- color-text       #0f172a
10
11## Shape
12- radius-card      8px
13- shadow-card      `soft`
14
15## Type
16- font-sans        `Inter`
17- text-body        16px / 1.5
18
19## Voice and tone
20We sound warm, plain and encouraging.
21Say what happened, then what to do.
22
23## Avoid generic AI-generated UI
24- No decorative gradients
25- No em dashes in copy
26- No emoji in buttons
27
28<!-- Don't worry, the real file has more :) -->

Ready for

  • Claude Code
  • Cursor
  • Codex
  • GitHub Copilot
  • Windsurf
  • Gemini CLI
  • Lovable
  • v0
  • Bolt

Almost right is the expensive part of vibe coding.

An agent that doesn’t know your brand still ships something. A color that’s close. Corners that don’t match. An error message in somebody else’s voice. Each one is small. Together they are your review queue, and they come back with the next prompt.

Primary button4 screens
Your brandbrand
Settingsclose
Checkoutclose
Onboardingclose

Colors that are nearly yours

You change the button back to your purple in every pull request. Tomorrow the agent picks a slightly different one again.

Cardsone product
2px
8px
16px
24px

Every card a different shape

Slightly round here, very round there. Nothing is wrong enough to block, and nothing looks like one product.

Payment error

Sounds like you

Your card was declined. Check the number and try again.

What shipped

Whoops! Something went sideways. Give it another go!

Words in a stranger’s voice

Agents write your buttons, errors and empty states too. Left alone, AI-generated UI all sounds like the same cheerful default.

Your brand4 places
Figma librarycolors, type
tailwind.config.tssome tokens
globals.cssthe rest
A designer’s headthe rules

Rules only you remember

Your decisions live in a Figma file, a config and a few people’s heads. An agent can only follow what it can read.

From scattered to settled in five minutes.

No blank page and no design system project. Enter your website or one color, answer a few questions, and Onefold does the careful work. You don’t need a finished design system, just a brand you care about.

  1. acme.comfrom your website
    Colors
    TypefacesInter
    Corners8px
    Shadowssoft
    Voiceplain, warm

    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. Suggested for youyours to change
    Grayssuit a cool brand
    Status colorswon’t clash
    Dark themefrom your scales
    Type scalebalanced
    Voicefriendly

    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. DESIGN.mdread by your agents

    ## Color

    color-action #6d4aff Primary buttons

    color-danger #dc2626 Errors

    ## Voice and tone

    We sound warm, plain and encouraging.

    ## Avoid generic AI-generated UI

    No decorative gradients or em dashes.

    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.

Nobody should mistake your product for AI slop.

Left to its defaults, every agent reaches for the same sparkles, violet buttons and “seamless, powerful” copy. Five minutes with Onefold, and it builds with your decisions instead. See how to avoid AI design slop.

What the default shipped

✦ Pro Plan ✦

$29/month. Everything included.

Unlock a seamless, powerful workflow – built to help your team thrive.

  • ✅ Unlimited projects
  • ✅ Priority support
  • ✅ Enterprise-ready
🚀 Upgrade now

After a design decision

app · upgrade

Pro

Popular

$29 / month

For teams that need a clear view of the work they ship.

  • ✓ Unlimited projects
  • ✓ Advanced analytics
  • ✓ Human support
Upgrade to Pro
The problem is not that a violet accent, a rounded card or an emoji is always wrong. It is using them by default, without a reason the product can defend.

What is DESIGN.md?

It’s the file that keeps vibe-coded UI on brand. DESIGN.md is the emerging convention for giving AI coding agents a design spec: a plain Markdown file in your repository with your design tokens and the reasoning behind them. Agents read it the way they read AGENTS.md, before they write a line of interface code.

Writing one by hand means hunting down every color, size and unwritten rule. Onefold reads what your website already shows, asks about the rest and hands you a DESIGN.md, CSS variables and a Tailwind theme that already agree with each other.

Contextwhat an agent reads
AGENTS.mdHow to work in your codebase
DESIGN.mdHow your product looks and sounds
Your promptWhat to build right now

Followed by the coding agents you already use:

  • Claude Code
  • Cursor
  • Codex
  • GitHub Copilot
  • Windsurf
  • Gemini CLI

It also works in vibe coding tools that take project instructions, such as Lovable, v0 and Bolt.

What changes when your agents know your brand.

The same prompt, the same agent, and a result that already looks like it belongs in your product.

Fewer review rounds

Screens arrive in your colors, type and tone, so reviews are about the idea instead of the hex values.

Readable by everyone

Contrast is checked while you choose, so your agents never get a color people can’t read.

Questions, not guesses

Anything you haven’t decided yet is marked as open, so agents ask you instead of making something up.

Fits the code you have

Take the same decisions as CSS variables or a Tailwind theme with the same names. Colors point at one scale, so changing a shade updates every place it’s used.

No second library

Your DESIGN.md names your component library and icon set, so agents reuse them instead of installing another one or drawing one-off icons.

Dark mode that matches

Dark colors come from your own scales and switch the way your product does. If your product is light only, agents don’t invent a dark theme.

A head start from your site

Onefold reads your live website first, so you confirm decisions instead of typing hex values. Every imported value stays yours to change.

Shorter prompts

Stop pasting “use our purple, round the corners, sound friendly” into every chat. It’s already in the file.

Doesn’t look generated

Your DESIGN.md tells agents to skip the tells of AI-built UI: decorative gradients, eyebrow labels, filler copy and em dashes.

I kept watching the same thing happen. A team spends years getting its brand right, then an agent builds a new screen in a blue that’s almost right and a tone nobody agreed on.

The brand was never missing. It was spread across a Figma file, a stylesheet and the heads of two designers, and an agent can’t ask any of them.

Onefold is the shortest way I could find from there to one file your agents follow. It starts small on purpose: your colors, type, shape and voice, written down properly, so the next screen already belongs to your product.

Oliver Pitsch, building Onefold in Cologne

Questions

About DESIGN.md, vibe coding, and what Onefold does with your brand.

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.

Give your agents your brand today.

Start from your website. Five minutes, free, no signup. The next screen your agent builds will already look like it belongs.

Create your DESIGN.md