Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time


An opinionated workflow and CLI tool for generating design documentation from typical files/artifacts of the design process and serving it up as a website. It has been designed to minimize friction between design and development through automation with these carefully chosen features:

  • Export crisp and measurable SVGs from Sketch

  • Parse color, typography, and other specs from Sketch artboards

  • Gather reference images

  • Generate a static site from Markdown files with access to all of the above

  • Deploy to GitHub Pages or anywhere


sketch-book requires node.js to run. Install it with npm which hopefully is already in use for development in your project. Once installed, these commands are available:

$ sketchbook --help

    $ sketchbook <file|directory|glob>... [-o output path]
  Any mix of Sketch, image, and Markdown files are accepted as input.
  Supported globs:

    -o, --output  Path to write rendered pages and prepped assets to
    -t, --template  Path to a custom Handlebars layout template



Each Markdown file is rendered to a like-named HTML file. The hierarchy of any directories is also preserved.

markdown-it parses your content following the CommonMark spec and these plugins:

You can also embed other pages like this:

{{> example_folder/markdown_file}}

Sketch Files

In addition to being a source for visual examples, your Sketch files themselves can also be parsed for color and text style specs. Make any artboards that contain examples of these exportable to SVG. Name layers containing examples as they should appear in your documentation. Parsed specs are available to render within pages using built-in templates, specified like this:

{{ colors: Example Artboard }}
{{ styles: Example Artboard }}

Browse built-in templates


  • SVG
  • PNG
  • JPEG
  • GIF

Images are copied to your output path as assets for your static site. Be sure to size them appropriately for display on the web.


What your documentation consists of exactly is up to you! And your team, and your process. But plenty of previously published projects should help provide some precedent and ideas to get started.


Strongly consider applying the GitHub Flow to design, this will help you collaborate with developers on your team and perhaps approach design more methodically. With Git LFS you can even commit your Sketch files!

Install git-sketch-plugin to get visual diffs and Git commands right in Sketch.

Learn how Shyp is doing this


Symbols were made for this! Consider maintaining a library of reusable components with which you can compose documentation examples showing them in isolation, in pairs, and brought together into full mockups.


copyright © 2016 sparkart group, inc.


An opinionated workflow and CLI tool for generating design documentation.




No releases published
You can’t perform that action at this time.