A shamelessly slapdash approach for UX and interaction designers creating rapid prototypes in code.

No magic bullet (and proud of it)

The Bodgenator is the antithesis of bloated prototyping apps that fail to deliver. No bells and whistles, just shameless 'smoke and mirror' shortcuts to get you quickly from visuals to code.

Made for Illustrator

Packaged as a lightweight Illustrator script (CS4 and above), The Bodgenator fits snug as a bug into your existing workflow, avoiding the need to learn new skills only for them to become obsolete later.

<div class="button"></div>
<div class="tabs"></div>
<div class="menu"></div>
<div class="background"></div>
.button {
position: absolute;
top: 141px;
left: 158px;
width: 160px;
height: 115px;
background-image: url("img/button.png");

Skeleton code

Export your layout to HTML and you'll have just the essentials and a bunch of divs with class names. jQuery's all set up for you to start adding interactivity. Bob's your uncle.

CSS for cheats

The Bodgenator uses absolute positioning and background images to mirror your layout. It ain't proper, but it's easy to build upon and to swap in images when your design changes.


Bugs, feature requests, other general rants and comments appreciated