skills.rest
marjan-ahmed
marjan-ahmedCOMMUNITY
Explore all skills by this author →
Website𝕏@m_marjanahmedGitHub

aesthetic

Analyze UI concepts and generate aesthetic guidelines with color, typography, and layout recommendations.

1|Updated Jul 15, 2025
Search Tags:#typography#aesthetic#ui-design#design-system#micro-interactions#color-theory#inspiration-analysis
One-click install
npx skills add https://github.com/marjan-ahmed/ustaz --skill aesthetic-marjan-ahmed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/marjan-ahmed/ustaz/tree/main/.claude/skills/aesthetic
Command: npx skills add https://github.com/marjan-ahmed/ustaz --skill aesthetic-marjan-ahmed

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Create aesthetically beautiful interfaces by applying proven design principles and systematic workflows that guide both analysis and implementation.

Core Features & Use Cases

  • Analyze inspiration sources to extract design patterns, typography, color systems, and layout heuristics.
  • Generate and iterate design images and components with ai-multimodal and media-processing tools.
  • Create comprehensive design documentation and style guides, plus design system guidance across BEAUTIFUL, RIGHT, SATISFYING, and PEAK stages.

Quick Start

Analyze a UI concept and generate a complete aesthetic guideline with color, typography, and layout recommendations.

Frequently Asked Questions about aesthetic

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

FAQPage Schema
How do I create a consistent UI design system from scratch?▼

Create a consistent UI design system by applying systematic workflows across BEAUTIFUL, RIGHT, SATISFYING, and PEAK stages, extracting typography, color theory, and layout heuristics to generate comprehensive style guides and component documentation.

How do I extract design patterns from inspiration sources for my UI?▼

Extract design patterns from inspiration sources by analyzing reference images to isolate typography, color systems, and micro-interactions, then iterate those design components using ai-multimodal and media-processing tools.

Can I use this aesthetic workflow with existing web frameworks and styling tools?▼

Yes, the aesthetic workflow integrates directly with web-frameworks, ui-styling, and chrome-devtools skills to apply frontmatter-driven guidance and asset templates directly within your existing development environment.

What is the best way to improve UI aesthetics and accessibility simultaneously?▼

Improve UI aesthetics and accessibility by following the BEAUTIFUL, RIGHT, SATISFYING, and PEAK stage workflows, which enforce color theory, typography, and micro-interaction principles to create visually stunning, accessible interfaces.

Does this design workflow require any external dependencies to function?▼

No external dependencies are required to function, though the aesthetic workflow seamlessly connects with media-processing, ai-multimodal, ui-styling, web-frameworks, and chrome-devtools skills for enhanced design iteration and implementation.

Related Skills

Explore More Design & Creative Skills→
tuantiensiutuantiensiu
1

visual-analysis

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

Community
Intermediate
coreymaypraycoreymaypray
1

inclusive-visuals

Apply WCAG-compliant accessibility checks to AI-generated visual assets.

Community
Advanced
HsnSaboorHsnSaboor

frontend-design

Design and implement production-grade frontend interfaces with design principles and UI patterns.

Community
Advanced
fishyerfishyer
1

visual-design-foundations

Implement typography, color, and spacing systems for web and UI design.

Community
Intermediate