# Skill: Define a design direction before writing any frontend code to escape the AI template look

> Before asking an AI to generate any UI, supply a five-point design brief (goal, audience, tone, memorable detail, constraints) and explicitly ban the default AI template patterns. Applies to every frontend build where visual differentiation matters.

Source: sodigi·learn — vibecoding/dizayn-ne-shablon · https://sodigi.io/learn/vibecoding/dizayn-ne-shablon

## When to use
- Starting any new page, landing page, dashboard, or component.
- The AI output looks like a generic dark-purple gradient with blobs and a giant hero headline.
- A client, investor, or reviewer would immediately recognize the output as "AI-generated from a template."
- The product being designed is a tool people use daily (not a marketing page) but AI keeps generating landing-page layouts.

## Core rules
- Provide the design direction BEFORE any code is written. Retrofitting design direction after code exists is slow and expensive.
- Five required decisions: goal (what job the interface does), audience (who uses it and what they see first), tone (one word, not "beautiful"), memorable detail (one idea the page is recognized by), constraints (framework, existing design system, accessibility targets).
- Palette must be multidimensional -- several shades with real contrast. A single color flooding the whole screen is a template reflex.
- Type must fit its container. Giant hero headlines belong on marketing pages, not on tools used a hundred times a day.
- Show the working product or tool on the first screen, not marketing text describing it.
- Use meaningful images (real or on-theme generated) that carry content. Blurry atmospheric stock blobs are placeholders, not design.
- Explicitly ban template tells in the prompt: purple gradients, decorative blobs, identical rounded cards, cards nested inside cards, filler "We are changing the future" copy.

## Procedure
1. Before writing any prompt for UI, answer the five questions: goal, audience, tone (one word), memorable detail, constraints.
2. Write the design direction as the first section of your UI prompt.
3. Append an explicit ban list: purple gradients, decorative blobs, giant hero headline, cards inside cards, one-color palette, marketing filler copy.
4. Ask the AI to lock in the design direction first, then write the code.
5. Review the output against the anti-template checklist: does the first screen show the actual product? Is the palette multidimensional? Does each element have a job?

## Ready-to-use prompt
```
Build a site for [your product]. First lock in the design direction, then write the code.

Goal: [what the main screen must show immediately, no scrolling required]
Audience: [who uses it and what they care about most]
Tone: [one word -- e.g., minimal, editorial, industrial, playful]
Memorable detail: [one visual idea that makes this recognizable]
Constraints: [framework, existing colors/fonts if any, accessibility requirement]

Bans: no purple gradients, no decorative blurred blobs, no giant hero headline, no cards inside cards, no full-screen single-color palette, no filler copy about "changing the future."
```

## Pitfalls
- Saying "make it beautiful" with no direction -- AI produces the statistically average site it has seen most.
- Allowing purple gradients and decorative blobs -- the single most recognizable AI-template marker.
- Giant hero headline on a tool used repeatedly every day -- wrong composition for a utility; correct for a marketing page only.
- Palette collapsed into one dominant color -- looks flat and generic; require several complementary shades.
- Cards nested inside cards -- classic AI bloated layout; one level is sufficient.
- Hiding the product behind marketing sections -- the user came for the tool; show the tool first.
- Using stock atmosphere blobs as images -- they plug a layout hole but communicate nothing; use meaningful images.