Aesthetic
Generate a structured design-guidelines document—style, palette, type, and layout—before UI implementation.
Overview
Aesthetic is an agent skill most often used in Build (also Validate scope, Launch distribution) that produces a structured design-guidelines document for color, type, and layout.
Install
npx skills add https://github.com/mrgoonie/claudekit-skills --skill aestheticWhat is this skill?
- Scaffold for design style direction (minimalism, glassmorphism, neo-brutalism, and related labels)
- Primary, accent, and neutral color slots with usage notes and color-psychology section
- Typography system with font roles, H1–H3/body/small scale, and readability guidelines
- Layout section with grid columns, gutter, margin, and max-width placeholders
Adoption & trust: 532 installs on skills.sh; 2.1k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are about to build UI but lack a written visual system, so agents and you drift across random colors, fonts, and spacing.
Who is it for?
Solo founders and indie devs who want a lightweight design brief before agent-assisted UI or landing-page builds.
Skip if: Teams with an existing Figma design system and token pipeline where duplicating guidelines would be redundant.
When should I use this skill?
Use when defining or documenting visual design direction for a named project before UI implementation.
What do I get? / Deliverables
You get a filled-in Design Guidelines doc that anchors style, palette, typography, and grid rules for consistent frontend work.
- Design Guidelines markdown with style, colors, typography, and layout sections
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build frontend because the artifact directly feeds screens, components, and visual consistency during implementation. The template encodes color systems, typography hierarchy, grid rules, and layout principles that engineers and agents apply when building interfaces.
Where it fits
Lock a minimalism vs neo-brutalism direction and palette before approving a clickable prototype.
Hand agents H1–body type scale and grid gutters while generating React or Tailwind screens.
Reuse the same accent and surface colors on a launch landing page and changelog hero.
Keep blog and in-app marketing visuals aligned with documented neutral and accent roles.
How it compares
Use this template skill instead of unstructured chat mood-boarding when you need repeatable design specs for agents.
Common Questions / FAQ
Who is aesthetic for?
Builders using Claude Code or similar agents who need a clear written design spec before implementing SaaS, marketing, or mobile-facing UI.
When should I use aesthetic?
Use it in Validate when scoping a prototype’s look-and-feel, in Build before frontend implementation, or in Launch when refreshing distribution pages for consistent branding.
Is aesthetic safe to install?
It is documentation scaffolding with no bundled network or shell requirements; still review the Security Audits panel on this Prism page before trusting any third-party skill repo.
SKILL.md
READMESKILL.md - Aesthetic
# Design Guidelines: [Project Name] _Generated: [Date]_ ## Design Style [Specify: Minimalism, Glassmorphism, Neo-brutalism, Modern, Memphis, Flat Design, etc.] ## Color Palette ### Primary Colors - **Primary**: `#000000` - [Description/Usage] - **Secondary**: `#000000` - [Description/Usage] ### Accent Colors - **Accent**: `#000000` - [Description/Usage] - **Success**: `#000000` - [Description/Usage] - **Warning**: `#000000` - [Description/Usage] - **Error**: `#000000` - [Description/Usage] ### Neutral Colors - **Background**: `#000000` - [Description/Usage] - **Surface**: `#000000` - [Description/Usage] - **Border**: `#000000` - [Description/Usage] ### Color Psychology [Explain mood and emotions evoked by color choices] ## Typography System ### Font Families - **Primary Font**: [Font Name] - Body text, paragraphs - **Secondary Font**: [Font Name] - Headings, emphasis - **Monospace Font**: [Font Name] - Code, technical content ### Font Hierarchy - **H1**: [Size]px / [Weight] / [Line Height] - [Usage] - **H2**: [Size]px / [Weight] / [Line Height] - [Usage] - **H3**: [Size]px / [Weight] / [Line Height] - [Usage] - **Body**: [Size]px / [Weight] / [Line Height] - [Usage] - **Small**: [Size]px / [Weight] / [Line Height] - [Usage] ### Typography Guidelines - Line length: [Character count] characters max - Paragraph spacing: [Value] - Letter spacing: [Value] ## Layout Principles ### Grid System - Columns: [Number] - Gutter: [Size]px - Margin: [Size]px - Max width: [Size]px ### Spacing Scale - xs: [Size]px - sm: [Size]px - md: [Size]px - lg: [Size]px - xl: [Size]px - 2xl: [Size]px ### Responsive Breakpoints - Mobile: [Width]px - Tablet: [Width]px - Desktop: [Width]px - Wide: [Width]px ## Component Styling ### Buttons - **Primary**: [Description of style] - **Secondary**: [Description of style] - **Ghost**: [Description of style] - **Sizes**: [List sizes] - **States**: Default, Hover, Active, Disabled ### Cards - Border radius: [Value] - Shadow: [Value] - Padding: [Value] - Background: [Color] ### Forms - Input height: [Value] - Border radius: [Value] - Focus state: [Description] - Error state: [Description] ### Navigation - [Description of nav patterns] ## Visual Hierarchy ### Emphasis Techniques - [List how to draw attention: size, color, placement, etc.] ### Content Flow - [Describe reading patterns: F-pattern, Z-pattern, etc.] ## Micro-Interactions ### Animation Timing - Fast: 150ms - [Usage] - Normal: 250ms - [Usage] - Slow: 350ms - [Usage] ### Easing Curves - Ease-out: [Usage] - Ease-in: [Usage] - Spring: [Usage] ### Interactive States - Hover: [Description] - Active: [Description] - Focus: [Description] - Loading: [Description] ## Accessibility ### Contrast Ratios - Text: [Ratio] (WCAG AA: 4.5:1 minimum) - Large text: [Ratio] (WCAG AA: 3:1 minimum) - UI elements: [Ratio] ### Focus Indicators - [Description of focus styles] ### Touch Targets - Minimum size: 44x44px ## Design Highlights ### What Works Well - [List successful design decisions] ### Unique Elements - [List distinctive design features] ### Brand Alignment - [Explain how design supports brand identity] ## Implementation Notes ### Technologies - [List frameworks, libraries, tools used] ### Performance Considerations - [List optimization strategies] ### Browser Support - [List supported browsers/versions] ## Resources ### Design Files - Figma: [Link] - Assets: [Link] ### Related Documentation - [Link to design-story.md] - [Link to component library] # Design Story: [Project Name] _Generated: [Date]_ ## Project Context ### Purpose [What problem does this design solve?] ### Target Audience [Who is this design for?] ### Key Objectives 1. [Objective 1] 2. [Objective 2] 3. [Objective 3] ## Design Narrative ### Core Message [What story does this design tell?] ### Emotional Journey [What should users feel as they interact?] ### Visual Metaphor [What metaphor or theme unifies the design?] ## User Journey ### Entry Point **Fi