5 ms·

Sketch2Code: Turn whiteboard sketches to working code

45 points by LyalinDotCom 8y ago

rooam-dev 8y ago
It's a great experiment work, but I don't think it is practical. Remember UML to code generation? That was/is much more detailed and I am not sure if it's even used nowadays.
benarent 8y ago
AirBnB have created a similar project. They posted this back in October https://airbnb.design/sketching-interfaces/ https://airbnb.design/sketching-interfaces/
Raphmedia 8y ago
Pretty weak that even the demo GIF has an error. "e-mail" becomes " - mail"
- iforgotpassword 8y ago
  Oh no! That nearly indecipherable e that looks like a c was dropped. Trash the whole code base and start over, Microsoft! ;-) But seriously, OCR still isn't perfect, and this is more about everything else (the whole layout etc.)
- jszymborski 8y ago
  I think demos should be more of an "average performance" rather than "best performance" kinda deal in a lot of situations. This demos tells me upfront that I can expect some OCR issue when I write an e like the euro symbol :P
RobertRoberts 8y ago
Unfortunately this process helps only with the easiest stuff that is already automated with drag/drop clicky type interfaces. So it doesn't really save any time. Maybe in the future this will get more advanced and can do other things. But it's likely to turn into a niche layer for a specific industry. It's a neat idea though, but also not exactly new. (I saw similar things years ago, also didn't go anywhere)
foobaw 8y ago
OCR is not easy.
borgchick 8y ago
Sure it's fun and stuff, but it is literally stuff like this that makes higher ups think "Why are you taking so long for a form? I can have an AI do it for me!" And then you have to spend time explaining that you have to consider responsiveness, internationalisation, error handling, oh... and there is of course what sits behind the form, all the back code that actually records all this information, error checks it, etc etc...
- tyingq 8y ago
  I agree with you, but I also think it's a legitimate complaint that crud apps take so much time to build. They used to be pretty quick with things like PowerBuilder...we've regressed. There are things like this: https://developers.google.com/appmaker/ https://developers.google.com/appmaker/ But nobody seems to have gotten big/broad traction with them yet.
  - deleted 8y ago
    [deleted]
  - dragonwriter 8y ago
    > I agree with you, but I also think it's a legitimate complaint that crud apps take so much time to build. I'm not sure it is; no one really wants pure CRUD apps, they want CRUD + some useful processing; optimizing for the efficiency of making pure CRUD apps would probably be a net loss for real-world apps, which is why even though people keep making tools that make pure CRUD near zero effort, they don't become dominant tools (or, at least, that function of the tool isn't dominant.)
    - WalterGR 8y ago
      people keep making tools that make pure CRUD near zero effort Could you name some? I’m struggling to think of any.
  - michaelchisari 8y ago
    Our tools have gotten more complex because our requirements have grown with them. People might say they want a simple CRUD app, but expectations grow very quickly.
avinashsonee 8y ago
It couldn't understand a neat sketch like this - https://cloud.headwayapp.co/changelogs_images/images/big/000/006/078-88e5f76a0bf0d47951e8927cd4bd20b80a715c82.png https://cloud.headwayapp.co/changelogs_images/images/big/000...
- bastijn 8y ago
  In its defense; that close button is in a weird location. It threw me off as well. Should have been able to handle it though. Not too much strange stuff going on. What was the result?
  - WalterGR 8y ago
    In its defense; that close button is in a weird location. It threw me off as well. OP drew a MacOS (or Gnome?) window.
    - bastijn 8y ago
      No I meant the cross [x] thing on the right side. Above the large (inner) box. Like a button between a textbox and a text area.
      - deleted 8y ago
        [deleted]
therealmarv 8y ago
bummer (but still cool), thought it is about the program sketch. Is there something good which is doing that from mac program "sketch"->"code" ?
- johnsonjo 8y ago
  There’s one I’ve seen like that for React Native [0]. [0]: https://github.com/nanohop/sketch-to-react-native/blob/master/README.md https://github.com/nanohop/sketch-to-react-native/blob/maste...
saas_co_de 8y ago
Perhaps they should use this to rebuild the UI for Azure. It might be better.
ReedJessen 8y ago
Dude, the robots are coming for our jobs.

