skills.rest
Imad-Oute
Imad-OuteCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mh-cto-sdlc-design-system

Generate design systems from wireframes and UX briefs with component inventories.

2|Updated Apr 5, 2026
Search Tags:#accessibility#design system#design automation#wireframe analysis#UI component inventory
One-click install
npx skills add https://github.com/Imad-Oute/MicroHard --skill mh-cto-sdlc-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mh-cto-sdlc-design-system
Source: https://github.com/Imad-Oute/MicroHard/tree/main/src/departments/cto/sdlc/phase-3-ux-design/mh-cto-sdlc-design-system
Command: npx skills add https://github.com/Imad-Oute/MicroHard --skill mh-cto-sdlc-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of a design system from wireframes, significantly reducing the time required to establish a consistent visual language and component inventory for a product.

Core Features & Use Cases

  • Automated Design System Generation: Derives design systems from wireframes and UX briefs.
  • Component Inventory: Extracts and categorizes UI components used across wireframes.
  • Design Decisions: Synthesizes color, typography, spacing, and other design elements.
  • Accessibility Compliance: Ensures the design system meets WCAG accessibility standards.
  • Output Documentation: Generates detailed design system documentation.
  • Use Case: Ideal for designers and product managers working on digital products with no existing design foundation.

Quick Start

Run the /mh-cto-sdlc-design-system skill after completing all wireframes to establish your design system.

Frequently Asked Questions about mh-cto-sdlc-design-system

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

FAQPage Schema
How do I automate design system creation from wireframes?▼

Automating design system creation from wireframes requires analyzing completed wireframes and UX briefs to derive a comprehensive UI component inventory, extract design decisions like typography and spacing, and generate output documentation. This process establishes a consistent visual language automatically.

What is a UI component inventory and how is it derived from wireframes?▼

A UI component inventory is a categorized list of interface elements extracted by analyzing wireframes. It identifies reusable UI components across screens to ensure visual consistency, synthesizing design decisions for color, typography, and spacing to form a complete design system.

Can I adapt an existing design system or do I need to start from scratch?▼

You can adapt an existing design system or perform greenfield creation. The process evaluates current wireframes and UX briefs to either update your current visual language and component inventory or establish an entirely new design foundation from scratch.

Does automated design system generation include accessibility compliance?▼

Automated design system generation includes accessibility compliance by ensuring derived UI components and design decisions meet WCAG accessibility standards. This guarantees the resulting visual language and component inventory support accessible digital products.

What do I need to prepare before generating a design system from wireframes?▼

Before generating a design system, you must complete all wireframes and prepare UX briefs. Providing these inputs allows the analysis process to extract the UI component inventory and synthesize design decisions required to establish the visual language.

What documentation is output when creating a design system from wireframes?▼

Creating a design system from wireframes outputs detailed documentation that includes a comprehensive UI component inventory, synthesized design decisions for color and typography, and accessibility compliance guidelines for the digital product.

Related Skills

Explore More Design & Creative Skills→
felvieirafelvieira
22

asset-librarian

Inventory repository visual assets and generate a reusable catalog in docs/repo-audit/assets.md.

Community
Intermediate
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
praveenpererapraveenperera
4

tailwindplus

Catalog Tailwind Plus UI components in HTML, React, and Vue formats.

Community
Advanced
vanman2024vanman2024
10

design-system-enforcement

Enforce design-system compliance for Next.js UI components with shadcn/ui and Tailwind v4.

Community
Advanced