The component & design-token baseline for human and agentic developers (spacing, typography, theme, etc)
维护者通常 1 天内回复
@IanoNjuguna 已经在做这个了。
开始于 2026年9月15日。
评估
这个 Issue 还没有评估数据。
描述
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).
- 主要语言
- TypeScript
- 星标
- 13
- 派生
- 22
- 平均合并
- 19 小时 1 分钟
- 30 天内合并 PR
- 10
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
IntersectMBO/developer-experience 的其他 Issue
-
documentation good first issue
难度 3/5 1-2 天 新手友好度 70/100
IntersectMBO/developer-experience#302 ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 58/100
IntersectMBO/developer-experience#301 ·
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 72/100
IntersectMBO/developer-experience#298 ·
维护者通常 1 天内回复
-
documentation enhancement good first issue Medium Priority stale
难度 3/5 1-2 天 新手友好度 70/100
IntersectMBO/developer-experience#265 · 1 条评论 ·
维护者通常 1 天内回复
-
documentation enhancement High Priority stale
难度 3/5 1-2 天 新手友好度 68/100
IntersectMBO/developer-experience#264 · 1 条评论 ·
维护者通常 1 天内回复
查看 IntersectMBO/developer-experience 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 65/100
openzim/mwoffliner#2933 ·
维护者通常 1 天内回复
-
Use the README category name for website links and submissions可能已有人在做 @dajiaohuang 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
birobirobiro/awesome-shadcn-ui#647 ·
维护者通常 2 天内回复
-
check:passed streams:add
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
Urigo/accounter-fullstack#4604 ·
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复