Imagine JSFiddle, but instead of experimenting with code, you're mocking up changes to an existing design. You visit the site, enter a website URL, and the website appears fullscreen in the browser, with a toolbar in a left column. You click an element on the site, and the toolbar displays the related properties you can modify. For example, you enter the URL to HN. You click the navigation links. The left column displays a slider or dropdown to change their text size. You can also use a color picker, select common fonts from a dropdown or enter your own, and toggle bold or italic on this element. You click the HN logo. You think it'll look better on the right side, so you can drag and drop that element over there. The site feels a little wide to you, so you click the overall table element, and just scale it a little smaller. Then you click the link titles and bump the line height for more spacing. Select the header, and maybe color pick it to blue instead of the existing orange. You think it looks good, so you click save, and get a link to share the changes. Now you can send this across to anyone else, and they can see your mockup of a revised HN layout.
I don't even want to see code at any point in the process, I simply want to drag around elements, scale divs and text, and modify properties using an interactive toolbar. One of my users, who has no programming experience, should be able to punch in the URL to my site, and within a few minutes share with me the changes they'd prefer to see. My client, boss, etc, should be able to do the same. Instead of explaining the changes, using PowerPoint for unknown reasons to add design notes, or putting together a poorly cut and pasted Photoshop image, they should be able to modify the layout I send across, and send their ideas back. That's all they are, design ideas and mockups. The code is irrelevant, if the mockup is approved, it goes to the development team to properly setup. It's a simple tool for visualizing potential changes to your online website or application, and a great way to collaborate between people, either online, or in person. Imagine sitting down with your client, showing them your work thus far, and being able to drag around columns, and scale images in real-time. Saves time, get's more ideas flowing, and therefore you get a better product.
Another nice addition might be building a list of swatches based on the CSS of the inputted URL. Just scan the CSS for the most common color codes, and toss them in the toolbar for easy selecting. Comments would be nice to see as well. Click an area of the site, and add notes regarding the changes for others to review. A tree format could be another feature. When I modify HN, I send it over to the client, and they build on my design. Then maybe they decide to branch off the original with their own concept. We can then browse different branches of the tree to see how they developed over time, and decide on the final approach we're going to run with for the project.
