skills.rest
MuduiClaw
MuduiClawCOMMUNITY
Explore all skills by this author →
Website𝕏@hxrmuduiGitHub

design-os

Generate specifications, design tokens, React components, and export packages for product design handoff.

11|3|Updated Mar 9, 2026
Search Tags:#design system#ui/ux#product design#handoff#react components#product planning
One-click install
npx skills add https://github.com/MuduiClaw/ClawKing --skill design-os
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-os
Source: https://github.com/MuduiClaw/ClawKing/tree/main/workspace/skills/design-os
Command: npx skills add https://github.com/MuduiClaw/ClawKing --skill design-os

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the entire product design process, from initial vision to developer handoff, ensuring a structured and efficient workflow.

Core Features & Use Cases

  • Structured Planning: Guides users through product vision, design tokens, app shell, and section design.
  • Automated Handoff: Generates comprehensive export packages with prompts, instructions, and component code for developers.
  • Use Case: A startup founder needs to quickly define a new app's features, visual style, and create ready-to-code components for their development team.

Quick Start

Use the design-os skill to start planning a new product.

Frequently Asked Questions about design-os

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan a product design from initial vision to developer handoff?▼

Structured product design planning guides you from initial vision to developer handoff by generating specifications, design tokens, and React components for an efficient workflow.

What is a design system and how does it generate React components for handoff?▼

A design system defines visual style and features through design tokens, which are then used to generate ready-to-code React components and comprehensive export packages for developers.

Can I define app shell and section-specific UI without prior design system setup?▼

Yes, you can define the app shell and design section-specific UI because the process facilitates structured product design planning starting directly from your initial product vision.

Does automated developer handoff generate export packages with React component code?▼

Yes, automated developer handoff generates comprehensive export packages that include prompts, instructions, and ready-to-code React component code for the development team.

What's the best way to structure product planning for a new application?▼

The best way to structure product planning involves guiding the workflow through distinct phases: product vision definition, design tokens creation, app shell design, and section-specific UI development.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

teach-impeccable

Scan project files and write design context to CLAUDE.md.

Official
Intermediate
CinderZhangCinderZhang
3

evolve

Generate a self-contained export package with prompts, code, and design assets.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
alexsandrocruzalexsandrocruz
6

brainstorming

Refine rough ideas into validated designs through structured questioning and phased workflows.

Community
Basic