← 返回 Skills 市场
mikeclaw007

Design Systems

作者 mikeclaw007 · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ 安全检测通过
190
总下载
0
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install design-systems
功能描述
Deep design systems workflow—tokens, components, accessibility, documentation, governance, and adoption. Use when scaling UI consistency across teams or evol...
使用说明 (SKILL.md)

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.
安全使用建议
This skill appears to be a safe, self-contained workflow for design systems. Before installing or enabling it for autonomous agents, confirm the source/owner (no homepage is listed) and avoid granting the agent extra repo, file, or credential access tied to your design assets or codebase. If future versions add installs, env vars, or commands, re-evaluate for coherence and sensitive access. If you plan to let the agent run this autonomously, limit the agent's permissions so it cannot read private repos or exfiltrate data.
功能分析
Type: OpenClaw Skill Name: design-systems Version: 1.0.0 The skill bundle contains high-level architectural guidance and workflow instructions for design systems. It lacks any executable code, network calls, or instructions that could lead to unauthorized actions or data exfiltration. The content in SKILL.md and _meta.json is entirely consistent with its stated purpose.
能力评估
✓ Purpose & Capability
Name and description (design systems workflow) match the SKILL.md content: six-stage workflow, checklists, and guidance. There are no extraneous requirements (no binaries, env vars, or installs) that don't belong to the stated purpose.
✓ Instruction Scope
SKILL.md contains high-level procedural guidance and checklists only. It does not instruct the agent to run shell commands, read files, access environment variables, or transmit data to external endpoints.
✓ Install Mechanism
No install spec and no code files — nothing will be written to disk or downloaded. This is the lowest-risk install profile.
✓ Credentials
Requires no environment variables or credentials. There are no declared config paths or secrets requested, which is proportionate for a documentation/workflow skill.
✓ Persistence & Privilege
always is false and the skill is user-invocable; it does not request permanent presence or elevated privileges. The default ability for the agent to invoke the skill autonomously is normal and not a concern here given the lack of sensitive operations.
如何使用
  1. 确保已安装 OpenClaw（本地或 Docker 部署）
  2. 在对话框中输入安装命令：/install design-systems
  3. 安装完成后，直接呼叫该 Skill 的名称或使用 /design-systems 触发
  4. 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.0.0
- Initial release of "design-systems" skill, providing a comprehensive design systems workflow. - Covers tokens, components, accessibility, documentation, governance, and adoption in six structured stages. - Helps teams achieve UI consistency, maintain Figma-code parity, and handle multi-app divergence. - Includes actionable checklists, best practices, and triggers for adopting or scaling a design system. - Offers guidance on starting small for teams with limited resources.
元数据
Slug design-systems
版本 1.0.0
许可证 MIT-0
累计安装 0
当前安装数 0
历史版本数 1
常见问题

Design Systems 是什么？

Deep design systems workflow—tokens, components, accessibility, documentation, governance, and adoption. Use when scaling UI consistency across teams or evol... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 190 次。

如何安装 Design Systems？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install design-systems」即可一键安装，无需额外配置。

Design Systems 是免费的吗？

是的，Design Systems 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Design Systems 支持哪些平台？

Design Systems 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Design Systems？

由 mikeclaw007（@mikeclaw007）开发并维护，当前版本 v1.0.0。

推荐 Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 留言讨论