The component & design-token baseline for human and agentic developers (spacing, typography, theme, etc)
Maintainers usually reply within 1 day
@IanoNjuguna is already working on this.
Since Sep 15, 2026.
Assessment
This issue has not been assessed yet.
Description
Discussed in https://github.com/IntersectMBO/developer-experience/discussions/299
Originally posted by IanoNjuguna September 14, 2026
A design-token baseline translates human visual decisions into machine-readable data structures (such as JSON or W3C format). Human developers visually interpret design specs, whereas agentic AI developers require programmatic constraints to prevent hardcoding arbitrary values and pixel padding, or fragmented font hierarchies.
Implementation Guideline
This entails shipping design skills for AI agents, and a brand assets page for human developers. Context:
-
CSS Variable Export: Transform tokens into CSS Custom Properties (e.g., --space-md, --color-text-primary) using tools like Style Dictionary so both human and agentic developers consume a single source of truth. -
Agent Context Injection: Provide the token taxonomy as a system prompt, MCP tool, or skill file. Instruct AI agents to fail generation if arbitrary values are output instead of semantic variables.
Why a Shared Baseline Matters
-
Eliminates AI Hallucinations: Agentic developers evaluate hard constraints better than open-ended style guidelines. Named tokens enforce guardrails (e.g., forcing the agent to use space.md instead of guessing padding is 13px). -
Enforces Deterministic UI Rules: Enables automated programmatic checks (e.g., CI/CD linters, AST checks, Model Context Protocol servers) to validate generated code against a token schema. -
Simplifies Multi-Theme Architecture: Decouples raw values (primitives) from intent (semantics), allowing humans and agents to update light/dark/brand themes without modifying component code.
Three-Tier Token Architecture
-
Primitive Tokens (Option Layer): Raw visual values. Never referenced directly inside UI code. -
Semantic Tokens (Intent Layer): Defines the meaning or purpose of a value. Used by human and agentic coders. -
Component Tokens (Scope Layer): Specific overrides for single-purpose components (e.g.,button.primary.bg).
- Dominant language
- TypeScript
- Stars
- 13
- Forks
- 22
- Avg merge
- 19h 1m
- Merged PRs (30d)
- 10
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from IntersectMBO/developer-experience
-
documentation good first issue
Difficulty 3/5 1-2 days Newbie friendliness 70/100
IntersectMBO/developer-experience#302 ·
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 58/100
IntersectMBO/developer-experience#301 ·
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 72/100
IntersectMBO/developer-experience#298 ·
Maintainers usually reply within 1 day
-
documentation enhancement good first issue Medium Priority stale
Difficulty 3/5 1-2 days Newbie friendliness 70/100
IntersectMBO/developer-experience#265 · 1 comment ·
Maintainers usually reply within 1 day
-
documentation enhancement High Priority stale
Difficulty 3/5 1-2 days Newbie friendliness 68/100
IntersectMBO/developer-experience#264 · 1 comment ·
Maintainers usually reply within 1 day
All issues in IntersectMBO/developer-experience
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
clawsweeper:needs-maintainer-review clawsweeper:needs-product-decision clawsweeper:no-new-fix-pr impact:session-state issue-rating: 🌊 off-meta tidepool P2
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
openclaw/openclaw#165245 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
-
agent-canvas bug priority:low ready-for-dev
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
🐛 bug
Difficulty 2/5 1-3 hours Newbie friendliness 61/100
spicetify/marketplace#1262 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 Half a day Newbie friendliness 68/100
Maintainers usually reply within 1 day