Yeoman generator for UX prototypes

Usage no npm install needed!

<script type="module">
  import generatorUxPrototype from '';


generator-ux-prototype Build Status

Yeoman generator

Getting Started

What is Yeoman?

Trick question. It's not a thing. It's this guy:

Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create.

Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive. Make sure you clean up, he likes new and shiny things.

$ npm install -g yo

Yeoman Generators

To install generator-ux-prototype from npm, run:

$ npm install -g generator-ux-prototype

Next, you'll need to install the bundler gem. Just run:

$ gem install bundler

Finally, initiate the generator (from within your project directory):

$ yo ux-prototype

Sub generators

To create a new page for your prototype, just run:

$ yo ux-prototype:page NAME_OF_YOUR_PAGE

Go from sketch to wireframe to prototype with this front-end development and design kit by generating static HTML pages from dynamic templates and partials, and modular CSS structure using SASS, allowing you to keep everything organised the way you need it to be.

We’re not designing pages, we’re designing systems of components

Stephen Hay


All features are optional, if you don't want to use one just comment it out in the appropriate tasks/task-name.js file. Everything is highly configurable and automated with Grunt.

  • Modular templating and partial/includes system (Handlebars) – Assemble
  • CSS pre-processing – SASS
  • Livereload your designs instantly after saving on multiple devices (without a browser plugin)
  • SVG conversion to PNG and Base64 encoded CSS for fallback - Grunticon
  • Package/asset management (jQuery, modernizr, etc.) - Bower
  • Minification of JS and CSS
  • Image optimisation
  • Rule based linting of JS, CSS and HTML
  • HTML beautification according to rules you set – Prettify
  • Growl notifications

The Sass/CSS adheres somewhat closely to the following guidelines (needs cleanup):

Growl Notifications

If you would like growl notifications to function, you will need to install growlnotify

How to use

NOTE: Need to elaborate on this

A lot of the variables are defined in Gruntfile.js and also in package.json.

Source files are in the src directory and the static/flat output is output to the build directory.

Working on source files

Start a server with livereload and edit your HTML (.hbs), SASS or js files from the src and have the changes update in the browser without refreshing.

grunt serve

Building static output

After you have changed any of the source files, generate new files in the build directory by running the following command:

grunt build

HTML (.hbs) pages

Assemble docs

Most page and directory relatred settings are in tasks/options/assemble.js.

Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.

If you'd like to get to know Yeoman better and meet some of his friends, Grunt and Bower, check out the complete Getting Started Guide.