skills.rest
gkganesh12
gkganesh12COMMUNITY
Explore all skills by this author →
Website𝕏@gkganesh01GitHub

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
One-click install
npx skills add https://github.com/gkganesh12/gk-stack --skill gk-design-md
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
DeliciousHouseDeliciousHouse
2

website-brand-analysis

Crawl a website to generate a Markdown brand bible and design-system CSS.

Community
Advanced
kwakseongjaekwakseongjae
416

omd

Apply DESIGN.md design system rules to UI generation for AI coding agents.

Community
Advanced
doanchienthangdevdoanchienthangdev
4

design-system-context

Enforce theme-defined CSS variables for colors and border-radius in frontend components.

Community
Intermediate
syeda-hoorain-alisyeda-hoorain-ali

hsl-to-oklch-converter

Convert HSL color values to OKLCH via automated Playwright workflows.

Community
Intermediate