Inspired Design

An agent will hand you a working screen. These skills are how you tell it what’s wrong, one problem at a time. Look at the result before you ask again.

Name the skill and the problem. “Make this page better” gives the agent nothing to hold onto.
Run one, maybe two, then look. Five at once and the agent tries to please all of them. The page gets worse.
If you don’t know which skill, type inspired-ask. Mentioning that the page looks off will not load it.

Install the skills

The usual order

If you can't picture the piece yet, prototype. Otherwise start with layout, then the skill for whatever the screen is made of, then polish, then a critique. Before you ship, run inspired-prep-for-prod.

inspired-product

The idea is the question, so this interviews it one question at a time until you can tell whether it holds. Save it for that. A screen you already mean to build can go straight to layout.

Try this
```
/inspired-product should I build a tool that lets a two-person agency send invoices from the job site? Grill the idea.
```
inspired-prototype

You can't describe the piece yet. It builds a few versions that actually differ, puts them behind a switcher, and writes down what you kept. Once you can say what you want, stop prototyping and build that.

Try this
```
/inspired-prototype I can't describe the add-domain control yet. Show me a few directions.
```
inspired-layout

Start here when a screen looks generated. It fixes hierarchy, spacing, alignment, and the words on the controls, and it takes off decoration that was only there to look designed. If the layout is already right and the form or the type is the problem, skip to that skill.

Try this
```
/inspired-layout the settings page looks generated. Fix the hierarchy and spacing, and drop anything that is only there to look designed.
```
inspired-critique

You want a verdict before you merge. It ranks what's wrong and ends on blocked, approve with changes, or ship it. You make the edits yourself, or you hand a finding to the skill it names.

Try this
```
/inspired-critique review the domains page before I merge it. Don't change it.
```
inspired-prep-for-prod

Every screen has been through the loop, and now you want the whole app checked the way a person will meet it: accessibility, performance, mobile, forms, empty and error states, motion, theming, leftover copy, marketing. Start with audit if you want the list and no edits.

Try this
```
/inspired-prep-for-prod audit
```

What the screen is made of

Layout is done. Pick the skill that matches the thing on the page. A selling page pulls the others in on its own.

inspired-forms

Someone has to type or press. You get a label, Enter to submit, validation that waits until it matters, an error beside the field, and a button that says what is happening while the request runs. Layout will not do this for you.

Try this
```
/inspired-forms the add domain form accepts anything and Enter doesn't submit. Fix the validation and the submit states.
```
inspired-surfaces

The depth is wrong: shadows, borders, corners that nest badly, and the dark-mode version of the same. A muddy shadow is usually one large blur. The fix is the layered elevation the rest of the page already uses. Depth on a bad hierarchy is wasted, so fix layout first.

Try this
```
/inspired-surfaces the domain list sits in a card whose shadow is one large blur. Use the same elevation as the rest of the app.
```
inspired-typography

The text itself is the problem. Size, weight, line height, line length, wrapping, truncation, and numbers that should line up. Inputs stay at least 16px so a phone doesn't zoom. If the type is fine and the hierarchy is wrong, that's layout.

Try this
```
/inspired-typography the request counts don't line up, and the long domain wraps onto two lines. Use tabular numbers and truncate.
```
inspired-component-design

Other screens will reuse this piece, and the props are multiplying. It settles composition, a closed set of variants, and whether the parent or the piece owns the state. A one-off screen doesn't need it, and it won't restyle the piece.

Try this
```
/inspired-component-design this status badge is growing a new prop for every color. Make the variants a closed set.
```
inspired-marketing-pages

A landing page, blog, docs, or changelog. The words stay in the HTML, and a section does not fade in because you scrolled to it. A screen inside the product is for using. Send that one to layout.

Try this
```
/inspired-marketing-pages the pricing page fades every section in on scroll. Make it static, and keep one clear action.
```

It works, and something's still off

Polish is the usual next pass. The others are for a complaint you can name.

inspired-ui-polish

The screen works and still looks unfinished. Truncation, tabular numbers, a button that keeps its width while the label changes, a focus ring, a pressed state, a real hit area, stacking. Polish on a bad layout gets thrown away with the layout, so do that first.

Try this
```
/inspired-ui-polish do a polish pass on the domains page. The long domain wraps, and the button shifts when it says Adding.
```
inspired-animations

You said animate, or the motion looks wrong. It decides whether anything should move. Most product UI should sit still. What does move uses transform and opacity, ease-out, and stays under 300ms. Sluggish frame rate is performance. A finished screen that just feels thin is polish.

Try this
```
/inspired-animations the new domain row eases in and feels slow. Should this animate, and if it should, make the enter fast.
```
inspired-performance

The interface feels laggy, and you can point at it. Fewer nodes, no transition on every property, images with a size, lists that virtualize once they're long. If the motion looks wrong and the frame rate is fine, use animations.

Try this
```
/inspired-performance the domain list stutters once there are a few hundred rows.
```
inspired-mobile-native

