Communitygithub.com

plugin87/governance

管理设计系统的演进 —— 对令牌/组件进行语义化版本控制、定义贡献工作流、弃用策略及变更通知。当用户想要添加/提升/弃用一个组件或令牌、决定版本升级、建立贡献流程，或防止系统碎片化时使用。

governance 是什么？

此技能为设计系统提供治理框架，确保系统在增长过程中保持一致性。它定义了语义化版本控制（SemVer）规则，将变更分类为 major（破坏性）、minor（新增）和 patch（修复），并规定了组件的贡献工作流和弃用策略。该技能适用于 Claude Code、Cursor 等 AI 代理工具，通过读取 `workflows/governance.md` 中的规则来引导用户进行版本决策、组件生命周期管理和变更沟通。它强调新组件必须服务至少两个实际需求才能从候选晋升为核心，弃用需提供迁移映射并保留至少一个小版本周期。最终验证包括 SemVer 分类、变更日志条目、无障碍检查、令牌映射验证以及脚本通过率。

兼容平台✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

技能: 治理

在系统增长过程中保持其一致性。应用版本控制、贡献和弃用规则。

步骤

  1. 读取 workflows/governance.md（语义化版本表、贡献工作流、弃用策略、变更沟通）。
  2. 对变更进行分类：主版本（破坏性 —— 重命名/移除令牌或属性、更改组件结构/默认值）、次版本（新增 —— 新令牌/组件/变体/可选属性）、补丁版本（修复 —— 对比度/错误/文档/值在公差范围内的调整）。
  3. 对于新组件/令牌：在从产品候选晋升为核心之前，确认其满足至少两个实际重复需求。按照完整质量标准进行设计（.claude/rules/components.md → 组件质量标准）。
  4. 对于弃用：标记原因、替代项及移除版本；至少保留一个小版本周期；提供迁移映射（采用 design-systems/crosswalk.md 风格）；仅在主版本中移除。
  5. 将任何新文件连接到 CLAUDE.md（文件引用映射 + 相关表格/路由器）并添加变更日志条目。

验证（完成定义）

  • 变更具有语义化版本级别和变更日志条目。
  • 移除操作包含弃用窗口、替代项和迁移表。
  • 新规范满足 8 状态 + 无障碍 + 令牌映射标准，并且可通过路由器访问。
  • python3 scripts/validate_tokens.py 通过；如果颜色更改，则重新检查对比度。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community