Wendy Dean

Shots - Turn designs into code 🚀

by

Shots is a hand-picked collection of design patterns from mobile apps that you can transform into code with one click.

Add a comment

Replies

Best
Wendy Dean
Hey Product Hunt! I'm back! We've been working on this project all autumn long. It's called Shots.ai It's simple: import mobile app screen designs, trace them and export as code. **PROBLEM Creating ideas as quickly as possible to test, validate and iterate is essential to building successful products. The more time between the new ideas and the end users who use them; the greater the risk of failure. **SOLUTION A way to use computer vision to *trace* screenshots in order to get the front end code you need faster to complete developing your ideas. I've created a community driven roadmap which we will use to prioritize: https://www.shots.ai/community If you have feedback or ideas, please let me know! Super excited for this one!
Lachlan Kirkwood
Looking forward to trailing this from a non-tech background 👍 Looks like a brilliant tool to streamline the maker experience!
Wendy Dean
@lachlankirkwood Thanks! That is what we're after, helping people create and iterate faster
Fajar Siddiq
I've been looking all over internet to find this kind of product! NO CODE DESIGN!!!!! especially exports in HTML/CSS! I want to do quick web design on everywhere like sketch, figma, photoshop and all. This is really important in the design trend for 2019! Glad you guys made a good kickstart in January. Hope this product will be more recognize and more users will use. EVERYTHING NEEDS TO BE FAST! Because fast means money and quality too. ;) saves time. hehe.
Wendy Dean
@fajarsiddiq Thanks!!! I'm going to add figma to our community page (https://www.shots.ai/community) where we are looking to upvote the best next set of features and deliver the best product we can. Really looking to understand how distributed the tools a team is using today so we can find best way to improve the value of Shots in-between those tools.
Fajar Siddiq
@wendyde03942462 AND ALSO!!! please do for responsive website. haha all i see is mobile/ios/android. YES PLEASE! figma. Because i'm a designer and i want to export quotes and just upload and see it live. haha
Juan Sarmiento
Awesome work, is it possible to import artboards from Sketch?
Wendy Dean
@juanpablosarmi It's something we are working on for sure!
Joey Tawadrous
Beautiful! Could you tell me what languages you support and what languages you plan to support in the future?
Wendy Dean
@joey_tawadrous today we are exporting to CSS/HTML. We are setting our next output based on the reaction we get from our community: (https://www.shots.ai/community)
Kenny Quach

Its rare to find an app like this. Keep doing what you're doing!

Pros:

This is a really useful app that I will be using soon. Straight to the point, simple. Beautiful UI. Thanks for building this!

Cons:

None at the moment

Ted Chen
Love the design so much 😄 The concept is so good as well, congrats on the launch.
Wendy Dean
@teddd Thanks!
Darius A Beasley
loved the product, Is there a way i can change the trace components in the UI ?
Wendy Dean
@dariusabeasley yes. if you click an element, a properties panel will appear on the right side. You can adjust any detected text, color or the element itself.
Ryan Hickman

Excited to see what's next!

Pros:

Clean. Simple. I am a fan of the simplicity. I look forward to the future features.

Cons:

I wish I could export to React or other code beyond just HTML/CSS. I see its in the roadmap so I imagine to play with it soon.

Brionn K Whitlock
Such a brilliant concept, Loved the design. What are the programming languages does it support to export ?
Wendy Dean
@brionnkwhitlock Today HTML is the default export. We're working to bring React, Vue, Sketch and more next!
Masoud Ardestani
Looks amazing -- looking forwarded to trying it out. Is there a roadmap for turning designs into swift code?
Carmen Madrazo
Cool product! It's really useful, I was looking for the same idea but for designing a responsive website (not just mobile). Are you implementing it soon?
Ambe Benson
Nice way to export code, love the over all design of the web application. Is there a custom list/playlist that i can make to save all the screens that i have traced in past ?
Wendy Dean
@ambebenson we're going to add a feature to "save" and "bookmark" in the near future!
Ambe Benson

Awesome design of the application.

Pros:

Awesome Design, Excellent Idea

Cons:

May be a curated list for the user, just to save their own screens.

Arnold L Sr Bell
very good use for any one who has little knowledge on front-end, is there a way i can modify the fonts as well ? thanks for this application.
Marlo Cobb

integration to sketch would be a feature thats with high value.

Pros:

great idea, clean ui overall

Cons:

Responsive website would be awesome.

Marlo Cobb
Overall, application looks solid, there are some glitches that I am sure you would resolve them in future, thanks for making this tool that solves real engineering problems and helps developers to get to a prototype sooner. keep rocking !! 🎉
Wendy Dean
@marlocobb thanks for the feedback!
Deep Joshi
Amazing 😍 You guys nailed it!
Tykece L Bass
🎉 🎉 great application, I love the structure of screens into their respective category, just wondering if i can search through the entire screen collection's ?
Wendy Dean
@tykecelbass Yes, members can search using standard search bar to find what they are looking for.
Brittney M Shaw
I have been looking for this kind of tool for long time, very well done, Can i also specify the css bootstrap version when i am exporting code ?
Wendy Dean
@brittneymshaw as a default it exports as bootstrap 4. we are creating support for more exports and more control over the export