skills.rest
kettleofketchup
kettleofketchupCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

aesthetic

Generate and document UI/UX designs using a four-stage aesthetic framework.

13|Updated Apr 2, 2025
Search Tags:#aesthetic#design-principles#micro-interactions#design-systems#color-theory#UI-design
One-click install
npx skills add https://github.com/kettleofketchup/DraftForge --skill aesthetic-kettleofketchup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic
Source: https://github.com/kettleofketchup/DraftForge/tree/main/.claude/skills/aesthetic
Command: npx skills add https://github.com/kettleofketchup/DraftForge --skill aesthetic-kettleofketchup

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill helps designers and teams craft aesthetically beautiful, coherent interfaces by applying proven design principles and a structured design workflow.

Core Features & Use Cases

  • Four-Stage Framework: BEAUTIFUL, RIGHT, SATISFYING, and PEAK guide aesthetic work from analysis to storytelling.
  • Inspired & Iterative Design: Capture inspiration with chrome-devtools, analyze with ai-multimodal, and generate design images iteratively to improve aesthetics.
  • Documentation & Guidelines: Create formal design guidelines and design stories to align teams and maintain consistency.
  • Resources & Integration: Leverage references, templates, and assets to accelerate design work across tools and frameworks.

Quick Start

Use the aesthetic skill to start a design exploration: capture inspiration, analyze visuals with ai-multimodal, generate design variations, and document your guidelines.

Frequently Asked Questions about aesthetic

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

FAQPage Schema
How do I apply proven design principles to create beautiful UI?▼

To apply proven design principles for beautiful UI, use a four-stage framework—BEAUTIFUL, RIGHT, SATISFYING, and PEAK—guiding aesthetic work from visual analysis to cohesive storytelling and formal documentation.

What is the best way to capture and analyze design inspiration?▼

The best way to capture and analyze design inspiration involves using chrome-devtools to grab visual references, then processing those images with ai-multimodal to evaluate aesthetics and iteratively generate improved design variations.

How do I document a design system to maintain UI consistency?▼

Document a design system by creating formal design guidelines and design stories that align teams, leveraging provided references, templates, and assets to maintain aesthetic consistency across web and app interfaces.

Can I use this aesthetic workflow for both web and app interfaces?▼

Yes, you can use this aesthetic workflow for both web and app interfaces, as it integrates with web-framework tooling and ui-styling components to capture, analyze, generate, and document design work across platforms.

Does this design workflow support multimodal image generation?▼

Yes, the design workflow supports multimodal image generation by integrating with ai-multimodal and media-processing tools to iteratively analyze visual references and generate new design variations for your interfaces.

Related Skills

Explore More Design & Creative Skills→
zircotezircote
3

aesthetic

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

Community
Advanced
XCmiaowXCmiaow

frontend-design

Translates web UI requirements into distinctive, production-grade HTML/CSS/JS frontend code.

Community
Intermediate
lv7devlv7dev

aesthetic

Optimize UI aesthetics and design systems for digital products.

Community
Basic
Resplendent-DataResplendent-Data

angular-frontend-design

Generate Angular 19+ components with standalone components and signals.

Official
Advanced