design-md

Analyzes Stitch projects to synthesize semantic design systems into DESIGN.md files.

2|Updated Jan 5, 2024

Search Tags:#design system #design tokens #ai prompting #markdown generation #stitch #ui generation

Ready to run

npx skills add https://github.com/wilfriedago/dotfiles --skill design-md-wilfriedago

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/wilfriedago/dotfiles/tree/main/agents/skills/design-md
Command: npx skills add https://github.com/wilfriedago/dotfiles --skill design-md-wilfriedago

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of DESIGN.md files, which serve as a crucial "source of truth" for AI models like Stitch to generate new screens that align with an existing design language.

Core Features & Use Cases

Semantic Design System Synthesis: Analyzes Stitch projects to extract and translate design tokens (colors, typography, spacing, etc.) into human-readable Markdown.
AI Prompting Enhancement: Generates DESIGN.md files that enable AI to create consistent and on-brand UI elements.
Use Case: After designing a new screen in Stitch, use this Skill to generate a DESIGN.md file that captures the project's unique aesthetic, ensuring future AI-generated screens perfectly match the established visual style.

Quick Start

Analyze the Stitch project and generate a DESIGN.md file for the 'Furniture Collections List' project.

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 system markdown file from a Stitch project?▼

A DESIGN.md file serves as a source of truth for AI prompting by capturing design tokens, component stylings, and layout principles in a structured, human-readable markdown format that AI models use to generate consistent UI.

How do I keep AI-generated UI screens consistent with my existing design tokens?▼

To keep AI-generated UI screens consistent with existing design tokens, synthesize a semantic design system into a DESIGN.md file, providing a structured reference that enables AI to match your established visual style and layout principles.

Can I extract color palettes and typography rules from Stitch project assets?▼

Yes, you can extract color palettes and typography rules from Stitch project assets by analyzing the project metadata, which translates semantic design tokens into human-readable markdown for AI-driven screen generation.

What is the best way to document UI component stylings for AI prompting?▼

The best way to document UI component stylings for AI prompting is to synthesize them into a DESIGN.md file, creating a structured design language reference that captures visual themes, spacing, and layout principles for AI models.

Do I need a Stitch project to synthesize design tokens into markdown?▼

Yes, you need a Stitch project because this Skill specifically analyzes Stitch project assets and metadata to extract semantic design tokens and translate them into a structured markdown design system reference.