skills.rest
rachel353
rachel353COMMUNITY
Explore all skills by this author →
GitHub

design-guide

Extract design languages from live websites into markdown guides and JSON data.

Updated Apr 7, 2026
Search Tags:#typography#design#responsive#tokens#design-system#website-analysis#design-guide
One-click install
npx skills add https://github.com/rachel353/fullty-plan --skill design-guide-rachel353
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/rachel353/fullty-plan/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/rachel353/fullty-plan --skill design-guide-rachel353

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracts a comprehensive design language from live websites to produce complete design guides and structured data for design teams.

Core Features & Use Cases

  • Analyze complete design systems including colors, typography, layouts, interactions, and accessibility.
  • Produce design guides and data assets (design-guide.md, design_data.json, extracted.html/css, screenshots) for documentation and recreation.
  • Use across design audits, design system derivation, and pixel-perfect recreation projects.

Quick Start

Install dependencies and run the extractor on a target URL to generate a full design guide and data in an output directory.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I extract a complete design system from a live website?▼

Yes, you can generate design tokens and structured JSON data from a URL. The tool outputs structured data including tokens, typography, layout, interactions, and accessibility information in JSON format for documentation and recreation.

How do I perform a design audit for an existing website?▼

To recreate pixel-perfect web pages, use the extracted design language data including tokens, typography, and layout details. The tool provides markdown guides, JSON data, and extracted HTML/CSS assets to ensure accurate recreation across multiple pages and states.

What do I need to start extracting design guides from websites?▼

You need a live web URL input to start extracting design guides. Install the necessary dependencies and run the extractor on the target URL to generate the full design guide and data outputs in a specified directory.

Does the extracted design guide include accessibility data?▼

The tool extracts a comprehensive design language including colors, typography, layouts, interactions, and accessibility. It outputs complete design guides, structured JSON data, screenshots, and extracted assets for documentation and recreation.

Related Skills

Explore More Design & Creative Skills→
Yezez9Yezez9

parallel-web

Search the web, extract URL content, and generate research reports via Parallel Web Systems APIs.

Community
Intermediate
imehrimehr

shadcn-replication

Convert design tokens and DOM metadata into shadcn/Tailwind TSX components.

Community
Intermediate
bienhoangbienhoang
5

design-clone

Clone website designs via multi-viewport screenshots and HTML/CSS extraction.

Community
Advanced
tuantiensiutuantiensiu
1

visual-analysis

Extract colors, typography, and layout data from images and UI mockups.

Community
Intermediate