Resources
25 design guideline sets a founder without a designer can run. Nielsen's 86 rules, 17 interface states, 350 front-end checks.
An agent-built screen ships with one state. A real interface has seventeen, and a seven-field contract for each. Fewer than one in three clean sans-serifs pass two font checks. Print a logo in black first. 25 enumerated design sets, each one a checklist you can run tonight, with the source linked.
Most design writing is an essay. It tells you to care about hierarchy and whitespace, then leaves you staring at the screen. This library is different. It contains numbered sets you can hold up against your product and answer with a yes or a no.
Every entry had to pass one test: it must be enumerated, and a founder with no designer must be able to use it directly. An appreciation of typography failed and was left out. A list of ten logo mistakes with a fix for each passed. The twenty-five entries came together between mid-August and this week. They came from Jakob Nielsen's Substack, the Nielsen Norman Group, MeasuringU, a handful of practitioners' blogs, and one Finnish charity.
Read them together and the same problem keeps turning up.
The one insight to take away
An AI-generated interface ships with one state. A working one has seventeen.
Marcelo Cedeno published the inventory on 8 September 2026. The base states are default, loading, empty, partial, success and error. The contextual states cover permissions, connectivity, validation, device size, focus, disabled controls, reduced motion and interrupted tasks. Data-heavy products add stale content, conflicting updates and unusually long values (Cedeno, Loop11).
This matters now because agents handle the first state well and skip the rest. Ask for a report builder and you get the happy path. "Error" becomes a single red box. Cedeno gives a better account of failure: a failed upload, an unsupported format, an incomplete generation, a timeout and a success with missing fields are five states, not one.
The fix is a small template. For every state, write seven fields: trigger, message, available actions, preserved data, focus behaviour, exit condition, analytics event. Fill it out for a generation timeout and the result preserves the user's inputs, says no result was completed, offers retry and save-for-later, returns focus to the status region, and records whether the user retried.
Give that contract to the agent before it builds the screen. It no longer has an excuse. Give it to a tester and they have a task list instead of a screenshot.
The Nielsen Norman Group arrived at the same place from the other direction. Its guardrail set for generated interfaces starts with UX-context files, Design.md and UX.md. Those files hold the principles, approved patterns, content standards, accessibility requirements and a named blocklist of deceptive patterns (NN/g). Cedeno lists the states. NN/g tells you where to keep the list.
The shared practice is simple: write the design decision down as text before the model runs. Fourteen of the twenty-five entries below are, in one way or another, a file you could paste into that document tonight.
Two samples, so you can see what the entries look like
Fewer than one in three clean sans-serifs pass two measurable font checks. First, check for cap-centred vertical metrics. If the cap height is not centred in the font's bounding box, button labels sit low, and padding will not fix it. Then check for an x-height at 70–75% of cap height. Inter, San Francisco and Innovator Grotesk sit at 75%. Below 70% the text reads as sinking; at 100% it turns into a hard-to-read slab.
The author keeps a collection of more than sixty neo-grotesques and reports that under a third meet both criteria (Yeptype). "Pick a clean sans-serif" is not advice. Two checks up front can replace years of nudging CSS.
Print the logo in black first, then shrink it to 24 pixels. Muhammad Faisal lists ten logo mistakes and gives a fix for each. Number 8 is designing only in colour. His fix is to make a flat black version, positive and reversed, before choosing any palette. Number 6 is too much detail. Test the mark at favicon, app-icon and embroidery size, then prepare a simplified small mark. His pre-delivery checklist runs: read the name small, symbol alone, full lockup, one-colour, light and dark backgrounds, a print test, and open every export (Faisal, Graphic Design Junction). Those two tests catch most AI-generated marks.
Below the line are all twenty-five sets, grouped into five families. Each entry gives you the set, the link, and a warning where the source is thinner than it first appears.
How to use this library
Every entry follows the same shape. The set is the enumerated material, summarised in the source's own terms. The link takes you to the primary. The caveat appears where needed and tells you who wrote the source and what they sell.
Two sets are described rather than reproduced: Nielsen's 86 guidelines, which are his to publish, and the interfaces.dev library, which is paid. Each one says so. Nothing here is our list. Every set has a named source.
Family 1 — Building the screen
1. Jakob Nielsen's 86 guidelines across ten GUI elements. The elements include buttons, input fields and forms, menus, links, dialog boxes, alerts and error messages, icons, checkboxes and radio buttons, tabs, and search, plus windows and the pointer. Each one comes with its history, the usability reason and specific rules (Nielsen, 29 July 2026). Caveat: the 86 guidelines are behind a Substack post. This entry points at them; it does not reproduce them. Nielsen is the most-cited name in usability, so we point at him rather than paraphrase him.
2. Accordion icons users understand. Vitaly Friedman summarises a Nielsen Norman Group study. With no icon at all, users expect a new page. The caret is the safest choice and the only icon people tapped more often than the label. Arrows and plus signs work, though both are overloaded. Custom icons fail. Split menus cause the most mistakes because the label and icon do different things. The default rule is a caret pointing down that flips on interaction, with plus/minus as the alternative. If it is a link, underline it (Friedman, Smart Interface Design Patterns).
3. Dark-mode toggles: two states are enough. Lea Verou's rule, published 6 August 2026, is that the system/light/dark tri-state exposes the implementation's model, not the user's. Nobody opens a settings panel wanting "follow the system." She gives two exceptions. One is when the setting lives in a separate settings panel instead of an in-context toggle. The other is when the colour schemes work differently depending on the system setting, making the third state a different outcome (Verou). She concedes that much of the dislike for two-state toggles comes from poor implementations.
4. Five places an AI feature can live. The choices are a floating widget, toolbar or action bar, sidebar, dedicated page or hub, and inline and contextual placement. Each one trades discoverability against interruption. The piece gives you a framework for choosing, with no declared winner (Jite-Orimiono, LogRocket, 13 August 2026). The five are useful because they are mutually exclusive and you are about to pick one.
5. Compute the type scale with pow(), and never step down. Donnie D'Amato gives three rules. Compute every size directly as base × ratio^N, not by chaining it off the previous size. Never use negative exponents: three steps below a 1.2rem base at a 1.5 ratio lands near 5.6px. Define Heading, Body and Detail as separate categories. Each gets its own minimum base and positive exponents only (D'Amato).
6. Two measurable criteria for a UI font. Look for cap-centred vertical metrics and an x-height at 70–75% of cap height. The article finishes with ten Inter alternatives that pass both checks (Yeptype). Caveat: the "fewer than one in three" figure is the author's own count across his own collection.
7. Measure the bounds before you animate them. Karl Koch learned this while polishing DuckDuckGo for iOS. The measured box and the painted box differ, so the animation should follow the measured one. He names the artefact you get when you guess (the squish) and lists the cases where the technique applies. That second part is missing from most design writing (Koch). Code included.
Family 2 — Systems and tokens
8. Make the design system AI-ready: three layers. Use spec files in structured Markdown, a closed token layer and audit scripts that flag violations. The named tools are FigmaLint, a free Figma plugin that detects detached instances and hard-coded values, and llms.txt, already shipped by Atlassian, Carbon, the CMS Design System and Nordhealth. The claim is straightforward: better data produces better AI prototypes, and text specs beat visual mock-ups (Friedman, drawing on Hardik Pandya).
9. Give the system a vocabulary an agent can retrieve. Matt Rothenberg uses a ds/ directory. It contains components/ (chart-card, metric-card, page-header, table-section), layouts/ (overview is a rule: header, then metrics, then one chart, then a table), and guidance/HIG.md. The defaults are concrete. A PageHeader is a title and one line with no actions. A MetricCard is a label, a number, a delta and a trend. The before/after is a 30-minute meeting versus a message proposing the standard layout and asking "sound right?" (Rothenberg). Caveat: this is closer to a method than a guideline set. It was admitted because the layout and names are copyable as written.
10. Six rules for scaling design tokens. Name the owner of changes and renames. Separate raw primitives from semantic aliases, then enforce that split with a linter rule. Treat renames as versioned changes with a deprecation window. Generate every platform's output from one source in CI. Run a WCAG contrast check as a gate. The argument is that token systems fail at scale because nobody decided who arbitrates, not because of the count (Design Tokens).
11. Six token-naming mistakes, each with the fix. The mistakes are naming after components too early (button-primary-bg); baking values into names (blue-500, spacing-16px); reordering segments; mixing casing and separators across CSS, JS and Figma; using vague modifiers like "primary" with no defined scope; and renaming without aliases. The fixes are semantic first, name the role, one written segment order, one convention transformed by tooling, scope in the spec, and alias-deprecate-remove (Design Tokens, September 2026).
12. The Front-End Checklist: 350+ rules in 11 categories. Its categories include launch, review, accessibility, performance, security, privacy and SEO. You can follow a curated guided path or browse by category. The same rules are available over MCP, allowing an agent to apply the checklist during review (frontendchecklist.io). The site showed 74.2k GitHub stars when we admitted it. This is the entry you can hand to an agent instead of reading yourself.
Family 3 — Designing with agents
13. The NN/g guardrail set for generated interfaces. Give the model Design.md and UX.md files, a design system and approved interaction patterns, content and formatting standards, accessibility requirements, and a named blocklist of deceptive patterns. Every design then answers a standard template: user value, problem solved, tasks sped up and validation criteria. Add organisation-specific checklists and evidence matched to risk. The stated limit is clear. Guardrails move UX knowledge into the generation step; they do not replace the role. The article also warns against synthetic users (NN/g). A stale guardrail file reads as approval, so maintain it.
14. Seven rules for de-slopping AI-generated UI. Matt Dailey is an engineer with no designer. He says to consider the whole and keep a papercuts document instead of playing whack-a-mole. Remove stuff because agents add copy and icons the way they add try/catch blocks. Iterate in a design tool, not the codebase, and have the AI generate three or four variants of everything. Use components and keep a /showcase page where agents build them before touching the app. Use preview deploys with real data and split frontend and backend PRs. Steal from a screenshot pile. Critique as a group (Dailey, Ref). Caveat: vendor blog; the rules do not depend on the product.
15. NN/g's six steps to prototype complex interactions with AI. First decide what the prototype needs to do. Put the design decisions in writing, including empty and error states. Collect sanitised real data or generate a synthetic set. Write a Markdown prompt containing the decisions and the data. Feed it to Cursor, v0 or Figma Make. Then edit, iterate and pilot-test. In the case study, Ramp's Pavan Garidipuri took an expense-policy editor from concept to demo in three weeks (Chan, NN/g, 11 September 2026). Caveat: the three-week figure is Pavan's, as told to the author.
16. The state inventory and the seven-field interface contract. This is the insight described above: list seventeen states and fill out seven fields for each. The testing method comes with it. Turn states into tasks, prototype the transition, ask comprehension questions before preference questions, and benchmark recovery (Cedeno, Loop11). Caveat: the author founded HorizonX, a UI library. The set stands without it.
17. Fifteen named poster styles and the three prompts that get you out of the default template. John Hartnup published this on 7 June 2026, and it reached the Hacker News front page this weekend. The prompt sequence starts by briefing the event and naming what to avoid. Next, ask for a completely different aesthetic and ask what the style is called. Finally, request a menu of styles and pick one by name. The model returned fifteen named styles, each with paste-able descriptors in the source: Bauhaus, Swiss, Contemporary Editorial, Risograph, Cut Paper, Botanical Scientific, Brutalist, 90s Rave Flyer, Memphis, Japanese Minimal, Monochrome + Single Accent, Wayfinding, Modern Icon System, Stamp/Letterpress, Festival Poster. Start a fresh brief per style. Adding one mid-chat causes it to leak into every later image (Hartnup).
Family 4 — Research, personas and reports
18. Nine persona mistakes. These are letting AI generate personas without research; building from assumptions; making too many; making them too generic; conflating skill level with persona; overloading demographics; ignoring context of use; reusing personas across projects; and having the team ignore them. Mistake one dates the list to the problem founders have now: the fastest way to get personas is also the fastest way to get worthless ones (Newhook, IxDF, updated 10 August 2026). Free, not gated.
19. Card sorting, then tree testing. In card sorting, participants group and label your content. The result is a set of categories your users hold instead of one produced by your org chart. Tree testing gives people a task and a bare hierarchy, then checks whether they can find the thing. The order matters because the first method generates a structure and the second validates it (Raw.Studio). Caveat: an agency blog selling the service it describes. The methods are decades old and standard; take the procedures.
20. A measurement instrument for AI chatbot UX. The behavioural measures are completion rate, error rate and time on task. The attitudinal measures are UX-Lite plus six scales with item counts: AI Productivity (8), AI Trust (7), AI Dependency (3), AI Anxiety (7), AI Personification (6), Early Adoption (3) (Sauro and Lewis, MeasuringU, 28 July 2026). Caveat, and it ships with the entry: the authors state the framework "requires psychometric validation before finalization." Treat it as a draft survey, not a validated scale.
21. Nine fixes for a research report nobody reads. The article contains two sets. Its structure is a table of contents, background, methodology, executive summary, detailed findings, recommendations with urgency rankings, and next steps. Its six design levers are structure, imagery, hierarchy, contrast, spacing and alignment. Use two or three colours, not more. The closing test is the part worth keeping. Fix the weakest section, then usability-test the report on someone who was not in the room. If it needs you there to explain it, it is not finished (MeasuringU). That test works on a pitch deck too.
22. Designing with children, not for them. Vitaly Friedman points to Save the Children Finland's free handbook. Establish consent, play and trust-building before beginning any research. Sit at a child's eye level. Use pictures and props instead of interviews. Cap sessions at six children per two adults. Show visible progress inside a session. Measure success by how heard the child felt (Friedman, Smart Interface Design Patterns). Scope: applies when your users are children. Admitted with that stated.
Family 5 — Brand and practice
23. Ten logo mistakes, each with the fix. The full set starts with understanding the brand, then using one idea per mark. Compare three or four type directions using the real name. Judge optical balance by eye at the largest and smallest sizes. Make a flat primary version before adding effects, and test it at 24 pixels. Set aside the first symbols that come to mind. Work in black first. Prepare primary, secondary, icon and one-colour variations. Open every export and ship a one-page usage sheet (Faisal, Graphic Design Junction). Caveat: a design resource site, not a research body. Fine for an applied set.
24. Six principles for a design engineering practice. Karl Koch wrote these at DuckDuckGo, where a team of one is hiring its second. Understand before we make. Own the experience, not the handoff. Make trust effortless. Move fast by making less, better. Finish the work; a working happy path is not the finish line. Make quality repeatable. He names the fourth as the one they will test most, because they are small and competing with larger teams (Koch).
25. The interfaces.dev cheat sheet. Each entry in this pattern library comes with an interactive demo and source code. The reference ships as monthly issues and includes agent skills (interfaces.dev). Caveat: paid. $7.99 a month, $79.99 a year, or $299 lifetime, verified on the page. It is the only priced entry in the library, and the price is here so you can decide before you click.
What is not in here
Essays about design, however good. An appreciation of hidden details in fonts was enumerated and beautiful, but you cannot apply it, so it was left out. Five operating stances on AI were excluded for the same reason. So was a vendor's design-system build story with no enumerated set. A list of seven lines of client feedback was left out because it advises freelancers on handling a client, not founders working on a product.
If you take one entry, take the state inventory. Then open your own product's most important screen and count how many of the seventeen states you have actually designed.
Keep reading
The rest of this article: 25 design guideline sets a founder without a designer can run. Nielsen's 86 rules, 17 interface states, 350 front-end checks.
The remaining sections are behind this point.
It costs an email address. The same address goes on Makersfuel, the MakersClaw briefing that runs Tuesday to Saturday, and every issue carries an unsubscribe link.
The address is used for the newsletter and nothing else. Privacy.