45 points by LyalinDotCom 8y ago

It's a great experiment work, but I don't think it is practical. Remember UML to code generation? That was/is much more detailed and I am not sure if it's even used nowadays.

benarent 8y ago

AirBnB have created a similar project. They posted this back in October https://airbnb.design/sketching-interfaces/ https://airbnb.design/sketching-interfaces/

Raphmedia 8y ago

Pretty weak that even the demo GIF has an error. "e-mail" becomes " - mail"

iforgotpassword 8y ago
Oh no! That nearly indecipherable e that looks like a c was dropped. Trash the whole code base and start over, Microsoft! ;-) But seriously, OCR still isn't perfect, and this is more about everything else (the whole layout etc.)
jszymborski 8y ago
I think demos should be more of an "average performance" rather than "best performance" kinda deal in a lot of situations. This demos tells me upfront that I can expect some OCR issue when I write an e like the euro symbol :P

RobertRoberts 8y ago

Unfortunately this process helps only with the easiest stuff that is already automated with drag/drop clicky type interfaces. So it doesn't really save any time. Maybe in the future this will get more advanced and can do other things. But it's likely to turn into a niche layer for a specific industry. It's a neat idea though, but also not exactly new. (I saw similar things years ago, also didn't go anywhere)

foobaw 8y ago

OCR is not easy.

borgchick 8y ago

Sure it's fun and stuff, but it is literally stuff like this that makes higher ups think "Why are you taking so long for a form? I can have an AI do it for me!" And then you have to spend time explaining that you have to consider responsiveness, internationalisation, error handling, oh... and there is of course what sits behind the form, all the back code that actually records all this information, error checks it, etc etc...

tyingq 8y ago
I agree with you, but I also think it's a legitimate complaint that crud apps take so much time to build. They used to be pretty quick with things like PowerBuilder...we've regressed. There are things like this: https://developers.google.com/appmaker/ https://developers.google.com/appmaker/ But nobody seems to have gotten big/broad traction with them yet.
- deleted 8y ago
  [deleted]
- dragonwriter 8y ago
  > I agree with you, but I also think it's a legitimate complaint that crud apps take so much time to build. I'm not sure it is; no one really wants pure CRUD apps, they want CRUD + some useful processing; optimizing for the efficiency of making pure CRUD apps would probably be a net loss for real-world apps, which is why even though people keep making tools that make pure CRUD near zero effort, they don't become dominant tools (or, at least, that function of the tool isn't dominant.)
  - WalterGR 8y ago
    people keep making tools that make pure CRUD near zero effort Could you name some? I’m struggling to think of any.
- michaelchisari 8y ago
  Our tools have gotten more complex because our requirements have grown with them. People might say they want a simple CRUD app, but expectations grow very quickly.

avinashsonee 8y ago

It couldn't understand a neat sketch like this - https://cloud.headwayapp.co/changelogs_images/images/big/000/006/078-88e5f76a0bf0d47951e8927cd4bd20b80a715c82.png https://cloud.headwayapp.co/changelogs_images/images/big/000...

bastijn 8y ago
In its defense; that close button is in a weird location. It threw me off as well. Should have been able to handle it though. Not too much strange stuff going on. What was the result?
- WalterGR 8y ago
  In its defense; that close button is in a weird location. It threw me off as well. OP drew a MacOS (or Gnome?) window.
  - bastijn 8y ago
    No I meant the cross [x] thing on the right side. Above the large (inner) box. Like a button between a textbox and a text area.
    - deleted 8y ago
      [deleted]

therealmarv 8y ago

bummer (but still cool), thought it is about the program sketch. Is there something good which is doing that from mac program "sketch"->"code" ?

johnsonjo 8y ago
There’s one I’ve seen like that for React Native [0]. [0]: https://github.com/nanohop/sketch-to-react-native/blob/master/README.md https://github.com/nanohop/sketch-to-react-native/blob/maste...

saas_co_de 8y ago

Perhaps they should use this to rebuild the UI for Azure. It might be better.

ReedJessen 8y ago

Dude, the robots are coming for our jobs.