360 Secure SkillHub
360 安全技能中心

Design Systems

核心功能是分6个阶段（策略原则、设计Tokens、组件API、无障碍内容、文档工具、治理落地）提供设计系统全流程指导，支持React/Vue等框架及Figma工具。典型场景：多应用视觉差异大、组件库搭建/重启、Figma与生产代码脱节。输出含共识原则、语义化Tokens、可组合组件、合规文档及治理规则，兼顾UI一致性与创新空间。

mikeclaw007
mikeclaw007
热度 50.58
最近更新 2026-05-11 17:37:15
分类：开发依赖：纯提示词应用场景：UI 原型 / API 集成 / 模板

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add design-systems
Metadata
name
design-systems
description
Deep design systems workflow—tokens, components, accessibility, documentation, governance, and adoption. Use when scaling UI consistency across teams or evolving a component library (Figma + code parity).

Design Systems (Deep Workflow)

A design system is shared UI infrastructure: tokens, components, patterns, and governance so products feel cohesive without freezing innovation.

When to Offer This Workflow

Trigger conditions:

  • Multiple apps diverging visually; mounting accessibility debt
  • Launching or rebooting a component library; token refresh
  • Figma and production code drifting apart

Initial offer:

Use six stages: (1) strategy & principles, (2) design tokens, (3) components & API, (4) accessibility & content, (5) docs & tooling, (6) governance & adoption). Confirm framework (React/Vue/Svelte) and design tooling.

Stage 1: Strategy & Principles

Goal: Why the system exists (speed, a11y, brand); explicit non-goals (not every pixel must be centralized).

Exit condition: One-page principles: density, tone, motion philosophy.

Stage 2: Design Tokens

Goal: Semantic color, type, space, radius, motion—names like surface.default instead of raw hex everywhere.

Practices

  • Plan light/dark and density themes early

Stage 3: Components & API

Goal: Composable primitives vs bloated “kitchen sink” widgets; stable props API with semver discipline.

Practices

  • Prefer composition / slots over prop explosion

Stage 4: Accessibility & Content

Goal: WCAG baseline per component: focus rings, labels, error patterns, live regions where needed.

Stage 5: Docs & Tooling

Goal: Storybook or equivalent; usage guidelines; code snippets; do/don’t examples.

Stage 6: Governance & Adoption

Goal: Contribution guide; deprecation policy; champions or office hours per product line.

Final Review Checklist

  • Strategy and principles agreed
  • Token layer semantic and themeable
  • Component APIs stable and composable
  • Accessibility baseline per component
  • Documentation and live examples
  • Contribution and deprecation governance

Tips for Effective Guidance

  • Figma ↔ code parity needs owners and a sync cadence.
  • Do not ship a component without keyboard and screen-reader checks.

Handling Deviations

  • Small teams: start with tokens + a few primitives—defer full catalog.