A web app feels like a website on a phone. Hover that sticks, the gray flash on tap, an input that zooms the page, the keyboard covering the field, content under the notch. A desktop browser with the device toolbar on is not a phone. Keyboard and screen-reader access is the next skill.

Try this
```
/inspired-mobile-native the domains page feels like a website on my iPhone. The input zooms, and the hover state sticks.
```
inspired-touch-and-accessibility

Tap targets, focus, and screen readers. If this fails, the screen is broken for someone even when it looks finished. Icon buttons need names, focus has to move when a dialog opens, and reduced motion needs a path.

Try this
```
/inspired-touch-and-accessibility the icon button that removes a domain has no name, and I can't see where focus is.
```
inspired-colors

You're inventing a color. Build the ramp in OKLCH, keep one hue, and get contrast from how far apart the lightnesses are. Dark mode should flip that same scale. A hardcoded hex, or a dark mode nobody has opened, belongs in prep-for-prod. If the colors already exist and the hierarchy is wrong, go back to layout.

Try this
```
/inspired-colors these status colors were typed in as hex. Put them on the existing scale so dark mode still works.
```
inspired-script

An animation should exist, and it has more than one stage. This writes the shot list and names every time, inside the animation limits: enter from scale 0.95, under 300ms, transform and opacity only. A single fade doesn't need a script.

Try this
```
/inspired-script the drawer has three stages and the times are scattered. Write the shot list and name every number.
```
inspired-harden

You've only tried the happy path. Long names, an empty list, another language, a save that fails. Truncation needs a way back to the full string. An error is a border, an icon, and a sentence. This is one screen. prep-for-prod is the whole app.

Try this
```
/inspired-harden try the domains page with a very long hostname, an empty account, and a failed save.
```
inspired-amplitude

One section is flatter or louder than the page around it. Name that section. Reuse a move the page already has, or take noise away. No new color, font, radius, or shadow. If the whole screen looks generated, start with layout, then unslop-design if that look is still there.

Try this
```
/inspired-amplitude the billing summary is louder than the rest of this settings page. Quiet it without inventing a new style.
```
inspired-onboarding

A first visit, or a page with nothing on it. Name the first real success in one sentence. The empty state is the onboarding: what belongs here, why it's empty, and the button that creates the first one. Someone who already knows the product can skip.

Try this
```
/inspired-onboarding a new account opens on a blank domains page. Get them to add the first domain, and let them skip.
```

Words, and the generated look

The problem is the language, the look the model defaulted to, or you're staring at a screenshot and don't know where to start.

inspired-design-vocabulary

You can see the thing and you don't have the word. The space between two specific letters is kerning. A vague prompt gets a vague interface, so name it, then hand the build to the skill that makes it.

Try this
```
/inspired-design-vocabulary what's the word for the space between two specific letters?
```
inspired-engineering-vocabulary

Something happens in the interface and you don't have the word. The list updating before the server confirms is an optimistic update. Design vocabulary is for what you can see. This is for what it does.

Try this
```
/inspired-engineering-vocabulary the list updates before the server confirms the new domain. What is that called?
```
inspired-unslop-writing

The sentences could belong to any product. It strips the stock phrases and the padded rhythm, then puts back a line only this product would say. A visual pass is a different skill.

Try this
```
/inspired-unslop-writing the empty state says "Unlock seamless domain management." Say what's missing and what to do.
```
inspired-unslop-design

Layout already ran and the page still looks like a template. Take off the bits that give it away, then make one choice that belongs to this product. You don't need this on every screen. Layout already removes a lot of it.

Try this
```
/inspired-unslop-design this page still has a gradient icon and three identical cards. Remove the tells, then one choice that is ours.
```
inspired-unslop-code

The code looks generated. Comments that narrate the next line, empty catch blocks, silent fallbacks, dead scaffolding. Delete them. Leave a comment only where the next person would otherwise break the behavior.

Try this
```
/inspired-unslop-code strip the generated tells in the domains component. Don't change what it does.
```
inspired-lenses

You're looking at a screenshot. Name the person's situation first, then structure, then behavior, then appearance. Each finding names the skill that should fix it. This pass leaves the pixels alone. Critique is the review of the code, with a verdict.

Try this
```
/inspired-lenses here is the domains page. The person is adding a domain they already own. What is in the way? Don't change it.
```
inspired-distinct

Cover the logo. If the page could ship for a different product, this names the category defaults. More than four choices at the main decision fails the hierarchy. You get a report. A product screen should stay familiar. This check is about the words and the structure.

Try this
```
/inspired-distinct cover the logo on the pricing page. Could this be any startup? Don't restyle it.
```

Around the screen

inspired-ask will not offer these when you say the app should look better. They're for the work beside the screen.

inspired-facts

Nothing about the product is written down. Who it's for, what it makes possible, and which facts later screens must not invent. No palette, no type. If the question is whether the idea deserves to exist, that's inspired-product. This is the record.

Try this
```
/inspired-facts write down who this invoicing tool is for and what later screens must not invent. No visual direction.
```
inspired-brief

