In short:
ak-design-systemgathers colors, spacing and font sizes into three-layer tokens, writes a state spec for each component and builds HTML slides with the project's tokens. Base colors and fonts can come fromak-brand; to bring tokens into Tailwind, hand off toak-ui-styling. If the project already has a brand or template, it keeps them and does not invent a new system.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when color codes and px values are scattered across your code, when you need to change one color without breaking anything else, when you need a state spec for a component, or when you need an HTML deck that follows the project's tokens. You do not need it for a PPTX deck: that goes through the installed presentation tool, and this skill's slide rules apply only to HTML.
flowchart LR
BR["ak-brand: brand colors and fonts"] -.-> B["ak-design-system"]
A["Request for tokens, a component or slides"] --> B
B --> C["CSS or JSON token file"]
B --> D["Component state spec table"]
B --> E["HTML slides using tokens"]
C --> F["ak-ui-styling: bring tokens into Tailwind"]Four things to know:
| Point | Question | Example |
|---|---|---|
| Three token layers | Which layer does this value belong to? | Base layer --color-blue-600: #2563EB, semantic layer --color-primary points to it, component layer --button-bg points to --color-primary |
| Switch themes at the semantic layer | Where do you edit to get dark mode? | Inside .dark, reassign --color-background to a dark gray. Buttons, cards and inputs follow automatically because they only read the semantic layer |
| State spec | What does a component look like in each state? | Primary button: default has a primary background, hover is darker, active is darkest, disabled has a muted background and fades out. When states overlap, disabled wins, then loading, active, focus, hover |
| No hardcoded values | Does the component use raw color codes or px values? | color: #2563EB is wrong, color: var(--color-primary) is right. Slides follow the same rule |
Sample prompt for a project with no tokens yet:
/ak-design-system Create a three-layer token set for <app name>.
Brand colors: <primary color code>, <secondary color code>. Spacing in 4px steps.
Constraints: both light and dark mode.
Done when: there is a ready-to-use tokens.css file and a source JSON file.This skill has no flags.
Below is the detailed version: the run flow, 6 situations with prompts, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-design-system: build tokens, component specs and on-brand slides" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-design-system". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-design-system
