Prototyping in Applet
Applet is perfect for building working prototypes quickly - excellent when you want to demo an idea or test something without the hassle of coding.
Board mode is your friend Copied! Link to this section
If you’re prototyping something with specific behavior in mind and a clear user flow, then starting with the board lets you get everything laid out clearly. Use connectors between pages, annotations for interactions, and more:
Import a wireframe from Whimsical Copied! Link to this section
If you’re already building your wireframes in Whimsical, good news! You can copy and paste a wireframe directly from Whimsical into Applet, then select it on the board and hit build:
Pro tip: This makes Whimsical's template gallery an excellent resource for starting out - and they're available on Whimsical's free plan. 👌
Use images as reference Copied! Link to this section
If you’re prototyping an addition to an existing app, start by pasting in a screenshot of the page you’re working on - this provides applet with style reference so it can recreate existing content as a slick, on-brand prototype.
From there, annotate or prompt away and get your new feature in place
You can also use this approach with images that inspire you, whether those are product image, photos of your work, or other brands you look up to:
Prototype anything Copied! Link to this section
While there are certain limits on what Applet can build, those don't apply with prototypes. Try prompting the AI model to recreate the WordPress dashboard, so you can build your plugin prototype in it:
Or generate the latest iPhone or apple watch as a frame so you can prototype your mobile app:
Tips Copied! Link to this section
If you’re prototyping an experience that involves user input (like uploaded images, or text in text fields), you can build in default content that’ll save you time when demoing, or testing the experience. 👌
