Turn your whiteboard sketches to working code in seconds with Sketch2Code

%3CLINGO-SUB%20id%3D%22lingo-sub-238788%22%20slang%3D%22en-US%22%3ETurn%20your%20whiteboard%20sketches%20to%20working%20code%20in%20seconds%20with%20Sketch2Code%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-238788%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EUser%20interface%20design%20process%20involves%20a%20lot%26nbsp%3Bof%20creativity%20that%20starts%20on%20a%20whiteboard%20where%20designers%20share%20ideas.%20Once%20a%20design%20is%20drawn%2C%20it%20is%20usually%20captured%20within%20a%20photograph%20and%20manually%20translated%20into%20some%20working%20HTML%20wireframe%20to%20play%20within%20a%20web%20browser.%20This%20takes%20efforts%20and%20delays%20the%20design%20process.%20%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EWhat%20if%20a%20design%20is%20refactored%20on%20the%20whiteboard%20and%20the%20browser%20reflects%20changes%20instantly%3F%20In%20that%20sense%2C%20by%20the%20end%20of%20the%20session%20there%20is%20a%20resulting%20prototype%20validated%20between%20the%20designer%2C%20developer%2C%20and%20customer.%20Introducing%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fwww.ailab.microsoft.com%2Fexperiments%2F30c61484-d081-4072-99d6-e132d362b99d%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ESketch2Code%3C%2FA%3E%3CSPAN%3E%2C%20a%20web%20based%20solution%20that%20uses%20AI%20to%20transform%20a%20handwritten%20user%20interface%20design%20from%20a%20picture%20to%20a%20valid%20HTML%20markup%20code.%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22ed6c7675-6849-46b1-bb7e-138b9ef6c548.gif%22%20style%3D%22width%3A%20580px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44366i834BFAFEB481F68D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22ed6c7675-6849-46b1-bb7e-138b9ef6c548.gif%22%20alt%3D%22ed6c7675-6849-46b1-bb7e-138b9ef6c548.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%3ERead%20about%20it%20in%20the%20%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fen-us%2Fblog%2Fturn-your-whiteboard-sketches-to-working-code-in-seconds-with-sketch2code%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EAzure%20blog%3C%2FA%3E.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-238788%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%20Tools%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Community Manager

User interface design process involves a lot of creativity that starts on a whiteboard where designers share ideas. Once a design is drawn, it is usually captured within a photograph and manually translated into some working HTML wireframe to play within a web browser. This takes efforts and delays the design process.

 

What if a design is refactored on the whiteboard and the browser reflects changes instantly? In that sense, by the end of the session there is a resulting prototype validated between the designer, developer, and customer. Introducing Sketch2Code, a web based solution that uses AI to transform a handwritten user interface design from a picture to a valid HTML markup code.

 

ed6c7675-6849-46b1-bb7e-138b9ef6c548.gif

 

Read about it in the Azure blog.

0 Replies