Designed for you
A design system your agent really understands.
Every design system and workflow on Didot is crafted by a working designer. Not generated, not generic. Drop it into your project and your AI builds UI that actually looks and feels unique.
Compatible with all major AI coding tools
Claude CodeCursorWindsurfCopilotZedContinueFrom the marketplace
Design systems and workflows, ready to drop in.
Why markdown
The simplest design system format that exists.
Plain text. No dependencies.
A markdown file lives in your repo alongside your code. No plugins, no build step, no proprietary format. Open it in any editor.
Every AI coding tool reads it.
LLMs understand markdown natively. Add your design system files to your project and every AI tool instantly knows your visual rules.
Version controlled by default.
Design decisions live in git with the rest of your codebase. Review, diff, and roll back changes the same way you do with code.
Consistent output, every session.
Without a design file, AI generates different components every time. With one, you get the same colours, spacing, and type, every session.
What you get
A complete brief for your AI, not just a style guide.
Each bundle contains the files your AI needs to generate consistent UI. Here is what the two core files do.
DESIGN.md
Your visual identity
Covers your colour palette, type scale, spacing system, border radii, shadows, and component patterns. When Claude Code reads this, it knows exactly what a button, a card, or a form field looks like in your project.
SKILL.md
The designer's thinking
Captures the decisions behind the design: when to use which pattern, how to handle edge cases, and what the system is optimised for. It turns Claude Code from a component generator into something closer to a trained collaborator.
Workflow files
Workflows tell agents how to build, not just what to build.
A design system gives your agent a visual identity. A workflow file gives it a process: how to scope a feature, what to verify before writing code, how to handle edge cases, and what done looks like. The agent follows each step, in sequence, every time.
Read the workflow
The agent parses the markdown file at the start of every task. No prompt engineering needed — the rules are already in the project.
Follow each step in order
Scoping, implementation, review. The agent works through each phase sequentially, the same way a disciplined engineer would.
Apply your standards throughout
Checklists, constraints, and acceptance criteria are embedded in the file. The agent applies them without being asked each session.
Deliver something reviewable
Because the workflow defines done, output is consistent and predictable. Less back-and-forth, fewer surprises in review.
WORKFLOW.md — example
# Feature build workflow
## Before writing any code
- State the feature goal in one sentence
- List acceptance criteria explicitly
- Identify which existing components to reuse
- Flag any ambiguity before proceeding
## Implementation order
1. Data layer and types first
2. Server logic before UI
3. UI built against real data, not mocks
4. Apply DESIGN.md tokens throughout
## Done means
- [ ] Works on all breakpoints
- [ ] Error and empty states handled
- [ ] No hardcoded values or inline styles
- [ ] Matches DESIGN.md visual spec
Designer-made
Not all design systems are made equal.
Free templates are built for everyone, which means they commit to nothing. Every premium bundle on Didot is authored by a working designer: specific, opinionated, and tested in a real project before it reaches you.
Free / generic
- Covers every style loosely, commits to none
- Written for human browsing, not AI instruction
- Requires prompt engineering for consistent output
- Generates different results session to session
- Still leaves the design decisions to you
Didot: designer-made
- One precise visual identity, end to end
- Structured for how AI tools read rules
- Drop in and start building immediately
- The same output, every single session
- A senior designer's judgement behind every token
How it works
Up and running in three steps.
Find a design system
Browse the Didot marketplace and pick a complete design system or workflow that matches your project: minimal, bold, editorial, or something in between.
Drop it into your project
Add the files to your project root. In Claude Code, reference them in your CLAUDE.md. In Cursor or Windsurf, add them to your rules file. Takes under a minute.
Build with a consistent visual identity
Every component your AI generates now follows your colours, type scale, spacing, rules and patterns. No more re-explaining your design intent each session.
Free guide
How to build a design system for Claude Code.
Learn what to include, how to structure your files, how to write component patterns AI can follow, and how to test your system before publishing.
Read the guideSell on Didot
Sell your craft to people who value it.
Didot is the only marketplace where professional designers sell AI-native design systems and workflows. Every buyer is a developer actively building with AI tools. Stripe handles payments. You keep 78% of every sale.
Start selling