I am planning in creating a Illustrator/Sketch vector based template for the CSS framework UiKit. And I wonder how to do that.

My first thought was to print to PDF and dissect it from there, but then the print styles get to work. And it would be way too much work to remove all print related styles with FF's element inspector.

So my only other idea would be to make screenshots of the page and redraw it in Illustrator, using an overlay tool such as GluePrint (Mac) or Image Overlay Utility (Win).

I also tried to use Inkscape's CSS via its XML inspector, but it obviously does not support a lot of the required CSS.

  • I don't get why I get downvoted on this question: I ask for a clear direction, point out to what I tried already. If anything is missing, please ask and do not just downvote. I think it is rather rude and not encouraging me to ask and answer here.
    – mcbetz
    May 18, 2015 at 7:22
  • 2
    Can't you just find and remove the @media print block/s in the CSS and then print to PDF? Alternatively, if you're familiar with Python the HTML2PDF package works perfectly for generating PDFs from webpages.
    – Dom
    Sep 15, 2015 at 12:36
  • What is the specific question? Sounds like your suggestions are valid suggestions. I'm confused as to what CSS has to do with Illustrator, though.
    – DA01
    Dec 14, 2015 at 17:36
  • The reason you're getting down-voted is because you're asking: "How do I create a design based on another design?" That's a big workflow question that has as much to do with preference as it does with efficiency. Dec 15, 2015 at 17:30

2 Answers 2


WebVector is a java applet that can render HTML as SVGs.

  1. Creat an HTML file for each UiKit component you wanted to convert
  2. Point WebVector at each file and generate your SVGs
  3. Tidy up the SVGs in your favourite vector editing app.

I haven't tried this, but it might be worth a shot:

Paparazzi can take screenshots of a page and save it as an editable svg, that can then be imported into sketch/illustrator

Here's a more detailed tutorial on how to do it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.