frontend-aesthetic-direction

Defines a concrete aesthetic direction across typography, color, density, and motion for greenfield design work.

Updated Aug 13, 2026
One-click install
npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill frontend-aesthetic-direction-mjlike123
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-aesthetic-direction
Source: https://github.com/Mjlike123/ui-prototype-workbench/tree/main/.agents/skills/monkren-design/skills/01-research/frontend-aesthetic-direction
Command: npx skills add https://github.com/Mjlike123/ui-prototype-workbench --skill frontend-aesthetic-direction-mjlike123

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When designing without an existing brand or design system, AI-generated interfaces tend to drift toward generic, template-like visuals. This Skill locks in a specific aesthetic direction before any high-fidelity work begins, so every subsequent design decision stays intentional and consistent. ## Core Features & Use Cases - Five-phase workflow: Confirms no existing brand context exists, gathers intent (three adjectives, audience, references), locks choices across seven axes, documents the direction, then validates it on a small surface before scaling. - Seven locked dimensions: Typography (specific font families with weights and fallbacks), color (oklch-based palettes with tuned neutrals), density (spacing scale), corner radius and shadows, component style, imagery and iconography, and motion patterns. - Anti-generic guardrails: Explicitly avoids overused defaults like Inter, Roboto, and the warm cream-plus-serif editorial combination unless the brief genuinely calls for it. - Use Case: A designer starting a greenfield marketing site with no brand guidelines uses this Skill to propose four distinct visual directions, lock one into a documented token set, and validate it on a hero section before building full pages. ## Quick Start Ask the AI to define an aesthetic direction for a new project that has no brand guidelines, describing the desired feel in three adjectives.

Frequently Asked Questions about frontend-aesthetic-direction

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

FAQPage Schema
How do I choose a visual style for a project with no brand guidelines?

Start by gathering intent: three adjectives describing the desired feel, the audience, industry context, and reference designs. Then propose four visually distinct directions with specific hex colors and font pairings, let the stakeholder pick one, and lock every axis before designing pages.

What should a design direction document include?

It should specify concrete choices per axis: heading and body fonts with weights, a color palette with brand and neutral scales (ideally in oklch), a spacing scale and density, corner radius and shadow rules, component styles, imagery approach, and motion patterns. Write it as a comment block or visible summary.

When should I not use an aesthetic direction workflow?

Skip it whenever any existing context exists: brand guidelines, a live product to match, reference sites the user wants to imitate, or a partial design system in the codebase. This workflow is only for true greenfield projects with no prior visual constraints.

Why do AI-generated designs look generic and how to avoid it?

Generic output comes from vague briefs like "modern and clean" and default choices like Inter or the cream-plus-serif editorial look. Avoid it by locking specific fonts, tuned off-white and off-black colors, and a deliberate density and motion mode before any high-fidelity work.

How do I keep designs consistent after defining a style?

Reference the documented direction tokens for every subsequent design instead of introducing new inline values. If a new value is needed, add it to the direction first, then use it, and eventually migrate the direction into a project tokens file or design system variables.