web-design-analyzer
CommunityExtract design systems from screenshots.
Design & Creative#UI/UX#design system#web design#color extraction#screenshot analysis#coding prompt generation#typography analysis
Authoranbeime
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill automates the tedious process of manually identifying and documenting design elements from web page screenshots, saving significant time for UI/UX designers and front-end developers.
Core Features & Use Cases
- Design System Extraction: Automatically identifies and extracts color palettes, typography, and component styles from web screenshots.
- Structured Data Output: Generates a clean JSON output detailing the extracted design system.
- AI Coding Prompt Generation: Creates ready-to-use prompts for AI coding assistants to replicate the design.
- Use Case: A designer uploads a screenshot of a competitor's landing page and uses this Skill to quickly get the color codes, font details, and button styles, which can then be used to generate a similar component with an AI coding tool.
Quick Start
Analyze the provided screenshot 'website-design.png' to extract its design system and generate a coding prompt.
Dependency Matrix
Required Modules
Pillow
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web-design-analyzer Download link: https://github.com/anbeime/skill/archive/main.zip#web-design-analyzer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.