Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。
Install Design System Architecture
$ npx skills add devcodex-labs/devcodex --skill design-system-architecture -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install devcodex-labs/devcodex design-system-architecture --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .claude/skills && cp -r skills-src/content/skills/design-system-architecture .claude/skills/design-system-architecture && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-system-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architecture into .claude/skills/design-system-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-architecture", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architectureType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add devcodex-labs/devcodex --skill design-system-architecture -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install devcodex-labs/devcodex design-system-architecture --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .agents/skills && cp -r skills-src/content/skills/design-system-architecture .agents/skills/design-system-architecture && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-system-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architecture into .agents/skills/design-system-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-architecture", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill design-system-architecture -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install devcodex-labs/devcodex design-system-architecture --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/content/skills/design-system-architecture .cursor/skills/design-system-architecture && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-system-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architecture into .cursor/skills/design-system-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-architecture", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/devcodex-labs/devcodex.git --path content/skills/design-system-architecture--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add devcodex-labs/devcodex --skill design-system-architecture -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install devcodex-labs/devcodex design-system-architecture --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/content/skills/design-system-architecture .gemini/skills/design-system-architecture && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-system-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architecture into .gemini/skills/design-system-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-architecture", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install devcodex-labs/devcodex design-system-architectureInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add devcodex-labs/devcodex --skill design-system-architecture -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .github/skills && cp -r skills-src/content/skills/design-system-architecture .github/skills/design-system-architecture && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-system-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architecture into .github/skills/design-system-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-architecture", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill design-system-architecture -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install devcodex-labs/devcodex design-system-architecture --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/content/skills/design-system-architecture .opencode/skills/design-system-architecture && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-system-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/design-system-architecture into .opencode/skills/design-system-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-architecture", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-system-architecture- GitHub stars
- 439
- Token cost
- ~514 tokens
- SKILL.md length
- 101 words
- Files
- 2
- Skills in repo
- 70
- Repo updated
- First seen
- Licence
- AGPL-3.0
At a glance
设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。
- Works in 5 steps: 识别设计源：Figma、现有页面、组件库、品牌规范、代码 token。 → 建立 token 和主题矩阵：语义、状态、暗色/亮色、响应式。 → 建立组件变体模型：状态、尺寸、密度、错误、加载、交互。 → …
- Tasks that involve Design systems
- SKILL.md covers 定位, 触发条件, 核心门禁 and 执行步骤, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design System Architecture is an agent skill from devcodex-labs/devcodex. 设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。
Its SKILL.md is about 510 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `intent.json`).
It sits in Frontend & Design, covering Design systems. It works with Figma. The repository describes itself as: Intent-driven AI coding workflow runtime for consistent context, skills, approvals, validation, and handoffs across six AI coding hosts. The licence is AGPL-3.0.
When your agent uses it
- Tasks that involve Design systems
Example prompts
- “/design-system-architecture”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 识别设计源：Figma、现有页面、组件库、品牌规范、代码 token。
- 建立 token 和主题矩阵：语义、状态、暗色/亮色、响应式。
- 建立组件变体模型：状态、尺寸、密度、错误、加载、交互。
- 评估可访问性、国际化和生产资产预算。
- 把设计系统变更同步到文档、组件示例、测试或视觉证据。
What it can do on your machine
Read from SKILL.md and the folder at commit 1dd4525. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design System Architecture loads about 514 tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 101 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from devcodex-labs/devcodex at commit 1dd4525, republished under its AGPL-3.0 licence (© devcodex-labs). 101 words, ~514 tokens.
Download SKILL.mdSave it as
.claude/skills/design-system-architecture/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- design-system-architecture
- description
- 设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。
Design System Architecture Skill
定位
本 Skill 负责设计系统 Owner 视角。它不替代单页 UI 实现，而是把 token、主题、组件变体、设计源和治理规则变成长期可维护的系统契约。
触发条件
| 场景 | 是否触发 |
|---|---|
| 设计系统、主题、Token、组件库、组件变体、Figma/代码同步、品牌视觉 | 必须 |
| 任务涉及多页面 UI 一致性、样式主题、可访问性、国际化或设计资产进入生产 | 必须 |
| 前端方案需要定义复用组件或视觉规范 | 必须 |
| 单次页面文案微调且不影响组件/主题 | N/A + skipReason |
核心门禁
| Gate | 要求 | 证据 |
|---|---|---|
DesignSystemArchitectureGate | Token、组件变体、主题、一致性、设计源和治理必须成矩阵 | designTokens、componentVariantModel |
DesignTokenGate | 颜色、字体、间距、圆角、阴影和语义 token 必须有来源 | designTokens |
ComponentVariantGate | 组件状态、尺寸、密度、禁用、错误、加载必须定义 | componentVariantModel |
ThemeConsistencyGate | 主题与品牌视觉不能一页一套 | themeConsistency |
FigmaCodeSyncGate | 设计源、代码实现、资产预算和验收入口必须可追踪 | figmaCodeSync |
执行步骤
- 识别设计源：Figma、现有页面、组件库、品牌规范、代码 token。
- 建立 token 和主题矩阵：语义、状态、暗色/亮色、响应式。
- 建立组件变体模型：状态、尺寸、密度、错误、加载、交互。
- 评估可访问性、国际化和生产资产预算。
- 把设计系统变更同步到文档、组件示例、测试或视觉证据。
输出字段
## DesignSystemArchitectureGate
| 字段 | 内容 |
|------|------|
| designTokens | 颜色、字体、间距、圆角、语义 token |
| componentVariantModel | 组件变体、状态、尺寸、密度 |
| themeConsistency | 主题、品牌、页面一致性 |
| accessibilityI18nBoundary | 无障碍、键盘、屏幕阅读器、国际化边界 |
| figmaCodeSync | Figma/代码/资产/验收同步 |
| adoptionGovernance | 使用规范、迁移、弃用、治理 |
| evidenceMatrix | 判断 -> Figma / code / screenshot / Storybook / docs / tests |反模式
| 反模式 | 修正 |
|---|---|
| 每个页面手写一套颜色和间距 | 抽象 designTokens 和主题规则 |
| 组件只有默认态 | 补 variant/state/error/loading/disabled |
| 只看 Figma 静态图 | 验证代码实现、响应式、状态和资产预算 |
| 设计系统文档只给维护者看 | 同步用户/开发者可理解的使用示例 |
与其他 Skill 的关系
frontend-architecture：设计系统落地到组件边界和状态模型。ux-interaction-architecture：交互状态和任务流影响组件变体。brand-visual-quality：品牌母版谱系、主题几何 parity、微尺寸光学校正、单色母版和视觉证据由其 Owner；本 Skill 消费已验收资产并负责 token/theme/component/Figma-code adoption。命中资产生产时引用ThemeGeometryParityGate，不得在本 Skill 内复制生产门禁。figma相关 Skill：需要 Figma 写入或设计读取时按 Figma 工具链执行。
© devcodex-labs, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in content/skills/design-system-architecture of devcodex-labs/devcodex.
- SKILL.md
- intent.json
Open the folder on GitHubat commit 1dd4525
Compare with similar skills
Design System Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design System Architecture this skilldevcodex-labs/devcodex | 439 | — | ~514 | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design System Rules Generatorwarpdotdev/warp | 65k | 3 repos | ~4.6k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Code Connect Componentswarpdotdev/warp | 65k | 2 repos | ~4.2k | Automated safety check: Pass | AGPL-3.0 | |
| Cc DesignZeroZ-lab/cc-design | 827 | — | ~2.2k | Automated safety check: Notes | None |
Similar skills
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Figma Design System Rules Generator
warpdotdev/warp
Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.
Figma Code Connect Components
warpdotdev/warp
Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
Visual Style
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
More from devcodex-labs/devcodex
All 70 skills in this repoAccessibility I18n
devcodex-labs/devcodex
无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用；要求把包容性体验和本地化验证绑定到真实用户路径。
AI Agent System Architecture
devcodex-labs/devcodex
AI Agent 系统架构专家 Owner — 当任务涉及 Agent 路由、工具调用、上下文管理、记忆、状态机、权限、人机协作、可观测性、回放验证或模型辅助治理时使用；要求把 Agent 行为设计成可解释、可恢复、可审计。
API Contract Architecture
devcodex-labs/devcodex
API 契约架构专家 Owner — 当任务涉及 public API、HTTP/SDK/CLI 契约、版本兼容、错误模型、分页过滤、幂等、Schema、类型、迁移或消费者影响时使用；要求先冻结消费者契约，再设计实现与验证。
Architecture Design
devcodex-labs/devcodex
架构设计文档编排 Owner — 当用户要求架构设计、系统设计、技术架构或可指导开发、Review 与任务拆分的完整方案时使用；要求从业务流程反推节点、状态、数据、一致性、异常补偿、ADR 与实施任务。
Audit Common
devcodex-labs/devcodex
审查公共维度 G0~G5 + Profile Freshness Check — 所有 audit 子类型必先执行的基础维度层
Audit Session
devcodex-labs/devcodex
审计工作流的跨会话状态机 — 在 <audit-root/.audit-state/<session-id.json 持久化轮次/发现项/收敛状态，支持 Token 中断后精准恢复
Related
Works with
Categories
Questions about Design System Architecture
What does Design System Architecture do?
设计系统架构专家 Owner — 当任务涉及设计系统、主题、Token、组件变体、Figma/代码同步、UI 一致性、可访问性、国际化、品牌视觉或组件库治理时使用；要求把视觉规则沉淀为可复用、可验证的系统契约。. Design System Architecture is an agent skill from devcodex-labs/devcodex.
When should I use Design System Architecture?
Design System Architecture fits situations like: tasks that involve Design systems.
How do I install Design System Architecture in Claude Code?
Run `npx skills add devcodex-labs/devcodex --skill design-system-architecture -a claude-code`. Or copy the skill folder (content/skills/design-system-architecture in devcodex-labs/devcodex) into .claude/skills/design-system-architecture in your project. Claude Code loads it when a task matches its description.
How do I install Design System Architecture in Codex?
Run `npx skills add devcodex-labs/devcodex --skill design-system-architecture -a codex`. Or copy the skill folder (content/skills/design-system-architecture in devcodex-labs/devcodex) into .agents/skills/design-system-architecture in your project. Codex loads it when a task matches its description.
Can I use Design System Architecture in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add devcodex-labs/devcodex --skill design-system-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system-architecture, .gemini/skills/design-system-architecture, .github/skills/design-system-architecture and .opencode/skills/design-system-architecture in your project.
What does Design System Architecture need to run?
SKILL.md names no scripts, command-line tools or credentials: Design System Architecture is instructions for the agent only.
Does Design System Architecture access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design System Architecture safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design System Architecture use?
Design System Architecture is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design System Architecture use?
About 514 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design System Architecture?
Skills that share tags, products or a category with Design System Architecture: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design System Rules Generator (warpdotdev/warp, 65k stars) and Figma Code Connect Components (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design System Architecture?
devcodex-labs (a GitHub organization) maintains it in devcodex-labs/devcodex, which has 439 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on September 17, 2026.
Source: devcodex-labs/devcodex on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.