skills.rest
DITEKmax
DITEKmaxCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Extracts a semantic design system from websites or screenshots into a .design/DESIGN.md file.

Updated Mar 28, 2026
Search Tags:#typography#design-system#browser-automation#design-extraction#design-token#component-styles#colour-palette
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill design-system-ditekmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill design-system-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically derives a semantic design system from an existing website or screenshot, saving time and ensuring visual consistency across pages by documenting tokens, components, and typography.

Core Features & Use Cases

  • Extract a complete DESIGN.md from live sites, local HTML, or screenshots for rapid design-system creation.
  • Analyze colours, typography, component styles, spacing, and atmosphere to generate tokens suitable for design-to-code workflows.
  • Use with the design-loop workflow to seed design iterations, ensure consistency across pages, and provide a reference for generation tasks.

Quick Start

Extract the design system from a live site, local HTML file, or screenshot and save DESIGN.md in .design/DESIGN.md.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I extract a design system from an existing website?▼

You can extract design tokens from a screenshot by analyzing its colours, typography, and component atmosphere. The skill processes the visual inputs to produce a coherent design language documented in a DESIGN.md file.

Can I extract design tokens from a screenshot?▼

You can extract design tokens from a screenshot by analyzing its colours, typography, and component atmosphere. The skill processes visual inputs to produce a coherent design language documented in a DESIGN.md file.

What is the best way to document a colour palette and typography for a design-to-code workflow?▼

The extracted DESIGN.md works directly with the design-loop workflow to seed design iterations and ensure visual consistency across pages. It provides a documented design language reference for generation tasks.

Does the extracted DESIGN.md work with the design-loop workflow?▼

The extracted DESIGN.md works directly with the design-loop workflow to seed design iterations and ensure visual consistency across pages. It provides a documented design language reference for generation tasks.

Do I need browser automation to analyze component styles and spacing from live sites?▼

Browser automation is required to analyze component styles and spacing from live sites. It inspects the HTML to derive a complete semantic design system, capturing accurate tokens directly from the rendered website.

Related Skills

Explore More Design & Creative Skills→
Clay-HHKClay-HHK
2

web-design-reviewer

Inspect websites across viewports and apply code fixes for layout and accessibility issues.

Community
Intermediate
gabelulgabelul
38

stitch-loop

Iteratively build multi-page websites with Google Stitch MCP using a baton-driven loop.

Community
Advanced
caobingshengcaobingsheng
1

design-md

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

Community
Advanced
RenyEnnosRenyEnnos
1

design-md

Generate DESIGN.md design-system documentation from Stitch project assets.

Community
Advanced