You want a screen and you haven't said what it has to do. Two or three questions, a brief you confirm, then it stops. No code. If you can already say what the screen is for, go to layout.

Try this
```
/inspired-brief I want a domains page but I haven't said what it must do. Ask, write the brief, and stop.
```
inspired-mode

A selling page, the product, a document, and a first visit are different jobs. This names the visitor's job before anyone lays anything out. The craft rules stay the same. Skip it when you already know which one you're building.

Try this
```
/inspired-mode is this pricing page for selling, or is it the product? Name the job before any layout.
```
inspired-keep

A look already exists, and the request could mean tidy it or throw it out. Refinement keeps the identity. Replacement keeps the product facts and drops the look. Don't polish a look you've decided to discard. Skip it on a first build.

Try this
```
/inspired-keep the settings pages already have a look. Are we refining the domains page, or replacing it?
```
inspired-ask

You don't know which skill. Type this. It names one or two, and the order to run them. Mentioning that a page looks off will not load it. It also refuses questions that aren't about the interface.

Try this
```
/inspired-ask the pricing page looks fine on desktop but something is off on my phone. Which skill?
```
inspired-tool

You've asked for the same artifact a few times and it still won't land. Stop prompting. Build the small tool that produces it. If you'd get it in one or two tries, just ask for it.

Try this
```
/inspired-tool I keep failing to get this empty-state illustration. Build the small tool that produces it.
```
inspired-creative

You have a feeling for the marketing site and no target yet. It turns the feeling into named rules, then into something you can make again. If you already know what you're building, this will wander. Go build it.

Try this
```
/inspired-creative I have a feeling for the marketing site and no direction. Turn it into rules.
```
inspired-get-weird

The marketing site looks like every other tool, and memorable is the actual job. It pushes toward a surprise that still hangs together. Product UI in this set stays predictable, so keep this off the screen walk.

Try this
```
/inspired-get-weird the marketing site looks like every other tool. Critique it, and give me directions that are strange on purpose.
```
inspired-borrow

You want a skill that answers the way one person writes in public. Every claim has to point at the piece it came from.

Try this
```
/inspired-borrow make a skill from this person's essays. Every claim needs the piece it came from.
```
inspired-inspect

You need to see an animation frame by frame before you change it. Animations decides what the motion should be. This shows you what it currently is. If you already know it's wrong and you're ready to change it, skip the inspection.

Try this
```
/inspired-inspect I don't know what the drawer animation is doing. Inspect it before we change it.
```
inspired-docs

Agents keep inventing colors and variants. Write the rules from the code that exists. If a variant isn't in the code, it doesn't go in the doc. Wait until there is a system to document.

Try this
```
/inspired-docs agents keep inventing button variants. Write the rules from the buttons that exist.
```
inspired-author

A skill is being ignored. Tighten it into a procedure the agent can walk, with a number and a reason on the lines that matter. One skill per decision. Building a screen is a different job.

Try this
```
/inspired-author this skill is being ignored. Tighten it so the agent actually follows it.
```

Inspired Design

The usual order

inspired-product

inspired-prototype

inspired-layout

inspired-critique

inspired-prep-for-prod

What the screen is made of

inspired-forms

inspired-surfaces

inspired-typography

inspired-component-design

inspired-marketing-pages

It works, and something's still off

inspired-ui-polish

inspired-animations

inspired-performance

inspired-mobile-native

inspired-touch-and-accessibility

inspired-colors

inspired-script

inspired-harden

inspired-amplitude

inspired-onboarding

Words, and the generated look

inspired-design-vocabulary

inspired-engineering-vocabulary

inspired-unslop-writing

inspired-unslop-design

inspired-unslop-code

inspired-lenses

inspired-distinct

Around the screen

inspired-facts

inspired-brief

inspired-mode

inspired-keep

inspired-ask

inspired-tool

inspired-creative

inspired-get-weird

inspired-borrow

inspired-inspect

inspired-docs

inspired-author

`inspired-product`

`inspired-prototype`

`inspired-layout`

`inspired-critique`

`inspired-prep-for-prod`

`inspired-forms`

`inspired-surfaces`

`inspired-typography`

`inspired-component-design`

`inspired-marketing-pages`

`inspired-ui-polish`

`inspired-animations`

`inspired-performance`

`inspired-mobile-native`

`inspired-touch-and-accessibility`

`inspired-colors`

`inspired-script`

`inspired-harden`

`inspired-amplitude`

`inspired-onboarding`

`inspired-design-vocabulary`

`inspired-engineering-vocabulary`

`inspired-unslop-writing`

`inspired-unslop-design`

`inspired-unslop-code`

`inspired-lenses`

`inspired-distinct`

`inspired-facts`

`inspired-brief`

`inspired-mode`

`inspired-keep`

`inspired-ask`

`inspired-tool`

`inspired-creative`

`inspired-get-weird`

`inspired-borrow`

`inspired-inspect`

`inspired-docs`

`inspired-author`