How It Works

MixFrame lets you build editable, sharable mock-ups using elements from your site’s living style guide, eliminating the hassle of keeping live code, prototypes and design comps in sync.

MixFrame uses live code and living style guide components, so mock-ups automatically update as your style guide evolves. Change the color of buttons on your site, and every button in every mockup will reflect the change.

Instead of a constant back-and-forth with flat images, developers can maintain a strict system of design patterns while collaborators use these building blocks to assemble their own pages.

And because it’s all within the web browser, the layouts you build are interactive and responsive.


Getting started with MixFrame is easy…

 

Requirements

You’ll need a living style guide. (Not sure what that is? Learn more here or check out GitHub’s Living Style Guide for an example.)

1. Install

Place a reference to our script in your style guide, right before the </body> tag:

<script src="http://www.mixfra.me/mf.js"></script>

2. Add Components

Add the MixFrame attribute to each individual component in your style guide. This tells MixFrame what name to display for that element.

Example:

<div data-mf-name="Product Tile">
...
</div>

3. You’re done!

  • Open your style guide in Chrome and start building mockups.
  • Show your teammates. They’ll be impressed, we promise.
  • Learn how to organize your components into categories on the Advanced Options page.

Want to see what this does for you?

Make sure you’re using Chrome and…

Launch the live demo

Get Launch Updates

MixFrame is in late-stage development. Sign up to be notified when we launch. Early adopters get free access.

  • This field is for validation purposes and should be left unchanged.