skills.rest
alexiolan
alexiolanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

aesthetic-direction

Generate a project aesthetic-direction document at .claude/aesthetic-direction.md.

17|Updated Mar 30, 2026
Search Tags:#ui#documentation#ux#design-system#aesthetic-direction#design-ownership
One-click install
npx skills add https://github.com/alexiolan/craft-skills --skill aesthetic-direction
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: aesthetic-direction
Source: https://github.com/alexiolan/craft-skills/tree/main/skills/aesthetic-direction
Command: npx skills add https://github.com/alexiolan/craft-skills --skill aesthetic-direction

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate a one-time aesthetic-direction document that codifies the project's visual language at .claude/aesthetic-direction.md. This document acts as a single source of truth for downstream UI work (ux-brief and design-review) and ensures consistency across the design system.

Core Features & Use Cases

  • Generates a project-wide aesthetic-direction contract detailing the current visual vocabulary (tokens, tones, and design principles) for cross-team alignment.
  • Guides UI work by providing a reference document that downstream skills can read, update, and validate against during design reviews and implementation planning.
  • Works gracefully with or without the frontend-design skill, producing a stable contract file at the designated path.

Quick Start

Invoke the aesthetic-direction skill to generate the project’s aesthetic-direction contract at .claude/aesthetic-direction.md when UI work is planned.

Frequently Asked Questions about aesthetic-direction

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

FAQPage Schema
How do I codify a project's visual language for UI consistency?▼

An aesthetic-direction document codifies your project's visual language by capturing design tokens, tones, and principles into a single reference contract at `.claude/aesthetic-direction.md` for cross-team alignment.

When do I need to generate a design system contract for my UI workflow?▼

You generate a design system contract when UI components are planned, ensuring downstream UI work aligns with existing themes and tokens before implementation begins.

Can I use aesthetic-direction without a frontend-design dependency?▼

Yes, the skill works gracefully with or without the frontend-design skill, evaluating project dependencies and producing a stable contract file without blocking the design workflow.

What is the best way to document design tokens and principles for cross-team alignment?▼

The best way is generating a one-time aesthetic-direction document that reads project assets and writes a structured, reference-ready file detailing the current visual vocabulary for cross-team alignment.

How do downstream design reviews validate against my project's visual vocabulary?▼

Downstream design reviews read the aesthetic-direction contract to validate UI work against the project's existing tokens, themes, and design vocabulary documented in the reference file.

Does generating an aesthetic-direction contract block my active design workflow?▼

No, the process reads project assets, evaluates dependencies, and writes the structured document without blocking the design workflow, ensuring a stable contract file is produced seamlessly.

Related Skills

Explore More Design & Creative Skills→
rattamnoonrattamnoon

design-md

Extract design tokens from a Stitch project and generate a DESIGN.md.

Community
Advanced
alexiolanalexiolan
17

design-review

Compare rendered UI screenshots against aesthetic-direction and ux-brief criteria.

Community
Advanced
EverettFieldEverettField
2

ui-design

Define frontend design specifications with color palettes, typography, and layout strategies.

Community
Advanced
eugenelimeugenelim
15

aesthetic-direction

Convert vague visual mood into ranked aesthetic goals and a direction document.

Community
Advanced