Made with & in NYC.

What is Tracing?

With this guide you will learn what Tracing is.

Tracing uses artificial intelligence to recognize elements in a screenshot.

Detect Elements

In the tracing process the detected elements that can be renedered to HTML are exported in the final code. Colors and sizes are factored into the customization of the elements.

See below to discover what elements aren't included in the trace?

Customize

With the tools that appear when you click on a detected element, you can easily customize an element to your liking and it will change the code exported in real time.


Elements not included

Keyboard

The keyboard is an operating system level functionality that isn't controlled in that way. Instead an input would show the keyboard when a user focuses it.

Status Bar

The status bar is a default control of the device and browser and is displayed independent of Shots.

Video/Photo Capture

The photo capture is not exported in this version due to the limits of HTML. As we export to other methods we will include photo and video capture.


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.