Made with & in NYC.

Shots Guide

With this guide you will learn how Shots works and how you can use it to supercharge your products. Let’s start!

In this guide you'll take your very first steps with Shots.

1. Create an account

Create a free account on Shots from the Sign Up page.

Shots runs directly from the browser and doesn't require users to download anything.

2. Find a mobile design pattern

Next, browse Shots to find a mobile design pattern you are interested in. You can filter by UI elements detected in images, tags, OS and even common UX patterns.

Hover the shot you like with your mouse. Click trace to activate the tracing process for that particular screen.

2. Discover details about the shot

The shot is processed using artificial intelligence. Colors, fonts, ui elements and more are extracted from the shot in real time. You can view the details of what was detected by hovering the elements after they have been traced.

3. Download HTML

Click download html to convert the traced mobile shot into HTML and CSS. The exported HTML output is converted to Twitter Bootstrap 4. For legal reasons we replace images with placeholders because they have copyrights.

What's Next

We're excited with the many possibilities of the technology behind Shots. Tracing to Sketch, creating design systems on the fly, exporting to React and so much more!

Frequently Asked Questions

Shots is a collection of over 6,000 UI screens. Our team curates designs that are innovative, creative, and successful. Designs are categorized and can be filtered by device type, UI elements, category of the app, concept of the screen, and even the app itself. You can browse designs and click to have them traced—we built artificial intelligence to take the screen image and identify common UI elements, patterns and properties so that tracing a design you like is painless and easy. You can also download/export the screen as code to use in your project or share with your team!

You're new to Shots? Follow our easy-to-learn guides and shape a new era of product design. Read our guide.

Shots is free forever to browse new designs and take inspiration. Some features, such as the AI based trace-and-export, are pretty heavy on our servers and start getting expensive fast. To keep Shots free to browse and to constantly keep adding new designs, we've put in place a membership plan that comes with some added features, including scrolling through our archives of past designs, ad-free experience, a search feature, and with unlimited tracing and exporting. You can pay a monthly subscription to retain access, or an annual fee for a yearly membership.

Shots is free forever to browse new designs and take inspiration. You don't have to pay for it or upgrade to view UI screens we've curated. To access features such as our archive of over 6000 screens, search, and live-trace/export to code, you'll have to purchase a subscription. With a subscription you can access all of these features for the entire period of your membership, and browse ad-free!

We run discounts from time to time to support the maker community and our own community of designers and developers. During our launch period, ProductHunt users will be given a welcome code to access our subscription at an early-bird discount! We also offer educational plans, with the first 3 months free for students.

Of course! You can cancel your subscription at any time through your settings page, or by emailing us directly at team@shots.ai. We'd be more than happy to help you cancel your subscriptions, or resolve any issues you may have experienced.