The Mellow Method — a skill file for AI agents
Teach your AItaste.
One file that turns any coding agent into a design engineer with opinions. Not “be bold and creative” — exact hex ramps, a signature easing curve, ten complete aesthetic directions, and a loop that makes the model verify its own work with measurements.
This page is running the method — the silk, the reveals, the numbers below are all it
The problem, repaired live
Same prompt. Hold the button, watch the method work.
Every model produces the purple card by default — on the internet-average, design is average. The skill file replaces the average with decisions: a direction, a kicker, tabular figures, hairline rules, copy that says something.
How it works
Six phases. None skippable.
The operating loop that built everything on this site. The model scopes before it codes, attacks its own output before declaring done, and proves behavior with numbers.
Phase 01
Scope
Name the deliverable plainly, pick the feeling-word, and write the one gesture — the single thing a stranger will remember — before any code exists.
Phase 02
Evidence
Never build from vibes. Read the nearest existing code, inventory real fonts and dependencies, write the token block first on greenfield.
Phase 03
Implement
Tokens → a static page that already looks designed → motion in strict order: entrance, scroll, micro-interactions, at most one ambient layer.
Phase 04
Attack
An adversarial pass over its own work: lifecycle leaks, 0/1/many states, layout shift measured to the pixel, contrast on the worst animation frame.
Phase 05
Verify
Numbers, not vibes. Drive the UI like a user and read back measurements — aria states, pixel offsets, computed styles. Screenshots last, never instead.
Phase 06
Report
Outcome first, evidence quoted, skips declared. No rounding “mostly works” up to done.
Adjectives are free. These aren't.
A spec sheet that runs itself.
Every number in the file is a decision your agent stops improvising. The dot rides the actual curve; the bars rise on the actual stagger.
Part II of the file
Ten directions. The model commits to one — mixing is forbidden.
Each comes with working palettes, font pairings, textures, and a motion signature. No two projects may share a direction, a display font, or an accent hue.
Editorial print
Engraved ledger
Launcher glass
Mission control
Chrome industrial
Acid terminal
Bone & Klein
Smoke & ember
Soft toy
Phosphor CRT
In use
Nine vague words in. A built thing out.
You do not write better prompts. Below are three real briefs and what the file returns for each — live, on this page, not a screenshot. Same primitives every time; only the token block and the one gesture change.
01 · the brief
build a pricing page for our fintech
- Direction
- Engraved ledgerinstitutional, trustworthy
- Palette
- #f1ede0#143a2b#a5802e
- Type
- Georgia display · mono figures
- Cuts
- No card shadow on aged paper. A second hairline carries the frame instead.
Reserve
- Nightly sweep · T+0 liquidity
- Segregated custody · daily statements
- No lockup, no minimum balance
02 · the brief
our dashboard looks generic, make it nicer
- Direction
- Mission controloperational, live
- Palette
- #0d0f0d#e8ece6#ffa62e
- Type
- mono throughout · caps at 0.2em
- Cuts
- Amber is the only accent and it belongs to live state. Nothing decorative may borrow it.
Amber is reserved for live state
03 · the brief
landing page for my dev tool, make it beautiful
- Direction
- Launcher glassfast, modern SaaS
- Palette
- #0a0a0c#f4f4f3#7cdcff
- Type
- system sans at −0.02em · Geist Mono
- Cuts
- Violet is banned outright. Ice cyan carries the one signal, on one cone of light.
- Deploy to production⇧⌘D
- Open runtime logs⌘L
- Rotate deploy key
- Invite a teammate
- Roll back last release
The hero is the product, not a picture of it
Three briefs, three worlds — the file forbids two projects in a row sharing a direction, a display font, or an accent hue
Receipts
This method built everything you're looking at.
The particle sculptures, the guilloché engraving, the working ⌘K palette — all came out of this exact loop and these exact numbers. The skill file is that process, written down so your agent can run it.
Stop prompting “make it beautiful.”
- One SKILL.md — plain markdown, no runtime, no dependencies
- Ten aesthetic directions with complete palettes and pairings
- Every number pre-decided: easing, stagger, type, spacing, radii
- The 13-item banned list that kills the AI look on sight
- A verification loop that demands measurements, not screenshots
- Accessibility floor built into the definition of done
Questions
What exactly do I get?
A single SKILL.md file (plus a license and install notes) — the complete Mellow method as machine-readable instructions. Drop it into your agent and every UI request runs through it automatically.
Which tools does it work with?
Claude Code (as a skill in .claude/skills/), Cursor and Windsurf (as a rules file), or any agent that accepts a system prompt or context file. It's plain markdown — no runtime, no dependencies.
Does it need a top-tier model?
No — that's the point. The file pre-decides everything models usually improvise: palette derivation, type scale, easing, stagger, spacing. Weak models follow the numbers; strong models fly with them.
How is this different from free “design prompt” files?
Free prompts give adjectives — “be bold, avoid generic fonts.” This gives decisions: exact hex ramps, a cubic-bezier, a stagger band, ten complete directions, and a verification loop that makes the model prove its work with measurements. It was distilled from shipping a commercial component library and seven paid templates, not written speculatively.
What license do I get?
A lifetime license for unlimited personal and client projects. You can't resell or redistribute the file itself.
How is it delivered? Do I get updates?
Instantly after checkout via Dodo Payments, our merchant of record — cards, UPI, and local methods work. Every future revision of the method is free through your original download link.