Skip to content
Stokefy
1 of 13
Brutalist SaaS: square, loud and honest software: black rules, hard shadows, one yellow.
Editorial: a magazine on a screen: serif headlines, long columns, red ink for what matters.
Frosted Glass: frosted panels floating over a soft field of colour: light edges, deep blur, rounded everything.
Retro 90s: desktop software from the mid-90s, redrawn: bevelled grey, title bars, a teal desktop and pixel type.
Swiss Grid: the International Typographic Style on a screen: a visible grid, one grotesque, black, white and one red.
Soft Clay: pastel shapes you want to squeeze: puffy, rounded, lit from above, friendly in every word.
Dark Neon: a control room at night: near-black glass, magenta and cyan light, data that glows.
Terminal: a phosphor screen at 2 a.m.: monospace everything, green on near-black, box-drawn panels and a blinking caret.
Paper: stationery on a desk: sheets with soft shadows, ruled and dotted grids, pencil blue and a handwritten note.
Luxury Serif: a grand house in print: ivory and near-black, a bronze-gold accent, a high-contrast serif and room to breathe.
Playful Bold: a party on a screen: candy colours, fat round type, thick outlines and buttons that bounce.
Calm Enterprise: serious software, read all day: cool greys, one trustworthy blue, dense tables that stay legible.

Agent-Ready DESIGN.md: 12 Design Systems for AI Agents

12 original design systems written for the agent that builds your interface, so Claude Code, Cursor or v0 draws in a system instead of its own defaults. Each one is a DESIGN.md (character, voice, colour with measured contrast, type, space, shape, motion, every component with its states, do and don't, a checklist), its tokens in the W3C format and a Tailwind CSS 4 theme that removes every class outside the system. The same token names run through all 12, so a project changes its style by changing one file. Styles: Brutalist SaaS, Editorial, Frosted Glass, Retro 90s, Swiss Grid, Soft Clay, Dark Neon, Terminal, Paper, Luxury Serif, Playful Bold and Calm Enterprise.

Agent SkillsMade for Claude

$3

One payment. The files are yours to download right away.

  • Instant downloadIn your account the moment the payment goes through, with the receipt by email.
  • Personal and commercial useOne license for one person, in your own work and your clients'. The files themselves are not shared or resold.

Includes
12 design systems
Formats
Markdown (DESIGN.md), W3C design tokens (JSON), Tailwind CSS 4 theme (CSS), example page (HTML)
Download
49 files in one zip, 0.2 MB
Works with
Claude Code, Cursor, v0 and any agent that reads Markdown
Category
Agent Skills
Released
20 Oct 2026
License
Personal and commercial use

Where to use it

Claude Code

Put DESIGN.md at the root and point CLAUDE.md at it: every screen the agent draws follows the system.

Cursor and v0

Add it as a project rule or paste it before the first prompt, and the agent stops reaching for its own defaults.

Tailwind CSS 4

theme.css replaces Tailwind's palette and sizes, so a class outside the system draws nothing.

Design tokens

tokens.json in the W3C format feeds Style Dictionary, Figma variables or your own build.

Design review

Every system ends with a checklist and measured contrast, to check what the agent built.

More in Agent Skills

Type something to search.