Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

The component & design-token baseline for human and agentic developers (spacing, typography, theme, etc)

Đang mở
  • Có gì không ổn?
#300 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@IanoNjuguna đang làm issue này rồi.

Từ ngày 15/9/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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).

Ngôn ngữ chính
TypeScript
Star
13
Fork
22
Merge trung bình
19 giờ 1 phút
Pull request đã merge (30 ngày)
10

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của IntersectMBO/developer-experience

Tất cả issue của IntersectMBO/developer-experience

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.