skills.rest
2lab-ai
2lab-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/2lab-ai/soma-work --skill ui-ux-reference
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
MohammedSaudAlsahliMohammedSaudAlsahli

imagegen-frontend-web

Generate horizontal images for website design sections with configurable parameters.

Community
Advanced
Shaarav4795Shaarav4795

ui-ux-pro-max

Automate UI/UX design guidance and consistency checks for web and mobile interfaces.

Community
Advanced
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
chlmmchlmm

create-user-skill

Generate instructional guides and templates for manually operated tools and workflows.

Community
Basic