Design Language Extraction Skill

The purpose of this skill is to analyze an existing website, web application, mobile application, screenshots, or frontend codebase and reverse-engineer its visual identity, design language, branding, UI system, typography, color system, spacing, components, interaction patterns, imagery, and overall aesthetic.

This skill transforms an existing design into a structured, reusable design language that can be used to:

• Build new pages
• Redesign existing pages
• Maintain visual consistency
• Create new components
• Generate design specifications
• Guide developers and designers
• Create prompts for UI generation
• Evaluate whether future screens match the existing brand

Core Principle

Do not merely describe what the interface looks like. Extract the underlying design rules that explain why it looks the way it does.

This skill works independently and does not depend on another skill.