design-md

Analyze UI artifacts and code to generate a structured DESIGN.md document.

2|2|Updated Apr 27, 2026
One-click install
npx skills add https://github.com/Pascapone/pibo --skill design-md-pascapone
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Pascapone/pibo/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/Pascapone/pibo --skill design-md-pascapone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires stitch*:*, and includes scripts (resource) and references (resource) components.

What problem does it solve?

The design-md skill resolves the challenge of manually documenting complex design systems by automating the analysis and synthesis process from UI artifacts and code.

Core Features & Use Cases

  • Automated Design System Extraction: Analyze existing product screens, UI code, design artifacts, and visual references.
  • Semantic Design Documentation: Synthesize the extracted information into a DESIGN.md file, detailing the design system.
  • Use Case: For a new UI project, quickly generate a DESIGN.md by analyzing existing UI assets and code.

Quick Start

Add the design-md skill to your project and run 'npx skills analyze design-md --source path/to/ui-assets'.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I automate design system documentation from UI artifacts?

Automating design system documentation extracts semantic tokens and component patterns from UI artifacts, synthesizing them into a structured DESIGN.md file for project reviews and knowledge sharing.

What's the best way to extract a design system from existing product screens?

Extracting a design system from existing product screens involves analyzing visual references and UI code, then synthesizing the extracted information into a structured Markdown document detailing the design system.

Can I generate a DESIGN.md file from UI code for a new project?

Yes, generating a DESIGN.md from UI code analyzes existing UI assets and code, quickly synthesizing the extracted design system information into structured Markdown documentation.

Do I need specific tools to parse visual and code-based assets for design documentation?

Design documentation requires tools to fetch and parse visual and code-based assets, with dependencies on stitch to automate the analysis and synthesis of UI artifacts into Markdown.

Why manually documenting complex design systems is difficult and how to resolve it?

Manually documenting complex design systems is difficult due to the tedious analysis of UI artifacts; automating this process resolves the challenge by synthesizing extracted information into a structured Markdown document.

When do I need automated documentation for design system extraction?

Automated documentation for design system extraction is needed for project documentation, design reviews, and knowledge sharing, when analyzing existing product screens, UI code, and visual references.