skills.rest
anukkrit149
anukkrit149COMMUNITY
Explore all skills by this author →
Website𝕏@anukkritGitHub

design-md

Synthesize Stitch screen HTML and design metadata into a semantic DESIGN.md.

Updated May 26, 2026
Search Tags:#design systems#design documentation#stitch#ui theming#semantic ui tokens#html css analysis#visual style synthesis
One-click install
npx skills add https://github.com/anukkrit149/anukkrit-skills --skill design-md-anukkrit149
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/anukkrit149/anukkrit-skills/tree/main/cloud/skills/design-md
Command: npx skills add https://github.com/anukkrit149/anukkrit-skills --skill design-md-anukkrit149

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of translating an existing Stitch project’s visual language into a reusable DESIGN.md so new screens stay consistent with the established design system.

Core Features & Use Cases

  • Stitch project and screen analysis: Uses the Stitch MCP server to discover the correct project and retrieve screen metadata, HTML/CSS, and screenshots.
  • Semantic design system synthesis: Converts visual and code-level signals into a designer-friendly Semantic Design System with atmosphere, palette, typography rules, component stylings, and layout principles.
  • Token translation for generation: Produces a structured DESIGN.md that Stitch can follow to generate new screens matching the same design intent and functional color roles.

Quick Start

Use the Stitch MCP server to retrieve one designed screen from your target project, then generate a DESIGN.md in the project directory that follows the provided DESIGN.md structure.

Frequently Asked Questions about design-md

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

FAQPage Schema
How do I create a design system from an existing Stitch project?▼

Yes, the Stitch design analysis extracts exact hex codes and functional color roles from existing HTML/CSS, translating them into semantic UI tokens within a DESIGN.md to maintain visual consistency across new screens.

What is the best way to document UI theming for consistent screen generation?▼

The best way to document UI theming is by generating a semantic DESIGN.md file that captures atmosphere, palette, typography rules, and layout principles, providing exact values for Stitch to follow during future screen generation.

How do I extract design tokens from Stitch HTML and CSS?▼

You can extract design tokens by retrieving screen metadata and HTML/CSS through the Stitch MCP server, which then synthesizes visual signals into a structured design system capturing colors, elevation, type, and layout geometry.

Does generating a design documentation file require an existing Stitch screen?▼

Yes, semantic design system synthesis requires at least one existing designed screen in your Stitch project to analyze its HTML, CSS, and metadata for extracting accurate visual tokens and component patterns.

Related Skills

Explore More Design & Creative Skills→
Chris-MaskeyChris-Maskey

design-md

Analyze Stitch project screens and synthesize a semantic DESIGN.md file.

Community
Advanced
caobingshengcaobingsheng
1

design-md

Analyze Stitch projects to generate DESIGN.md files documenting design systems.

Community
Advanced
chrishuffman5chrishuffman5

design-md

Generate DESIGN.md files from Stitch projects via the Stitch MCP Server.

Community
Advanced
J-StaR-Films-StudiosJ-StaR-Films-Studios
23

design-md

Generate DESIGN.md documentation from HTML/CSS design assets via Stitch MCP Server.

Official
Advanced