skills.rest
christhz666
christhz666COMMUNITY
Explore all skills by this author →
GitHub

design-md

Analyze project screens, HTML code, and design metadata to generate a DESIGN.md file.

Updated Feb 26, 2026
Search Tags:#design system#color palette#design analysis#Stitch#DESIGN.md
One-click install
npx skills add https://github.com/christhz666/centro-diagnostico-v11 --skill design-md-christhz666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/christhz666/centro-diagnostico-v11/tree/main/.agents/skills/design-md
Command: npx skills add https://github.com/christhz666/centro-diagnostico-v11 --skill design-md-christhz666

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of analyzing a project's design system and generating a comprehensive DESIGN.md file, saving time and ensuring consistency in documentation.

Core Features & Use Cases

  • Design Analysis: Analyze project screens, HTML code, and design metadata.
  • Color Palette & Roles: Map and describe the color palette and its functional roles.
  • Typography & Component Stylings: Document typography rules and component styles.
  • Layout Principles: Describe layout principles and whitespace strategies.
  • Use Case: Generate a DESIGN.md file for a furniture collection project, documenting its design system and providing a reference for future development.

Quick Start

Use the design-md skill to analyze the design system of the Furniture Collections List project and generate a DESIGN.md file.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I generate a DESIGN.md file for my design system?▼

To generate a DESIGN.md file, analyze project screens, HTML code, and design metadata using this skill. It documents your design system by mapping color palettes, typography rules, and layout principles into a comprehensive markdown reference.

How does design analysis work for extracting color palettes and typography rules?▼

Design analysis works by reading project screens and HTML code to identify and map functional color roles and typography rules. It processes design metadata to document component styles and whitespace strategies automatically.

Do I need a Stitch project to document my design system?▼

Yes, you need a Stitch project with at least one designed screen and access to the Stitch MCP Server. The skill analyzes the screens and HTML code from your Stitch project to generate the design system documentation.

Can I use this to document component styles and layout principles for an existing project?▼

Yes, you can document component styles and layout principles for an existing project. The skill analyzes your current project screens and design metadata to describe layout principles, whitespace strategies, and typography rules.

What's the best way to automate design system documentation for web projects?▼

The best way to automate design system documentation is by analyzing project screens and HTML code to output a comprehensive DESIGN.md file. This ensures consistency in documenting color palettes, typography, and component stylings without manual effort.

Related Skills

Explore More Design & Creative Skills→
npc-chrisnpc-chris
1

design-md

Analyze Stitch project screens and metadata to generate a semantic DESIGN.md file.

Community
Advanced
hyperfinity-techhyperfinity-tech

hyper-design

Enforce Hyperfinity brand guidelines for AI-generated visual assets and UI components.

Official
Basic
ceslepceslep

design-md

Convert Stitch project design assets into a structured DESIGN.md file.

Community
Advanced
AutomatticAutomattic
31

design-foundations

Extracts design foundations from site HTML/CSS for WordPress theme generation.

Official
Advanced