Starting fresh
GradientDeck Skill
No reference? The skill finds an idea in your product’s own world and plans the page around it.
skill.gradientdeck.comMeet GradientDeck Skill Pages that look made,
Pages that look made,
not generated.
A free design skill for Claude Code, Codex and Cursor. Before any code, your agent finds one idea from your product’s own world and builds the whole page around it.
npx gradientdeck installFree, MIT licensedNo account, nothing collected
01 Heel & Post built as a sole wear map
02 Cadence built as a mechanical keyboard
03 Kissa Hoshi built as an LP back cover
Every page here was built by an agent with the skill, in one go, with no edits afterwards.
Why we built it
Ask for a landing page.
Get the same one again.
Coding agents can build a page in minutes. Left alone, they build the same page every time: a centred headline, a soft gradient, three cards with icons and a row of made-up numbers.
GradientDeck UI fixed part of that by giving agents real designs to follow. But most new products don’t have a site to borrow from, and a borrowed look still isn’t yours.
So we wrote down the judgment instead: how to choose an idea that belongs to your product, plan the page around it, and check the result before calling it done.
Less of the usual page.
More of your product in it.
Same brief, same agent.
One used the skill.
Without it, all three briefs came out in the same shape. With it, each one got an idea of its own.
It designs before it codes.
And writes it all down.
- 01Starts with what the visitor came to do
Not with a layout. The thing they came for sits at the top of the page, on a computer and on a phone.
- 02Finds one idea from the product’s own world
It weighs several, then picks the one that helps visitors do what they came for, not one that only decorates.
- 03Plans the whole look first
Fonts, colours, photos and one touch people will remember, written into your project before any code.
- 04Checks its own work
It looks at the page on a computer, a tablet and a phone, fixes what fails and, when it can, has a fresh agent review it.
# Page plan: index
Job: Understand how the post-in repair works and
order a free padded postage bag
Ideas weighed:
1. Cobbler's claim ticket
2. Construction cross-section drawing
3. Sole wear map ← the one it built
Thesis: The page is a wear chart of a sole: the
places your pair has worn are the repairs, the
prices and the bag request at once. Refuses the
cream-and-rust 'artisan cobbler' page with a sepia
hero and a centred 'Book now'.
Type and color: Archivo wide + Hanken Grotesk.
Tried against a serif, which pulled back to the
artisan rut. Ground cool chart-grey #E8ECEB, ink
leather-black #1C1714, one signal red #D7361F for
wear and action.
Signature: Clicking a worn zone presses the sole:
rings ripple outward and the form's What's-wrong
list updates. Reduced motion: no ripple.Very different products.
Each with its own idea.
See all nineteen 
MurmurAI meeting notes, built as a film edit timeline
Lantern LaneAn evening history walk, built as York’s street nameplates
Bright MolarsA children’s dentist, built as a door-frame growth chart
Tamsin & RafaelA wedding in Sintra, built as an azulejo tile panel
HalyardOpen-source feature flags, built as a methods paper
Crux & CoA bouldering gym in Denver, built as setters’ tape tags
Two tools, one job.
Use either, or both.
Have a look you love
GradientDeck UI
Pick a real website’s design as a DESIGN.md. The skill reads it first and builds within it.
Browse design systemsWhat it promises.
- Nothing invented
No fake logos, quotes, ratings or “10,000+ teams”. If a fact is missing, it writes around the gap and tells you.
- Your design comes first
In an app that already has a look, it reuses your colours, type and components instead of starting over.
- Real photos, credited
Openly licensed photos from Wikimedia Commons, with every photographer credited on the page. No stock sites.
- Readable for everyone
Clear contrast, visible focus, big enough tap targets and a calmer version of every animation.
Questions
What is an agent skill?
A skill is a folder of instructions a coding agent loads when a task needs it. GradientDeck Skill teaches your agent how to make design decisions, so you keep asking for pages the way you already do.
Which coding agents does it work with?
Claude Code, Codex, Cursor, GitHub Copilot, Gemini, OpenCode and most others that read skills. The installer puts it in .claude/skills for Claude Code and .agents/skills for the rest.
Do I have to learn new commands?
No. It joins in whenever your agent works on a page or screen. You can name a command, such as reroll for a new idea or polish for a final pass, when you want something specific.
Will it change the look of my existing app?
No. In a codebase that already has a look, it reads your colours, type and components first and builds new screens to match. The bold ideas are for new pages.
How is it different from GradientDeck UI?
GradientDeck UI gives your agent a design to follow, written as a DESIGN.md from a real website. The skill gives it judgment: what to build when there is no reference, and how to follow one well when there is.
Is it free?
Yes. It is MIT licensed, needs no account, and the installer makes no network requests and collects nothing.
Your next page,
made on purpose.
One command. It works in the agent you already use.
npx gradientdeck install