Design kit
The BakerMind look as free CSS variables, a Tailwind preset and an agent skill. Copy the theme, or let your agent build a page in it.
Four themes
Each theme is one CSS file of --bm-* variables, light and dark. Previews follow the page theme.
Classic
Chunky islands on a dough stage: ink outlines, hard press shadows, butter accents.
Card on --bm-surface
Caption in --bm-ink-3
Tailwind preset
Load one theme file, then add the preset to map bg-surface, text-ink, rounded-bm and the rest to its variables.
// BakerMind Design Kit Tailwind preset. Generated by build.mjs from tokens/*.json; do not edit.
// Load one themes/<name>.css as well: the preset only points at its --bm-* variables.
const preset = {
"theme": {
"extend": {
"colors": {
"bg": "var(--bm-bg)",
"surface": "var(--bm-surface)",
"surface-2": "var(--bm-surface-2)",
"ink": "var(--bm-ink)",
"ink-2": "var(--bm-ink-2)",
"ink-3": "var(--bm-ink-3)",Agent skill
An Agent Skills file for Claude Code, Cursor, Codex and Gemini. Ask for a landing page in Classic style and the agent uses only the kit's tokens.
Save it as skills/bakermind-design-kit/SKILL.md in your agent's skills folder, such as .claude/skills/bakermind-design-kit/SKILL.md or .agents/skills/bakermind-design-kit/SKILL.md.
Plan your app's flows on BakerMind
The kit is the look. BakerMind boards are where you draw the screens and flows first.