ui-ux-reference

Extract color palettes, typography, layout, and motion from a website URL.

Updated Jul 29, 2026

Search Tags:#ux design #ui design #website analysis #design reference #design capture

Ready to run

npx skills add https://github.com/2lab-ai/soma-work --skill ui-ux-reference

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-ux-reference
Source: https://github.com/2lab-ai/soma-work/tree/main/src/local/skills/ui-ux-reference
Command: npx skills add https://github.com/2lab-ai/soma-work --skill ui-ux-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of manually capturing and documenting a website's design language, allowing you to quickly reference design elements without extensive research.

Core Features & Use Cases

Automated Design Capture: Extracts color palettes, typography, layout, motion, imagery, and more from any website URL.
Named References: Stores captured design references in a structured format for easy access and application.
Use Case: If you are designing a new interface and need to reference the design language of a competitor or a favorite website, this skill can help you capture and apply those design elements with minimal effort.

Quick Start

Capture the design of "https://example.com" and name it "example-site".

Frequently Asked Questions about ui-ux-reference

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

FAQPage Schema

How do I capture a website's design language for UI/UX reference?▼

You can capture website design language by providing a URL to automatically extract color palettes, typography, layout, and motion elements, storing them in a structured format for UI/UX reference.

Can I extract typography and color palettes from any website URL?▼

Yes, automated design capture extracts color palettes, typography, layout, motion, and imagery from any accessible website URL to document its specific design language.

What is the best way to document a competitor's UI design for my own development workflow?▼

The best way to document competitor UI design is using automated extraction to capture and store the website's design elements in a named, structured reference for your development workflow.

Does capturing website design elements require manual inspection of the code?▼

No, capturing website design elements does not require manual code inspection; the skill parses the design language automatically from the URL to minimize research effort.

How do I store and name captured design references for later application?▼

You can store captured design references by naming the extracted design language profile during capture, keeping the UI/UX elements organized in a structured format for easy access.

What do I need to parse website design elements like layout and motion?▼

To parse website design elements like layout and motion, you need website access and design parsing tools to automatically extract the visual language into a structured reference.