← Back to Skills Marketplace
mikeclaw007

Design Systems

by mikeclaw007 · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
190
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install design-systems
Description
Deep design systems workflow—tokens, components, accessibility, documentation, governance, and adoption. Use when scaling UI consistency across teams or evol...
README (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.
Usage Guidance
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.
Capability Analysis
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.
Capability Assessment
✓ 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.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install design-systems
  3. After installation, invoke the skill by name or use /design-systems
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
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.
Metadata
Slug design-systems
Version 1.0.0
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is Design Systems?

Deep design systems workflow—tokens, components, accessibility, documentation, governance, and adoption. Use when scaling UI consistency across teams or evol... It is an AI Agent Skill for Claude Code / OpenClaw, with 190 downloads so far.

How do I install Design Systems?

Run "/install design-systems" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Design Systems free?

Yes, Design Systems is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Design Systems support?

Design Systems is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Design Systems?

It is built and maintained by mikeclaw007 (@mikeclaw007); the current version is v1.0.0.

More 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

💬 Comments