From craft-skills
Generate or verify the project's one-time AESTHETIC_DIRECTION.md — a design-language contract used by ux-brief and design-review. Invoked automatically by architect/craft when UI work is planned and .claude/aesthetic-direction.md does not yet exist. Auto-generates without blocking; user can refine the file later.
npx claudepluginhub alexiolan/craft-skills --plugin craft-skillsThis skill uses the workspace's default tool permissions.
Produce a one-time, project-level design-language contract at `.claude/aesthetic-direction.md`. All downstream UI work (ux-brief, design-review) reads this file as the source of truth for the project's visual system.
Generates design manifest for visual consistency by extracting styles from Tailwind configs, CSS files, and components in existing projects or from user preferences in new ones. Post-edit hook flags deviations.
Creates DESIGN_GUIDELINES.md defining customer-specific UI/UX with aesthetic direction, design tokens, typography, color, motion, components, and layouts. Requires CUSTOMER.md; avoids generic AI aesthetics.
Creates structured DESIGN.md files for visual design systems (colors, typography, spacing, components) that AI agents read to generate consistent UI. Handles from-scratch visions, website extractions, or codebase analysis.
Share bugs, ideas, or general feedback.
Produce a one-time, project-level design-language contract at .claude/aesthetic-direction.md. All downstream UI work (ux-brief, design-review) reads this file as the source of truth for the project's visual system.
Write it once per project. Regenerate only when the design system meaningfully changes (new theme, new UI library, rebranding).
Architect/craft/implement call this skill only when both are true:
.claude/aesthetic-direction.md does NOT existIf the file exists, skip this skill and load the file as context.
No arguments needed. The skill reads the project directly.
# Check if frontend-design skill is available
FD_AVAILABLE=$(find ~/.claude/plugins -type d -name "frontend-design" 2>/dev/null | head -1)
if [ -n "$FD_AVAILABLE" ]; then echo "FD_AVAILABLE"; else echo "FD_UNAVAILABLE"; fi
FD_AVAILABLE → proceed with skill invocation (Step 2a)FD_UNAVAILABLE → fallback template generation (Step 2b)Read, in this order:
tailwind.config.* if present, postcss.config.*src/**/globals.css or equivalent theme fileInvoke the frontend-design:frontend-design skill via the Skill tool. Ask it to produce an aesthetic direction document constrained to the project's existing visual vocabulary. Explicit constraints:
Structure the output (write to .claude/aesthetic-direction.md) using this template:
# {Project Name} — Aesthetic Direction
> One-time design-language contract. Updated manually when the design system changes.
> Generated: {YYYY-MM-DD} by craft-skills:aesthetic-direction
## One-sentence north star
{What this product *feels* like in one sentence.}
## Reference atmosphere
{2-3 sentences capturing the tone: clinical-calm / editorial-dense / playful-minimal / etc.
Who the user is, what they expect visually.}
## Voice & tone
| Dimension | Direction |
|---|---|
| Voice | {editorial / conversational / instructional} |
| Warmth | {low / medium / high, with rationale} |
| Density | {high / medium / low} |
| Humor | {none / dry / warm} |
| Numbers | {how precision is conveyed — tabular, bold, inline} |
| Labels | {microcopy conventions} |
## Typography system (observed, not invented)
- **Primary:** {font family, source, when to use}
- **Body:** {font family, weights used}
- **Data/numerics:** {tabular-nums required y/n, mono font if applicable}
Name the exact fonts currently declared in the project. If none are declared, note "system fonts currently — direction should preserve this restraint or name a specific font to adopt."
## Color philosophy
- **Canvas/background:** {token + hex}
- **Ink/text:** {token + hex}
- **Primary accent:** {token + hex + when to use}
- **Semantic tokens:** {success / warning / error — usage rules}
- **What NOT to use:** {colors/tokens explicitly ruled out}
List tokens exactly as they appear in the project (e.g. `--color-primary`, `oklch(...)`, DaisyUI theme name).
## Density & spacing
- Padding rhythm: {e.g. "4-8-16-24", or specific to DaisyUI/Tailwind scale}
- Radii: {small/medium/large tokens with values}
- Card/container shape: {bordered / shadowed / flat}
- Motion budget: {animations allowed, durations, reduced-motion handling}
## What this direction RULES OUT
Explicit list. Prevents downstream agents from introducing:
- Specific fonts/colors that don't fit
- Patterns the project deliberately avoids (e.g., "no purple gradients," "no glassmorphism")
- Component libraries or utilities that would clash
## Signature elements (memorable)
1-3 visual signatures that, if lost, would change the product's identity. E.g., "teal primary + warm base-100," "small-caps section labels," "hairline dividers instead of cards."
## Accessibility baseline
- Minimum contrast ratio for this project
- Focus-visible convention
- Color-is-not-the-only-encoder rule
- Motion-reduce handling
## How to use this file
Downstream skills (`ux-brief`, `design-review`) read this file as input. When reviewing new UI work, they check the result against this direction. When proposing UI patches, they respect these rules.
If the design system meaningfully changes (new theme, new brand, new UI library), update this file manually — DO NOT regenerate from scratch without preserving intentional decisions.
If the skill is not available, generate a minimal direction by extracting observable facts from the codebase. No creative authorship — just document what is.
> AUTO-GENERATED without frontend-design skill. Please refine voice/tone/signature sections manually..claude/aesthetic-direction.mdQuality will be lower but downstream skills still have a contract to read. User can refine later.
Tell the user in one sentence:
"Generated
.claude/aesthetic-direction.mdfrom {method: frontend-design skill | observed tokens}. Downstream UI work will use it as the design-language contract. Refine it anytime; changes stick."
Do NOT block on user approval — pipeline continues. User reviews asynchronously.
.claude/aesthetic-direction.mdOther skills that consume this file:
craft-skills:ux-brief — reads it as context when drafting per-feature UX briefscraft-skills:design-review — uses it as the reference for regression and distinctiveness checkscraft-skills:simplify — consults it during UI quality reviewArchitect / craft / implement / finalize invoke aesthetic-direction as a prerequisite when UI work is detected and the file is missing. They do NOT invoke it for features with no UI layer.