aiforui logo
[←] All skills

Prototyping

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.

What this skill does

Builds multiple different versions of a UI piece you describe and go through them using a switcher.

  • It builds three to five genuinely different directions, that’s the whole idea of prototyping, trying different solutions to the same problem
  • It renders a switcher so you can go through the different variants
  • It pulls in other skills while it builds. Prototyping a type treatment loads /emil-typography, a card loads /emil-surfaces, an enter animation loads /emil-animations. You want to reject a direction because it doesn’t work, not because it doesn’t look good
  • It saves the selected version via query parameters so you can easily share it with teammates

Installation

Run the installer in your terminal to add this skill to your project:

$npx @aiforui/install emil-prototype --token=…

Omit the skill name to pick from all skills at once, and rename skills during install if you prefer different slash commands.

Usage

Once installed, use it when you don't know which direction is right and want to see a few of them side by side. For example: