aesthetic-guide
CommunityTurn UI aesthetics into ready-to-code guides
Design & Creative#typography#accessibility#aesthetic#design-system#color-tokens#design-research#css-values
Authorpetekp
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: aesthetic-guide Download link: https://github.com/petekp/agent-skills/archive/main.zip#aesthetic-guide Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.