Inspiration

What more could we accomplish if the time to test an idea was zero?

I've been in awe of what computer vision can accomplish and how it can bring about positive change in our business processes. One such area is UI prototyping. Sketch2Code made me rethink the efficiency of existing accepted process by demonstrating the utility of AI and computer vision in producing prototypes for user testing. I got the idea that integration with tools such as Trello would make it readily accessible and fit seamlessly in the users' collaboration space while also making them far more efficient.

What it does

Sketch2Code Power up allows one to transform a UI sketch into a working web interface within seconds. If you have sketch anywhere, just click a photo and add it to your Trello card as attachment or draw it directly there with the help of inbuilt sketch editor.

After this, you can simply select any of your attachments and the Sketch2Code will load the HTML of it.

How we built it

  • Trello Power Ups
  • Trello Rest API
  • Microsoft Azure Cloud and Customvision.ai

Challenges we ran into

Understanding how Trello Power Ups are designed and figuring out how to handle interactions within nested iframes was a bit of a challenge. However debugging was easy and the documents was quite clear.

Accomplishments that we're proud of

  • Training a custom vision model that performs well for a very small dataset of about 140 images with 10 classification labels.
  • Designing an intuitive user experience with Trello power up so that it will improve productivity.

What we learned

  • Atlassian's Trello Power Up platform
  • Azure Cloud

What's next for Sketch2Code - Trello Power Up

  • Real time multi-party collaboration on Sketches (Google docs for UI sketches).
  • Faster code generation.
  • Better HTML generation with more training data.

Built With

Share this project:

Updates