design-md

Generate DESIGN.md files by analyzing project screens and design assets.

3|Updated Jun 12, 2026
One-click install
npx skills add https://github.com/whimzyLive/nightshift-ai --skill design-md-whimzylive
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/whimzyLive/nightshift-ai/tree/main/plugins/sdlc/skills/design-md
Command: npx skills add https://github.com/whimzyLive/nightshift-ai --skill design-md-whimzylive

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires stitch-mcp-server, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of detailed design system documentation, saving designers time and ensuring consistency across projects.

Core Features & Use Cases

  • Automated Documentation: Generate DESIGN.md files by analyzing project screens and design assets.
  • Design System Analysis: Extract design tokens, color palettes, typography, and component styles.
  • Use Case: For a project like Furniture Collections List, it analyzes screens, extracts design tokens, and generates a comprehensive DESIGN.md file.

Quick Start

Analyze and document the design system for the 'Furniture Collections List' project using the design-md skill.

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 project screens?

You can automate design system documentation by analyzing project screens and design assets to extract design tokens, color palettes, typography, and component styles, generating a comprehensive DESIGN.md file automatically.

What is semantic design system analysis and when do I need it?

Semantic design system analysis extracts design tokens and component styles from project screens. You need it to ensure design consistency across projects by automating the creation of detailed design documentation.

Do I need the Stitch MCP Server to generate design documentation?

Yes, generating design documentation requires access to the Stitch MCP Server. The automation uses this server alongside semantic design principles to analyze screens and extract design system tokens.

Can I extract color palettes and typography into a Markdown file?

Yes, you can extract color palettes, typography, and component styles from project screens into a Markdown file. The process analyzes design assets and outputs a detailed DESIGN.md file.

How to document design tokens for a UI project step by step?

Document design tokens by providing project screens to the automation tool, which analyzes the assets, extracts semantic design tokens, and outputs a formatted DESIGN.md file.

Are there limitations when extracting component styles from design assets?

Extracting component styles requires an understanding of semantic design principles and proper access to the Stitch MCP Server. Without these, the automated analysis of screens and generation of design documentation may fail.