Edit: The new version of Runway lives at https://runwayapp.io

Last year I launched Runway, a web-based tool that translates specially formatted comments in your stylesheet into a living styleguide.

Runway was born of the frustration I felt in searching for a styleguide generator that meets the following criteria:

  1. Is tech-stack agnostic (e.g., doesn’t depend on / require working knowledge of Javascript, Ruby, etc.)

  2. Is beautiful and customizable, out of the box

  3. Automatically builds and deploys new changes to a shareable URL

  4. Keeps designers focused on writing HTML & CSS, not figuring out complex tooling and deployment strategies

I've been slow to respond to all of the amazing feedback that I received. But when I saw the launch of Codepen Projects, I knew it was time to get back to work. Projects made it an absolute breeze to get up and running with VueJS + Tachyons, and share my work with a large audience.

I just finished prototyping a different UX for creating a styleguide and would love your feedback. In this iteration, I've moved away from the "specially formatted comments" approach, in favor of a more WYSIWYG experience.

  name: Primary Action Button
  description: Umm, you click the button and things happen?
  code: |
    <button class="btn btn-primary>Click Me!</p>


I'm eager to hear your thoughts!

CodePen has been instrumental in my formation as a Product Designer, and I can't wait to see how the platform accomodates gathering user feedback.


1,236 5 12