Skip to content
All skills

/prototype

Prototyping

Builds a few genuinely different versions of the UI you describe and puts them behind a switcher, so you can try them all before you commit to one.

Updated September 15, 2026

What it does

  • Builds several different versions of one UI piece
  • Renders one version at a time at full size, on its own route
  • Adds a picker with instant switching, a number for each version, and a key to replay the animation if it has one
  • Enables you to save the selected version in the URL so you can share it. After you choose one, it implements it and removes the prototype

When to use it

When you are in the exploration phase of your project or feature, and want to compare a few versions of the same UI in the actual app.

Prototyping is an essential part of building a great interface because it allows you to actually touch and feel the interface, see how it feels in different states and scenarios and iterate on it until you find the perfect solution.

That’s why building actual variants of a flow or component is way better than drawing wireframes or mockups. You can experience the thing instead of just imagining how it would feel.

What the skill changed

When you ask for an onboarding screen, the agent would build just one version it chose based on some criteria it made up. With this skill, it builds you a few different ones, allowing you to make the decision based on what feels right.

This way you are still in the driving seat and not just blindly following the agent’s suggestions. The things you create will feel like you, because you make the decisions, your taste is engraved into the work you do.

Example prompts

You don’t need special wording. Describe the problem the way you’d describe it to a teammate. Here are some more to try on your own product.

The course behind these skills

These skills come from what I teach in AI for UI. Join the waitlist to get two lessons and be the first to know when enrollment reopens on December 8.