Wensity

DESIGN.md generator skill.

Has your AI coding agent write the DESIGN.md file that keeps every later session on one design, in Google's open format: real tokens from your code, or one of four contrast-checked starter systems.

A DESIGN.md is one file in your project that tells every agent and teammate how the product should look. Without it, each new session adds a slightly different grey, button height or corner radius. This skill writes that file from the real tokens in your code, or fits one of four starter systems to a new product and writes its tokens into your CSS, so the document and the code match from the start. The result uses the DESIGN.md format Google Labs published: a token block at the top that its command line tool can lint and turn into a Tailwind theme, then plain-language rules for how to use each value.

Skill
wensity-design-md
Plan
Included with Wensity Pro
Loads when
Asking for a DESIGN.md, a style guide or written design rules that agents should follow
Works in
Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
Format
Agent Skills (SKILL.md), plain files in your project
Pack
One of the Wensity design skills for AI coding agents

Install

1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.

terminal
pnpm dlx wensity@latest login

2. Add the skill. It goes into every agent the CLI finds in your project.

terminal
pnpm dlx wensity@latest skills add wensity-design-md

DESIGN.md generator comes with Wensity Pro, together with every Pro skill, component, block and template.

Get Pro

When it loads

You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:

  • Write a DESIGN.md for this project so every AI agent builds UI consistently.
  • Set up design rules for a new SaaS app before we build anything.
  • Our DESIGN.md is out of date. Update it from the code.

What it covers

Extract, do not invent
Every value comes from the code or from you, with the file each token lives in.
Google's DESIGN.md format
Colors, type, radius, spacing and components as YAML tokens, then the standard sections in their set order, so Google's lint and export commands run on it.
Four starters
Graphite for developer tools, Daylight for SaaS, Editorial for docs and blogs, Studio for portfolios and launches.
Adapt, not recolor
A new direction sentence, an accent from the product's world and rules that fit its real content.
Rules that get followed
Values instead of adjectives, a reason for each rule, and a do and a don't that both name something concrete.
Decisions recorded
When you reject something, it is written down with the date so no agent brings it back.
Kept current
Drift between the file and the code is reported before anything is edited.

Pick a starter

Four starting points for a new project. Switch between them and the file and the sample screen change together, because the screen is built only from what the file says.

Welcome to our platform

The modern solution for all your needs.

Get started
Fast

Built for teams of every size.

Simple

Built for teams of every size.

Secure

Built for teams of every size.

DESIGN.md

# Design

Use a clean, modern and minimal design. Make it look beautiful and professional.

Use nice colors and good typography. Keep spacing consistent.

Make sure it is responsive and accessible.

Without the skill: Clean, modern, beautiful: words every project already wants and no agent can act on. There is nothing to choose between, so the screen is the default it always is.

Key rules

Short beats complete
Agents follow short, concrete files, so the written part stays under about 250 lines.
Inconsistencies are surfaced
Five slightly different greys become one rule and a cleanup list, not a silent pick.
One file, linked
A one-line pointer in AGENTS.md, CLAUDE.md or your Cursor rules makes every agent read it first.
Contrast checked
Every starter passes the color skill's contrast check in both themes, and Google's linter with no errors.
Tokens and CSS agree
A value changed in your stylesheet is changed in the token block in the same edit, and the reverse.
Your rules stay yours
A rule you wrote is never changed without asking.

Extract it from your CSS

A real project's stylesheet on the left, its DESIGN.md on the right. Change a value and the file follows; press a row to find the line it came from.

DESIGN.md, read from app/globals.css

Edit a value on the left and the file follows. Press a row on the right to find its line.

With the skill: Every value comes out of the CSS with its line number, and near duplicates are listed for a person to settle.

Files

Everything installs as plain files in your project, in a folder named after the skill.

SKILL.md
Extracting a design, adapting a starter and keeping the file current.
references/template.md
The structure every DESIGN.md follows, token block first.
references/starters/
Four starter systems: Graphite, Daylight, Editorial and Studio.

Works well with

  • Design director

    Pro

    The core workflow: read, plan, review against generic UI, build and critique. Routes to every other skill.

  • Color and dark mode

    Pro

    OKLCH role tokens, true neutral greys, one accent, both themes, and a script that checks contrast and gamut.

  • Typography

    Free

    Fonts, a role-based type scale, line height, tracking, measure, line breaks, numbers and font loading.