ACTIVE March 2026

Visual Design Helper

A field guide and brief builder that teaches web design vocabulary and translates your visual instincts into structured prompts for AI.

// brief builder · pick options · generate prompts · no external calls

DESIGN BRIEF BUILDER

Translate instinct into direction

Choose your design language, then copy the generated brief or prompt.

Page type Visual thesis Composition Typography Color & surface Imagery Motion Density

Anti-goals Project context

LIVE PREVIEW

Quiet luxury for enterprise software

B2B landing page with full-bleed hero with asymmetrical editorial sections.

Compact Brief

AI Prompt

VISUAL FIELD GUIDE

Design language, demystified

Common design terms with inline demos so you can point at what you mean.

Hierarchy & Focal Point

Strong hierarchy means the eye knows where to go first.

Strong

Weak

Whitespace

Intentional empty space creates clarity and premium feel.

Surface & Material

What the UI feels like: matte, paper, or glass.

Matte

Paper

Glass

Temperature

Warm feels human. Cool feels precise.

Warm

Cool

Edge Radius

Corner treatment changes tone immediately.

Sharp

Soft

Pill

Density

How much information is packed into a region.

TRANSLATION TABLE

What you mean

Better language

"Make it modern."

Restrained editorial composition, strong typography, one accent, minimal chrome.

"Make it premium."

More whitespace, fewer components, one strong visual anchor, let typography work harder.

"Make it sleek."

Cool neutrals, matte surfaces, tight alignment, sparse motion.

"Make it creative."

Asymmetry, expressive display type, one surprising motion pattern, disciplined structure.

What I built

A two-part static site: a visual field guide that teaches design terminology through inline demos and side-by-side comparisons, and an interactive brief builder that lets you select composition, typography, color, motion, and density options to generate a structured design brief and AI-ready prompt. No frameworks, no build tools, no dependencies — just HTML, CSS, and vanilla JS.

Why I built it

I kept getting generic AI-generated frontends because I lacked the language to describe what I actually wanted. OpenAI’s article on designing delightful frontends gave me the vocabulary. I turned it into a tool so I could use it every day instead of re-reading the article each time. The brief builder turns instinct into direction.

// tech stack

HTMLCSSVanilla JS

Read build log →