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.