A Sketch plugin to generate prototype web pages.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 216145a Nov 21, 2017
Failed to load latest commit information.
Contents/Resources/runner add bundle script Nov 3, 2017
dist/blade.sketchplugin/Contents 0.0.4 Nov 20, 2017
examples add examples Nov 3, 2017
scripts add video demo Nov 20, 2017
src/plugin add video demo Nov 20, 2017
.gitignore add dist Nov 3, 2017
LICENSE refactory project start Oct 26, 2017
README.md update readme Nov 21, 2017
TODO.md add examples Nov 3, 2017
package-lock.json add bundle script Nov 3, 2017
package.json add video demo Nov 20, 2017
yarn.lock fix bundle Nov 4, 2017



Version Join the chat at https://gitter.im/Sketch-Plugin-Blade/Lobby

Blade is a sketch plugin designed to generate prototype web pages. Add simple annotation to your sketch layers and blade will get the magic done. Click image below to see demo video.

Blade New Demo


  • Copy blade.sketchplugin in dist folder to sketch plugin folder.
  • Create a artboard to group your layers.
  • Run Blade -> Export Current Artboard on plugin menu.

You can check the example file and its output in the example folder.

Annotation Usage

Blade use layer name annotation to convert layer to certain html component.


Add link to any kind of layer.



Switch between different versions of any layer. Press Command key to see selectors.



Default type of group layer. Can be centered to its container.



Layer will not show in output.


Export any kind of layer as a Image.



  • Group( as default)
  • A
  • Button
  • Case
  • Ignore
  • Img
  • Input
  • Text
  • Textarea

Script support

Support basic javascript