skills.rest
danielctc
danielctcCOMMUNITY
Explore all skills by this author →
GitHub

aesthetic

Evaluate UI mockups and generate design guideline outlines for color, typography, spacing, and accessibility.

Updated Jan 13, 2026
Search Tags:#accessibility#aesthetic#design-principles#visual-design#design-systems#UI-design#design-documentation
One-click install
npx skills add https://github.com/danielctc/ReactSpacesMonoRepo --skill aesthetic-danielctc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/danielctc/ReactSpacesMonoRepo/tree/main/.claude/skills/aesthetic
Command: npx skills add https://github.com/danielctc/ReactSpacesMonoRepo --skill aesthetic-danielctc

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill helps teams create visually appealing and accessible interfaces by applying proven design principles.

Core Features & Use Cases

  • UI/UX design guidance: establish color palettes, typography, spacing, and accessibility considerations for consistent interfaces.
  • Design system documentation: generate guidelines and patterns for components, tokens, and interactions.
  • Inspiration analysis: assess designs from Dribbble/Mobbin/Behance and translate them into actionable guidelines.

Quick Start

Use the aesthetic skill to evaluate a provided UI mockup and generate a design guideline outline focusing on color, typography, spacing, and accessibility.

Frequently Asked Questions about aesthetic

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

FAQPage Schema
How do I apply design principles to create accessible UI guidelines?▼

To create accessible UI guidelines, you must apply proven visual design principles to evaluate color palettes, typography, and spacing. This skill analyzes your mockups and generates a design documentation outline ensuring interface consistency and accessibility compliance.

What's the best way to document a design system for consistent web and mobile interfaces?▼

Documenting a design system for consistent interfaces involves generating structured guidelines for components, design tokens, and interaction patterns. This skill translates visual design principles into actionable documentation to maintain aesthetic consistency across web and mobile projects.

Can I translate inspiration from Dribbble or Behance into actionable design rules?▼

Yes, you can analyze design inspiration from platforms like Dribbble, Behance, or Mobbin by evaluating their visual properties. This skill assesses these references and translates them into actionable design guidelines for your own UI design workflows.

Does this skill evaluate UI mockups for color, typography, and spacing consistency?▼

Yes, it evaluates provided UI mockups to establish consistent color palettes, typography scales, and spacing rules. By applying visual design principles, it generates a structured outline focusing on aesthetic appeal and accessibility considerations.

How do I ensure my UI design documentation aligns with brand guidelines?▼

Ensuring UI design documentation aligns with brand guidelines requires applying proven design principles to evaluate and iterate on visual elements. This skill guides the creation of component patterns and tokens that maintain consistency with your brand identity.

Related Skills

Explore More Design & Creative Skills→
zm2231zm2231

design-feedback

Review UI/UX designs and visual assets with structured checklists and accessibility assessments.

Community
Intermediate
timequitytimequity
6

frontend-design

Design production-grade frontend interfaces with bold aesthetic direction.

Official
Advanced
KraitsKraits

visual-design-foundations

Codify typography, spacing, color, and iconography into a cohesive design system.

Community
Advanced
ryankoleanryankolean
3

mentor-rams

Evaluate product designs against Dieter Rams's 10 Principles of Good Design.

Community
Advanced