design-system-architect

仓库创建 2026年5月22日最近提交 22 小时前SkillHot 收录 9 小时前

▸ 精选理由

适合前端与设计工程师构建可复用主题与组件体系。

这个 Skill 做什么

提供可扩展 UI 设计系统的架构、代币与可访问性实战指南。

提供一整套可扩展的 UI 设计系统方案：从 design tokens（颜色、间距、排版）到无头组件（Radix/Base UI）、Tailwind v4 主题和 WCAG 2.2 可访问性实践。适合要搭建或重构设计系统、制定代币架构、做好可访问性和文档化时使用。核心优势是面向生产环境的实战细节，比如 OKLCH 色彩、token 分层和可访问性落地，方便工程与设计协同。

▸ 展开 SKILL.md 英文原文

Expert guide for designing, building, and maintaining scalable UI design systems with design tokens, headless primitives (Radix/Base UI), Tailwind v4 @theme, and WCAG 2.2 accessibility in English and Indonesian.

开发编程设计系统设计代币可访问性Tailwind通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/roedyrustam/vibes-plug/main/skills/design-system-architect/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/roedyrustam/vibes-plug/main/skills/design-system-architect/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Design System Architect

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Description
Production-grade guidance for designing, building, documenting, and publishing scalable UI **Design Systems**. Covers Design Tokens architecture (OKLCH colors, spacing, typography, radii, shadows), headless accessibility primitives (**Radix UI**, **Base UI**, **React ARIA**), Tailwind CSS v4 `@theme` integration, component variance management (**CVA**), and WCAG 2.2 AAA accessibility standards.

### Trigger Conditions
- Bootstrapping or refactoring a component library or enterprise UI design system.
- Standardizing design tokens across Figma and code

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有