{"slug": "show-hn-gradientdeck-a-design-skill-for-coding-agents", "title": "Show HN: GradientDeck – a design skill for coding agents", "summary": "GradientDeck launched as a free, MIT-licensed design skill for coding agents including Claude Code, Codex, Cursor and Copilot, installable via `npx gradientdeck install`. The skill makes an agent plan a page around what the visitor came to do and one idea drawn from the product's own world, write the plan to `.gradientdeck/pages/<page>.md` before any code, then check the finished page on a computer, tablet and phone with a script that flags problems such as an uncredited photo. GradientDeck also forbids invented proof such as fake customer logos, quotes, ratings or '10,000+ teams' numbers, and reuses existing colors, type and components in codebases that already have a look.", "body_md": "**A design skill for coding agents. The pages they build look made, not generated.**\n\n[gradientdeck.com](https://gradientdeck.com)  ·  Claude Code, Codex, Cursor, Copilot  ·  free and MIT licensed\n\nAsk an agent for a landing page and you usually get the same page: a centred headline, a purple gradient, three cards with icons and a row of made-up numbers. Ask it to add a screen to your app and it often ignores the components you already have.\n\nGradientDeck changes how your agent makes those decisions. Before any code, it works out what the visitor came to do, finds one idea from the product's own world and plans the whole page around it. In a project that already has a look, it reuses what's there. Then it checks the finished page on a computer, a tablet and a phone.\n\n```\nnpx gradientdeck install\n```\n\nEvery page below was built by an agent using the skill, in one go, with no edits afterwards.\n\n| **Heel & Post**<sub>A mail-in shoe repair, built as a sole wear map</sub> | **Kissa Hoshi**<sub>A jazz café in Osaka, built as an LP back cover</sub> | **Cadence**<sub>A pricing page, built as a mechanical keyboard</sub> | \n| **Murmur**<sub>AI meeting notes, built as a film edit timeline</sub> | **Lantern Lane**<sub>An evening history walk, built as York's street nameplates</sub> | **Bright Molars**<sub>A children's dentist, built as a door-frame growth chart</sub> | \n| **Settle**<sub>Invoicing for agencies, built as a railway departure board</sub> | **Tamsin & Rafael**<sub>A wedding in Sintra, built as an azulejo tile panel</sub> | **Halyard**<sub>Open-source feature flags, built as a methods paper</sub> | \n\nThe same brief, given to the same agent. One run used the skill.\n\n| **Without the skill**<sub>A familiar craft-shop page: cream, serif and a parcel picture</sub> | **With GradientDeck**<sub>A map of where shoes wear out, with the bag request form ready to fill in</sub> | \n\n1. **It starts with what the visitor came to do.** Not with a layout. The thing they came for goes at the top of the page, on a computer and on a phone.\n2. **It finds one idea from the product's own world.** Something visitors already know, picked because it helps them do what they came for, not to decorate.\n3. **It plans the whole look first.** Fonts, colours, photos and one touch people will remember, written to`.gradientdeck/pages/<page>.md` before any code.\n4. **It checks its own work.** It looks at the page on a computer, a tablet and a phone, and a small script flags common problems, such as a photo without a credit. It fixes what fails. When it can start a second agent, one new to the page reviews it too.\n\nThe page itself is ordinary code in your project. Nothing is added as a signature or comment.\n\nIn a codebase that already has a look, your colours, type, components and nearest similar page come first. The agent reuses them, says what it's adding and why, and points out design problems instead of quietly redesigning around them. A settings screen gets almost no new ideas. A launch page gets one bold one.\n\nWhen an existing page needs a new idea, ask for a `reroll`. It keeps every fact and changes the idea; add `bolder` or `safer` to steer it.\n\n- **No invented proof.** No fake customer logos, quotes, ratings or \"10,000+ teams\" numbers. If a page needs a fact you haven't given, it writes around the gap and tells you what to fill in.\n- **Real photographs, credited.** When a page is about a place, food, a craft or an event, it can use openly licensed photos from Wikimedia Commons and credits each one on the page. It never uses stock sites.\n- **Accessible.** Every page has to meet a floor: readable contrast, visible focus, a calmer version of every animation for people who turn motion off, targets big enough to tap, and a phone layout that holds.\n\nYou don't need special commands. Ask for UI the way you normally would and the skill joins in. You can also name one:\n\n| Ask for | What happens | \n|---|---|\n| `build` | Make or change UI (the default) | \n| `direction` | Choose a look for something new | \n| `reroll` | A new idea for the same page; `reroll bolder` or`reroll safer` to steer it | \n| `extract` | Write down your existing design system as a `DESIGN.md` | \n| `review` | A critique, with findings ranked by how much they matter | \n| `polish` | A last pass on finished UI: spacing, states, focus, small type | \n| `deslop` | Remove the generic touches from the latest change | \n| `bolder` ,`quieter` ,`simplify` | Turn the page's expression up or down by one step | \n| `retype` ,`recolor` ,`reflow` ,`animate` | Rework one part and leave the rest | \n\n```\nnpx gradientdeck install            # into this project (inside a git repo) or your home folder\nnpx gradientdeck install --global   # for every project\nnpx gradientdeck update             # replace an older copy\nnpx gradientdeck uninstall          # remove only what GradientDeck installed\nnpx gradientdeck doctor             # where it's installed, and whether it's current\nnpx gradientdeck install --dry-run  # show what would change\n```\n\n| Agent | Where it lands | \n|---|---|\n| Claude Code | `.claude/skills/gradientdeck` | \n| Codex, Cursor, GitHub Copilot, OpenCode and others | `.agents/skills/gradientdeck` | \n\nNeeds Node 18 or later. The installer has no dependencies, makes no network requests and collects nothing. If your agent has a browser tool, it uses it to look at the page; without one, it reviews the code and tells you it couldn't look.\n\n- `DESIGN.md` : your design system, with the reasons behind it. Written when a new system is set up, or extracted from existing code.\n- `.gradientdeck/pages/` : one short plan per page.\n- `.gradientdeck/decisions.md` : dated design decisions, so the next task doesn't undo them.\n\nRead [AUTHORING.md](https://github.com/VenoM9078/gradientdeck-skill/blob/main/AUTHORING.md) before changing the skill. In short: describe how to choose, never what to choose; give every rule a context; make every rule checkable. `npm test` checks size budgets and a few content rules.\n\nMIT. Made by [GradientDeck](https://gradientdeck.com).\n\nThe photo list (`skills/gradientdeck/photos/photos.json`) points to photographs hosted on Wikimedia Commons and holds no image files. Each photo keeps its own licence, and pages credit every photo they use.", "url": "https://wpnews.pro/news/show-hn-gradientdeck-a-design-skill-for-coding-agents", "canonical_source": "https://github.com/VenoM9078/gradientdeck-skill", "published_at": "2026-10-26 21:35:27+00:00", "updated_at": "2026-10-26 22:11:39.375177+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "generative-ai"], "entities": ["GradientDeck", "Claude Code", "Codex", "Cursor", "Copilot", "Wikimedia Commons"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-gradientdeck-a-design-skill-for-coding-agents", "markdown": "https://wpnews.pro/news/show-hn-gradientdeck-a-design-skill-for-coding-agents.md", "text": "https://wpnews.pro/news/show-hn-gradientdeck-a-design-skill-for-coding-agents.txt", "jsonld": "https://wpnews.pro/news/show-hn-gradientdeck-a-design-skill-for-coding-agents.jsonld"}}