gk-design-md

Extract visual design tokens from websites into a standardized DESIGN.md file.

1|Updated Jul 4, 2026

Search Tags:#design #branding #ui #frontend #css #tokens

Ready to run

npx skills add https://github.com/gkganesh12/gk-stack --skill gk-design-md

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gk-design-md
Source: https://github.com/gkganesh12/gk-stack/tree/main/skills-extra/gk-design-md
Command: npx skills add https://github.com/gkganesh12/gk-stack --skill gk-design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates the guesswork in UI development by capturing the visual language of any website into a structured DESIGN.md file, ensuring your AI-generated components match the target aesthetic with pixel-perfect accuracy.

Core Features & Use Cases

Catalog Fetching: Instantly download design tokens for over 55 popular products like Linear, Stripe, and Vercel.
URL Generation: Automatically extract design tokens, typography, and layout principles from any live website URL.
Use Case: When building a new dashboard, use this skill to extract the design system from a competitor's site, allowing the AI to generate UI components that adhere to the same color palette, spacing, and typography rules.

Quick Start

Trigger the design system extraction by asking the agent to generate a design system for the website at the provided URL.

Frequently Asked Questions about gk-design-md

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

FAQPage Schema

How do I extract a design system from a website URL?▼

To extract a design system from a website URL, this skill captures visual design tokens, typography, and layout principles via CSS-based extraction. It automatically generates a standardized DESIGN.md file containing semantic colors and component styling data.

Can I download pre-built design tokens for popular products like Stripe or Linear?▼

Yes, you can download pre-built design tokens for over 55 popular products like Stripe, Linear, and Vercel. This catalog-based retrieval instantly captures their visual design systems to ensure your UI generation matches the target aesthetic.

How does capturing design tokens improve AI-generated UI components?▼

Capturing design tokens improves AI-generated UI components by providing the AI with exact semantic colors, typography, spacing, and layout principles. This ensures your generated frontend code matches the target website's visual language with pixel-perfect accuracy.

What is a DESIGN.md file used for in frontend development?▼

A DESIGN.md file in frontend development serves as a standardized reference for visual design tokens and layout principles. It eliminates UI guesswork by giving the AI agent exact styling data needed to generate components that adhere to a specific brand aesthetic.

Do I need to manually inspect CSS to capture a competitor's brand styling?▼

No, you do not need to manually inspect CSS to capture brand styling. This skill automatically extracts visual design tokens and layout principles from any live website URL, outputting a structured design system file for immediate UI generation use.