skills.rest
zircote
zircoteCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

aesthetic

Guide UI/UX design with a four-stage workflow and documentation templates.

3|Updated Jan 17, 2026
Search Tags:#documentation#storytelling#aesthetic#ui-ux#design-principles#design-systems#inspiration-analysis
One-click install
npx skills add https://github.com/zircote/agents --skill aesthetic-zircote
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/zircote/agents/tree/main/skills/aesthetic
Command: npx skills add https://github.com/zircote/agents --skill aesthetic-zircote

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Designing interfaces that feel polished and cohesive is time-consuming without a structured design system and clear guidance. This Skill provides a principled framework to craft aesthetically pleasing UI by combining a four-stage workflow, inspiration capture, and practical documentation templates.

Core Features & Use Cases

  • Four-Stage Aesthetic Framework: BEAUTIFUL, RIGHT, SATISFYING, and PEAK workflows to guide design decisions from analysis to storytelling.
  • Inspiration Capture & Analysis: capture visuals from Dribbble/Mobbin/Behance, analyze with AI-multimodal, and document findings in a design guidelines document.
  • Design Documentation & Templates: generate and maintain design guidelines and storytelling briefs using provided templates stored in assets.

Quick Start

Prompt your AI to draft a design guidelines document for a given project using the templates in assets.

Frequently Asked Questions about aesthetic

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

FAQPage Schema
How do I create a structured design system for UI aesthetics?▼

A structured design system for UI aesthetics uses a four-stage workflow to guide design decisions from analysis to storytelling, generating practical documentation templates to maintain cohesive interface principles.

What is the best way to capture and analyze UI inspiration from Dribbble or Behance?▼

Capturing and analyzing UI inspiration from Dribbble or Behance involves gathering visuals, analyzing images using multimodal AI, and documenting findings into a comprehensive design guidelines document.

How do I generate design guidelines and storytelling briefs for a project?▼

Generating design guidelines and storytelling briefs involves instructing your AI to draft documents using provided asset templates, combining inspiration analysis with a structured aesthetic workflow.

Can I use multimodal AI to analyze interface design images?▼

Yes, you can use multimodal AI to analyze interface design images by processing captured inspiration visuals and extracting aesthetic principles to inform your UI design guidelines.

Does this aesthetic workflow integrate with chrome-devtools and media-processing?▼

Yes, the aesthetic workflow requires integration with chrome-devtools and media-processing to capture visuals, analyze design elements, and document findings within your UI design system.

Related Skills

Explore More Design & Creative Skills→
lv7devlv7dev

aesthetic

Optimize UI aesthetics and design systems for digital products.

Community
Basic
maslennikov-igmaslennikov-ig
2

ui-design-system

Generate design tokens, component documentation, and export-ready assets for design systems.

Community
Intermediate
hotriluanhotriluan
3

aesthetic

Create aesthetic UI/UX interfaces using design principles and workflows.

Community
Basic
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced