In short
Four screens, each built twice: the way an agent makes it on its own, and the same screen after a design pass. Plus the tools and the working order we use ourselves.
With AI anyone can build an interface. A landing page or a dashboard takes a minute. So what counts now is how well the interface is made. Left to itself, an agent builds the same thing every time: violet gradients, emoji for icons, three buttons on the first screen. People call it AI slop.
Below are four examples, each built twice. Drag the divider, press the buttons, hover the charts. Under each one is what changed and what designers call it. At the end are the tools we use and the order we work in.
The two-version format comes from Kosta (kosta.fyi) and Damir Sokolovsky (unslop). Both of their skills are in the toolkit.
On the left, the first screen an agent assembles from ready-made components. On the right, the same screen after a pass. Drag the divider.
Streamline your workflow, save time and get paid faster with our all-in-one invoicing platform.
Tally
For freelancers and small studios. Reminders go out on their own, and every payment lands in one list.
Designers call this value proposition, primary action, social proof.
The main business figures for the month. Hover the bars on both sides.
Welcome back, Alex 👋
Here's what's happening with your business today.
Overview 📈
October
$45,232
Designers call this visual hierarchy, data-ink ratio, tabular figures.
A delete confirmation. Press and hold the buttons on both sides.
⚠️ Are you absolutely sure?
This action cannot be undone. This will permanently delete your project and remove your data from our servers.
Delete “Spring launch”?
Its 12 files and 3 shared links will stop working. This can’t be undone.
Designers call this tactility, feedback, UX writing.
Stock levels in a warehouse. Hover the rows.
| Product | Price | Qty | Status | ||
|---|---|---|---|---|---|
| iPhone 17 Pro | $1,099 | 24 | ✅ In stock | ⋯ | |
| MacBook Pro 14-inch | $1599.00 | 3 | ⚠️ Low stock | ⋯ | |
| AirPods Pro | $249 | 0 | ❌ Out of stock | ⋯ | |
| iPad Air | $599.00 | 11 | ✅ In stock | ⋯ |
| Product | Price | Qty | Status |
|---|---|---|---|
| iPhone 17 Pro | $1,099.00 | 24 | In stock |
| MacBook Pro 14-inch | $1,599.00 | 3 | Low stock |
| AirPods Pro | $249.00 | 0 | Out of stock |
| iPad Air | $599.00 | 11 | In stock |
Designers call this alignment, tabular figures, visual noise.
Try submitting the empty form on both sides, then type a password.
Designers call this validation, field states, microcopy.
All free. We tested the skills on our own products.
They work in Claude Code, Codex and Cursor. Run the command yourself, or copy the task: the agent installs the skill and applies it straight away.
Emil Kowalski
The mistakes agents make in animation and interface detail, and how to fix them. Emil worked as a design engineer at Vercel and Linear.
Install
npx skills@latest add emilkowalski/skillsTask for your agent
Install Emil Kowalski’s skills with npx skills@latest add emilkowalski/skills. Then go through the animations and small interface details of this project with them: curves and durations, press and hover, how elements enter, shadows and borders. List the problems by importance, fix them one at a time and show what each change was and what it became. Finish by checking the result with screenshots at 390 and 1440px.Jakub Krehel
Skills for typography, colour, layout, accessibility and interface copy. From Interfaces, a magazine about design engineering.
Install
npx skills add jakubkrehel/skillsTask for your agent
Install the Interfaces skills with npx skills add jakubkrehel/skills. Then review this screen under five headings: typography, colour, layout, accessibility and interface copy. Start with a list of problems, most important first, with the file and line for each. Fix them one at a time, adding nothing for decoration, and finish with screenshots at 390 and 1440px.Damir Sokolovsky
Finds the signs of slop on a screen, proposes a direction and fixes the screen pass by pass: spacing, colour, icons, copy, type, motion. Can record a before-and-after video.
Install
npx skills add heydamir/unslopTask for your agent
Install the Unslop skill with npx skills add heydamir/unslop. Then run /unslop on this screen. First list every sign of slop with where it lives and propose a direction taken from the product itself. Once I agree, fix the screen pass by pass: spacing, colour, icons, copy, type, layout and motion. Finish with a before and after.Kosta
Rules for product UI with exact values: shadows, buttons, tables, menus, motion and mobile.
Install
npx skills add kosta4a/tactile-designTask for your agent
Install the Tactile skill with npx skills add kosta4a/tactile-design. Then go through the UI part by part: buttons, cards, tables, charts, dropdowns and mobile sheets. Make each part tactile with the skill, keeping my typeface and colours, and show me a before and after of each part so I can compare.With no example, an agent draws the average of the internet. Take 2 or 3 screens from here and hand them over as screenshots.
Tens of thousands of web and iOS screens, searchable by element. Its MCP lets an agent find references by itself.
Over 2,000 design systems from well-known sites as DESIGN.md files: colours, type, spacing. Hand the whole file to your agent.
Hand-picked work by designers on X in one place: interfaces, animation, components.
A fresh gallery of web and product design, graphics, 3D and logos.
Screens and flows from real apps: onboarding, checkout, settings.
A good base once you change the tokens. Leave the defaults and you get the left side of the examples above. Pick one icon family and one type family per product: this site uses one pair, our product dashboards use another.
Components you copy into your project and edit. The left side of each example above uses the same defaults.
Accessible unstyled components: behaviour and keyboard are done, the look is yours.
A community catalogue of components. Take the structure and restyle it to your system.
A large icon set in several styles. The icons on this site come from it, in one style across the site.
Line icons with a single stroke width, the shadcn/ui default. We use it in our product dashboards.
A typeface with tabular figures and Cyrillic. This site is set in it, and the commands and prompts in Geist Mono.
The typeface of our dashboards, in its variable version. Turn on tabular figures and columns of numbers line up.
Start from a reference
Find 2 or 3 screens on Refero, Inspora or Mobbin and give them to your agent as screenshots. With no example, an agent builds what you see on the left above.
Fix the tokens
Before the first button: 4 or 5 type sizes, spacing in 4px steps, a neutral palette and one accent. An agent keeps to a system once it is written down.
Add a skill
Give your agent one of the skills above and ask it for a before and after of each component. That shows exactly what it changed.
Look at the screen
Take a screenshot at 390px and 1440px, in light and dark. A green build only means the code compiled. A screenshot shows how the screen looks.
Take things out
Count the accents, buttons and type sizes on the screen. Where any of them runs past two or three, remove until the screen starts to lose meaning.
This whole page as one task. Copy it into your agent inside your project: it installs the skills and works through the interface step by step.
Install the skills: npx skills add heydamir/unslop, npx skills add kosta4a/tactile-design, npx skills@latest add emilkowalski/skills and npx skills add jakubkrehel/skills. Then bring this interface into shape step by step, showing a before and after for each.
1. First screen: a headline that says what the product does and for whom; one primary action and one text link; a view of the product in place of blobs and glows; no sparkle badges and no “10,000+ customers” without a source; text set flush left.
2. Dashboard: the name of the period in place of a greeting; one main figure with its chart and a baseline (“+20% vs September”); neutral bars with only the current one highlighted; one number format and tabular figures.
3. Dialogs and buttons: the title names the object and the button names the action; a 1px ring and a short shadow in place of a coloured shadow; a 97% press over 160ms; hover one step lighter on mouse devices only; visible focus.
4. Tables: hairlines between columns and rows; one number format, tabular figures, prices a step quieter than names; status as a dot and a word in place of emoji badges; no stray checkboxes or menus.
5. Forms: an error says what to fix; requirements visible from the start; focus moves to the first field with an error; 16px text in fields.
6. Everywhere: spacing in 4px steps, 4 or 5 type sizes, one accent, a neutral palette, one icon set, no emoji or gradients in the interface.
Add nothing for decoration. Finish by checking the result with screenshots at 390px and 1440px, in light and dark, and list what changed.Eight rules we build our own products and this site by. Each one came out of a specific mistake.
Measure the reference first
Before drawing anything we look at how the best do it and measure: sizes, spacing, contrast. The decision follows the numbers.
Consistency over variety
One pattern with different content reads as a product. Four different patterns read as four different websites.
One thing on the screen stands out
A monochrome base and one accent, used once or twice per screen. When everything is highlighted, nothing is.
Depth comes from light
An object on screen reads as an object because of a lit top edge and a fine ring. A black shadow on a black page does not show at all.
Take out what is extra
No uppercase labels above headings, no mid-line dot separators, no icons for the sake of icons, no decorative gradients.
Show the real product
We show the actual interface. Stock photos, 3D orbs and glowing robots say nothing about what a product does.
Precise copy
Verbs, numbers and the names of things. Promise words and clever headlines sound cheap; a plain sentence sounds sure.
Zero visual defects
Before anyone sees it, every screen is checked by screenshot in light and dark, in both languages, on a phone and a laptop. A green build says nothing about how a screen looks.
Paste them into your project instructions, such as CLAUDE.md or AGENTS.md, so your agent keeps to them in every task.
Follow these design principles in every interface task.
1. Before starting, find 2 or 3 references and measure them: type sizes, spacing, radii, contrast. Work from the numbers.
2. Repeat one pattern with different content. Add a new kind of block only with a reason.
3. A monochrome base and one accent, at most twice per screen.
4. Give depth with a lit top edge and a 1px ring. Do not rely on a shadow on a dark page.
5. Remove uppercase labels above headings, mid-line dot separators, icons without meaning, emoji and decorative gradients.
6. Show the real product interface. No stock photos, orbs or robots.
7. Write precisely: verbs, numbers, names. No promise words and no wordplay.
8. Before saying done, take screenshots in light and dark at 390px and 1440px and fix every defect: cut text, uneven spacing, overflow, empty gaps. A green build does not prove the screen looks right.