AI Guides › Workbench
By Nigel Guy · 7 min read
Most people meet a design repo the same way: they see a screenshot, copy an install line into a project and let an AI agent loose on the front end. It feels fast, and the first page looks better than the usual default. Then the next three pages carry the same fingerprints, nobody can say what changed in the codebase, and nobody has read the files that are now steering the agent.
The rule: a design repo is a set of instructions or code that will shape your project, so read it, install it on a branch, and judge it by one real screen before it touches anything else.
One caveat first. The topic came to us as "four real repos worth knowing" with no names attached, and we could not confirm which four the original author meant. So this guide picks four public repos that we could open and read on 2026-10-04, and says what each does. If you were hoping for a different four, the method below still applies.
| Repo | What it is | Cost at time of writing | Best for | Catch |
|---|---|---|---|---|
| anthropics/skills, frontend-design | One skill file of design guidance for an AI agent | Free to read; licence terms are in the repo's LICENSE.txt, so check them. Your AI plan is separate | Stopping generic, templated-looking pages | It is guidance, not components. Quality depends on your brief |
| pbakaus/impeccable | A skill with 24 commands plus detector rules for AI-generated front ends | Free to read; check the repo for its licence. Your AI plan is separate | A repeatable review loop: shape, critique, audit, polish | Larger footprint; commands rewrite files, so use a branch |
| VoltAgent/awesome-design-md | A library of DESIGN.md files describing the look of well-known sites | Free, MIT licence | Giving an agent a concrete visual reference | Files are extracted from other companies' public sites |
| shadcn-ui/ui | Components whose code you copy into your own project | Free, MIT licence | Real, accessible building blocks you own | It is React and Tailwind territory; not a drop-in for every stack |
None of these has a price tag of its own. What you spend is the AI tool you run them with, so check the current price of that plan at checkout, in pounds, rather than trusting any figure written here.
This is one markdown file. It tells the agent to act as a studio design lead, to ground the design in the subject matter, to draft a compact plan (four to six named colours, type roles, a layout sketch) and then to review that plan against the brief before writing code. It also lists the defaults it considers tells of generated pages, such as cream backgrounds with a terracotta accent, identical rounded cards, and an all-caps label above every heading. At the time of reading, the file had been updated in September 2026, so it moves.
How to use it: put your real brief in front of it. A skill cannot invent a subject. Give it the audience, the one job of the page and the content that will actually appear.
Impeccable describes itself as design guidance for AI coding agents: one skill, 24 commands and 61 deterministic detector rules. Its README gives the quick start as running npx impeccable install from your project root, then /impeccable init inside your AI tool. Init writes a PRODUCT.md recording audience, purpose and constraints; a separate DESIGN.md records the visual system. Commands then run as /impeccable audit blog, /impeccable critique landing, /impeccable polish settings and so on.
The useful habit here is the vocabulary. "Critique" reviews hierarchy and clarity; "audit" checks accessibility, performance and responsiveness; "harden" covers error states and text overflow. Run one command per pass and read the diff each time.
A DESIGN.md is a plain markdown file describing how a product should look, in the format Google Stitch introduced. This repo collects files extracted from the public sites of many well-known brands. Each follows a nine-part structure covering mood, colour roles, typography, components, layout, elevation, do's and don'ts, responsive behaviour and a prompt guide. The README's instruction is simple: copy one into your project root and tell the agent to use it.
Use it as a study aid and a starting point, not a costume. Building a page that imitates another company's identity is a legal and brand risk, and the repo itself says it claims no ownership of any site's visual identity.
The odd one out, because it is code rather than instructions. The README calls it a set of components you can customise and extend, "open code" that you use to build your own component library. You copy components into your project rather than depending on a package, so you can read and change every line. Its topics list React, Next.js, Tailwind, Radix and Base UI. Follow the official docs at ui.shadcn.com for the current install command rather than a pasted one from a social post.
You are a front-end designer-engineer working in my existing project.
Context: [PRODUCT_AND_AUDIENCE], on [STACK], with design tokens or styles in [WHERE_STYLES_LIVE]. The screen to improve is [SCREEN_OR_FILE].
Goal: improve this one screen so that [PRIMARY_USER_JOB] is obvious within five seconds, without changing any other screen.
Method:
1. Read the files involved and the instructions from [REPO_OR_SKILL_NAME]. Summarise in five lines what that guidance asks for.
2. Propose a short plan: colours, type, layout, and what you will NOT change.
3. Wait for my approval before editing.
4. Make the smallest set of edits that delivers the plan.
5. List every file you changed and why.
Constraints: keep existing component names and routes; no new dependencies unless you ask first; keep keyboard focus visible and contrast accessible; do not copy another brand's colours, logo or wording.
If anything above is missing or ambiguous, ask me before you start rather than guessing.
Before you answer, check that your plan uses my real content, touches only [SCREEN_OR_FILE], and says what you are leaving alone.
Fill in the product, stack, screen and the repo you are trying.