aesthetic-guide

Generate implementation-ready CSS design systems for named UI aesthetics.

5|2|Updated Jan 20, 2026

Search Tags:#typography #accessibility #aesthetic #design-system #color-tokens #design-research #css-values

Ready to run

npx skills add https://github.com/petekp/agent-skills --skill aesthetic-guide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aesthetic-guide
Source: https://github.com/petekp/agent-skills/tree/main/skills/aesthetic-guide
Command: npx skills add https://github.com/petekp/agent-skills --skill aesthetic-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Exhaustive, implementation-ready design system guidelines for a named UI aesthetic, enabling coding agents to reproduce visuals with exact CSS values, tokens, and typography.

Core Features & Use Cases

Comprehensive CSS tokens (colors, typography, spacing, borders, shadows, motion) for a chosen aesthetic.
Paste-ready design system in Markdown/JSON/variables compatible with modern frameworks.
Use Case: A designer requests a brutalist aesthetic to be implemented identically across a React app and a mobile app.

Quick Start

Provide a complete, implementation-ready design system for a named UI aesthetic with exact CSS values, typography, spacing, and tokens.

Frequently Asked Questions about aesthetic-guide

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

FAQPage Schema

How do I generate CSS design tokens for a specific UI aesthetic?▼

To generate CSS design tokens for a UI aesthetic, you need a system that translates visual styles into concrete CSS values. This process outputs comprehensive color, typography, spacing, and motion variables for implementation-ready design systems.

What is an implementation-ready design system for UI aesthetics?▼

An implementation-ready design system for UI aesthetics is a structured set of concrete CSS values and design tokens. It includes exact specifications for typography, spacing, color systems, and motion to replicate a style precisely across codebases.

Can I get both light and dark color variants for my design system tokens?▼

Yes, generating design system tokens can deliver both light and dark variants for your color systems. This ensures the named UI aesthetic maintains proper visual consistency and accessibility across different interface themes.

How do I replicate a brutalist UI aesthetic across React and mobile codebases?▼

To replicate a brutalist UI aesthetic across React and mobile codebases, use a paste-ready design system with exact CSS values and variables. This provides the structural guidance needed to implement identical visuals across different platforms.

What format are the CSS values and design variables delivered in?▼

CSS values and design variables are delivered in paste-ready formats compatible with modern frameworks, specifically Markdown and JSON. This allows coding agents to directly apply the tokens to components without manual translation.

Does generating a design system require manual configuration of spacing and borders?▼

Generating a design system does not require manual configuration of spacing and borders, as it automatically outputs comprehensive CSS tokens. It directly calculates concrete values for borders, shadows, and spacing based on the named aesthetic.