[{"data":1,"prerenderedAt":164},["ShallowReactive",2],{"project-39782997":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":34,"aspects":35,"strip":38,"post_text":39,"what":40,"said":81,"maker_in_thread":114,"shape":117,"grid":119,"attempts":126,"same_week":127,"maker_shows":156,"maker_hidden":157,"reader_version":158,"card":159},"39782997","screenshot-to-code","Turn a video of an app into a functional prototype with Claude Opus","title","Show HN: Turn a video of an app into a functional prototype with Claude Opus","https:\u002F\u002Fgithub.com\u002Fabi\u002Fscreenshot-to-code\u002Fwiki\u002FScreen-Recording-to-Code","github.com","abi",1711048001,2024,17,3,2036,3515,58,"shown","ai","code generation from video","web_app",[24,25,26,27,28],"screen recording to code","claude opus","prototype generator","video to code","screenshot to code","quiet",null,{"positive":32,"neutral":33,"mixed":32,"critical":33},0,1,2,{"design":36,"idea":37},{"positive":32,"critical":32},{"positive":32,"critical":33},[15,32,33],"Hey everyone,\n\nI’m the maintainer of the popular screenshot-to-code repo on Github (46k+ stars).\n\nWhen Claude Opus was released, I thought to myself what if you could send in a video of yourself using a website or app, would the LLM be able to build it as a functional prototype? To my surprise, it worked quite well.\n\nHere are two examples:\n\n* In this video, you can see the AI replicating Google with auto-complete suggestions and a search results page (failed at putting the results on a separate page). https:\u002F\u002Fstreamable.com\u002Fs24pq6\n\n* Here, we show it a multi-step form (https:\u002F\u002Ftally.so\u002Ftemplat",{"problem":41,"audience":30,"pricing":47,"motivation":51,"time_to_build":30,"stack":55,"openness":78,"stage":79,"team_size":80},{"value":42,"source":43,"evidence":44},"Recreating a website or app as a functional prototype from a video of it","maker",[45],{"id":46},"post",{"value":48,"source":43,"evidence":49},"Users pay their own Anthropic API costs, about $3-6 per creation with two passes",[50],{"id":46},{"value":52,"source":43,"evidence":53},"Curiosity about whether Claude Opus could build a prototype from a video of an app",[54],{"id":46},[56,60,66,70,74],{"value":57,"source":43,"evidence":58},"Claude Opus",[59],{"id":46},{"value":61,"source":43,"evidence":62},"Python",[63],{"id":64,"by":11,"text":65},"39783813","Thanks! There's a dropdown where you can choose a stack for screenshots (Tailwind, React, Vue, etc.). I haven't updated the prompts for the video feature just yet. You can tweak…",{"value":67,"source":43,"evidence":68},"Tailwind",[69],{"id":64,"by":11,"text":65},{"value":71,"source":43,"evidence":72},"React",[73],{"id":64,"by":11,"text":65},{"value":75,"source":43,"evidence":76},"Vue",[77],{"id":64,"by":11,"text":65},"open_source","beta","unknown",{"praise":82,"objections":87,"requests":103,"questions":108,"alternatives":113},[83],{"value":84,"source":43,"evidence":85},"Output code quality is solid",[86],{"id":64,"by":11,"text":65},[88,96],{"value":89,"source":90,"evidence":91},"Cloning other people's apps is a concern","commenter",[92],{"id":93,"by":94,"text":95},"39784943","dflock","Cloning and stealing other peoples apps, as a service!",{"value":97,"source":90,"evidence":98},"LLM frontend code quality is often mixed",[99],{"id":100,"by":101,"text":102},"39783763","HughParry","Looks awesome! How does it handle taking instruction about things like what stack to use? E.g. if I'm building a new prototype, I personally would want to build with Tailwind,…",[104],{"value":105,"source":90,"evidence":106},"Ability to choose the CSS framework or stack for prototypes",[107],{"id":100,"by":101,"text":102},[109],{"value":110,"source":90,"evidence":111},"How the tool handles stack instructions like Tailwind",[112],{"id":100,"by":101,"text":102},[],{"comments":33,"answered":33,"key":115},[116],{"id":64,"text":65},{"commenters":15,"max_depth":34,"maker_replies":33,"first_comment_mins":118,"lifespan_hours":15},62,[120,122,124],[100,32,15,121,101,32],"project\u002Fneutral\u002Fdesign",[64,32,32,123,11,33],"maker\u002Fpositive\u002Fexecution",[93,33,33,125,94,32],"project\u002Fcritical\u002Fidea",[],[128,133,138,143,148,152],{"id":129,"name":130,"points":131,"category":132},"39783223","Memories",797,"productivity",{"id":134,"name":135,"points":136,"category":137},"39778570","Dropflow",404,"dev_tools",{"id":139,"name":140,"points":141,"category":142},"39836630","Explanations",391,"learning_science",{"id":144,"name":145,"points":146,"category":147},"39807912","Glossarie",363,"languages",{"id":149,"name":150,"points":151,"category":137},"39816836","Jampack",328,{"id":153,"name":154,"points":155,"category":137},"39793513","magick.css",305,5,false,"v2",{"id":160,"name":5,"line":6,"ai":157,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":161,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":162,"url":9,"mix":163,"praise":84,"objection":89,"sub":21},39782997,[24,25,26,27,28],"301",[32,33,32,33],1794036651619]