aesthetic

Generate UI design guidelines covering typography, color, layout, and micro-interactions.

Updated Dec 23, 2025
One-click install
npx skills add https://github.com/dige04/hieu-ccsetup --skill aesthetic-dige04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/dige04/hieu-ccsetup/tree/main/config/skills/aesthetic
Command: npx skills add https://github.com/dige04/hieu-ccsetup --skill aesthetic-dige04

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Create aesthetically beautiful interfaces by following proven design principles and systematic workflows.

Core Features & Use Cases

  • Capture inspiration from design reference sites and analyze with supporting tools to derive style, layout, typography, and color systems.
  • Develop design system guidelines (Typography, color, spacing) and documentation templates (design guidelines, design story).
  • Generate iterative design artifacts (images, mockups) and document rationales to guide development and accessibility considerations.

Quick Start

Provide a starter design guidelines document for a new project with typography, color palette, and layout foundations.

Frequently Asked Questions about aesthetic

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

FAQPage Schema
How do I create a design system for UI typography and color palettes?▼

To create a design system, you capture inspiration from reference sites to derive structured UI typography, color palettes, and layout foundations, outputting a complete design guidelines document for your project.

What is the process for documenting UI design guidelines and accessibility standards?▼

Documenting UI design guidelines involves generating structured outputs that define typography, color, spacing, and accessibility standards, accompanied by design stories that explain the rationale behind micro-interactions and layout choices.

Can I use this to generate design guidelines for both web and app projects?▼

Yes, you can generate design guidelines for both web and app projects. The workflow develops systematic typography, color, layout, and micro-interaction rules that apply across different digital interface environments.

How do I capture inspiration and derive a consistent visual style for my interface?▼

You capture inspiration by analyzing design reference sites and extracting style, layout, typography, and color systems. This process yields a structured visual foundation that ensures interface consistency and aesthetic usability.

What's the best way to structure UI design rationales for development handoff?▼

The best way to structure UI design rationales is to generate iterative design artifacts like mockups alongside design story documentation, ensuring development teams receive clear accessibility considerations and layout rationales.