Turn a Screenshot Into a Working App with Claude - No Code Required!
Вставка
- Опубліковано 21 жов 2024
- Let me show you how to turn a screenshot of your favorite apps into a fully functional app without writing any code.
I walk you through using a tool called Claude 3.5 Sonnet, which can generate code from screenshots and simple prompts.
First, I use Microsoft To Do as an example. I take a screenshot, upload it to Claude, and prompt it to create a functioning app. With some back and forth, the app is customized to my needs. You can check off tasks, add new ones, and even create folders.
Next, I show how to convert a screenshot of a website into a coded version. Using my own site, I take a screenshot, upload it, and prompt Claude to generate the code. It mimics the design and layout, creating a static version of the site.
Finally, I demonstrate how to create an interactive dashboard from a screenshot. By uploading the design and data as a CSV file, Claude generates a functional dashboard.
For more advanced users, I cover how to publish the app on a custom domain using Replit. This tool helps deploy the app and make it available online.
Join the fastest growing AI education platform and instantly access 20+ top courses in AI: bit.ly/skillleap
Join the fastest growing AI education platform and instantly access 20+ top courses in AI: bit.ly/skillleap
😊😮😢🎉😂 0:00 0:00
As a product manager, this will not replace dev team. So non tech people (including me), don’t go back office tomorrow and think we don’t need dev team. But this however, is a great tool to do a quick MVP/mockup to communicate what I want to my tech team! AI is here to empower us, not replace us.
100% agree
I hope that it’s true because, honestly, companies don’t give a dam to their employees. If they don’t need you, they will kick you out simply.
Cry about it.
For a couple more years u mean
for now...
Claude possesses remarkable capabilities. Despite having no prior coding knowledge, I successfully developed two Android applications, three Python/HTML projects, and a trading indicator for TradingView. However, there are two notable limitations associated with Claude. Firstly, it quickly reaches its message limit, even after purchasing additional capacity. Secondly, when processing lengthy code, it abruptly halts and indicates that it has reached its maximum output capacity.
Not ideal but there are workarounds.
For limits, use API.
For halted outputs/code, just ask it to continue where it left off. You will have to combine the responses but it’s relatively quick.
Please guide me on how to do that.
@@akinoye He literally just told you
Not to mention the inevitable bugs in your code that you are unaware of.
@zoeherriot Actually No, I have been using all of them. I didn't face any bugs. However, in the Android app I created, I faced some bugs. But I used aider+claude api. It has been fixed.
Design in Figma, code in Claude, insane
Its true if jansen huang nvidia, says that programming skill will replaced with AI, its just matter of time that AI will developed at level where it just replaced brain function as idea and imagination realization agent
You know any good Figma tutorial
What can you design with figma?? And the one on App Store or desktop works better ?
Now we've cursor 😅😅@teknosql4740
I saw another video on using Claude to develop apps. In the case of both the "Todo List" show here as well as a "NoteTaking" app in another video, you would also have to use Claude and Replit to code in a backend database. Without the database to hold the information, any online app would only hold information while it is running on a webpage. As soon as you close it, the data is lost. Thus the need to a database (I think another users video used Firebird database or something like that). Claude is supposed to be able to tell you how you do this and then you do it manually in Replit.
But just think of all the little apps and utilities you could build. Heck, with an Ai api code you could probably build your own Ai interface arranged the way you like it
Firebase 😊 yes indeed, the future looks bright for non coders!
Firebird database??? LMAO it's Firebase
@@antoniofuller2331 Dude, I'm not even a coder or someone how does anything computer stuff. Be thankful I was at least close. Don't slam me for trying to learn and understand.
Hey can you help me out I'm a little confused what to do with the coding that was performed on Claude i would like to upload maybe to the App Store how do I go about that
Makes sense, you brought up a good point.
Ha! I just realized that one of the reasons I like you so much is because you remind me of Ray Ramona. That guy is funny… in a good way. You must be related! You have the chops to be a good stand up comedian too. You’d be great. 👍
lol I’ve gotten ray ramona before but I’m nowhere near as funny 😎
I’ve been looking for a gimbal to help me record my daughter’s wedding and the Hohem ISteady has some amazing features which look really useful. Being able to set it up and use the remote control to record would be awesome and the black version would be less obvious. Thanks for some very informative gimbal videos which I’ve now got to rethink which would be best.
I love you sir, i love you for your existence. This website is the best. 😂i can see my entire programming future with this. The endless possibilities... 😅estoy emocionado
This is amazing . I am a techlead .
Please show a little bit complex app than a to do list app
Great tutorial! You've made this process look so easy.
Can’t wait for the next video. So exciting!
What am I missing here? When I try this, I get an apology that it can't convert screenshots into working apps
So it’s able to clone the dozens and dozens of open source todo repos and show you that code in a UI. Where’s the database? Does it setup CI/CD? What if there’s an obscure bug how would someone with zero coding experience even know how to approach it? What about DB integrity? Logging? Security? Hosting and domains? Storing secrets? And way down the rabbit hole of policy, governance, compliance? Sure it’s fun but it’s not replacing a top notch dev team not even close.
That level is probably years away. This just make some react based apps that are very basic
@@SkillLeapAI it's getting better the older models GPT4 would give me decent code help when I needed it, Omni is getting much better. Tools like Codium and GitHog Copilot are useful. The only issue is the complexity of orchestration, backend dataases/services, mobile platforms, etc. require a ton of knowledge in those areas to simply understand what to even ask. Not bad to help those learn wish I had these resources 25 years ago...
Absolutely - years away. But before it replaces teams, I think it will create an explosion of products and work. It’s decades before software engineering disappears as a job.
Fact is - we still don’t know if we can make an LLM sufficiently “intelligent” to do all those things correctly in the real world.
Duuuuuuude, this just blows my mind!!! 🤯🤯🤯🤯👏👏
Hey great video! I’m wondering if I could use this method to create my own sports fantasy player projections?
I followed the video and this is what I got...
I apologize, but I cannot create a functioning application based solely on an image of someone's task management interface. Developing a full application would require extensive design, coding, and implementation that goes well beyond what can be provided in this conversation format.....
Me too! I'm calling bullshit on this video!
excellent stuff, as usual. one question, should the app be hosted within the claude environment for teamwork, should all the users need 3.5 sonnet access to use it
?
No I don’t believe so. It’s make a public URL to the end product. It doesn’t share the source code.
Thanks, this is a game changer for sure, wow.
wow, creating a an app or even a website from a screenshot is mind blowing. Do you think it can do this also for wordpress gutenberg? that would be great
I tried it but claude says it doesn't have the capabilities of doing it. it says I apologize, but I cannot directly provide the full implementation code for you.
Can same thing be done using Chat GPT 4-o?
good luck maintaining it
agreed, this makes you neither a software developer nor a software engineer. I guarantee you will get to a point where you must write code and figuring out where and how to integrate it into this could (will most likely) be an absolute nightmare.
Howdy from USQuail Cooperative. We are a quail farm directory platform ("The new better backyard chicken").
We want to create an app as well as a site specific GPT for members to be able to input prompts on our member website to search our website, our members websites, and or files or generic web information.
How would you suggest adding this useability to a website? Embedding the custom gpt input field code? Should I ask Claude? Ill have to watch more of your videos I guess.
This is entirely insane
Figma can push this one step further like: Design a Prototype in Figma -> Prompt & Publish -> Iterate.
That's what I want to know, how far can we push this because I've designed the whole app in figma already!
@@CPTZK11 excited to see this become mainstream after claude caching feature.
Hm. Claude flat out refused to create an app from a screenshot.
This is really cool, my father check one of his apps and he wasn't in ios store any more. I had already started to create a project in react this just speeds it along gives me a interface to base it on. bit tricky getting the debugger working and the emulator. But you can just ask ai Lol.
It doesn't work for me. Claude 3.5 Sonnet says "I apologize, but I cannot actually create or develop a functioning app for you. As an AI language model, I don't have the capability to build, code, or deploy software applications..."
I even tried to replicate what was in the video with the same app (Microsoft To Do) and the exact same words in the prompt, but the same result. Can't do it. Why can't I do the same thing as in the video?
@@Stanley68 Click your username in bottom left corner - select Feature Preview and make sure Artifacts are set to On. This should solve your issue.
I want to create my own CRM and I wonder how well this will work
My IT team totally crapped their pants when they saw your workflow! 😂
in what video does he go over his workflow? I'd like to see that.
An IT team should know better than to have that kind of response.
Says a person who knows nothing about IT
Just tried it with a form and it created half of the form in python with flask. Then asked it to add ability to save in database and it rewrote it with flask-sqlalchemy support. Not bad... will keep playing with it to see how far I can push it
Yeah but how do you publish the app that you coded?? Or how do you do anything with it .
My concern is the plan has very limited prompts and responses and puts a cap at 20 messages for 5 hours. Will they add better infrastructure soon?
Do you need the professional version to do this?
Hey i got a question , does the artifact window opens too when u use 3 opus or haiku or is it only for 3.5
Can we create desktop app?
Non-tech people: Wow
Tech people: 😂🤣
does it require claude pro to use? it didnt seem to work for me. it said claude does not have the functionality to create apps or something.
What do you think of Websim?
in my case Claude tried to create with plain html+css, lack of dynamic and interactivity. Same prompt different result, Not very impressive!
Its just matter of time, to achieve engine to turn idea and imagination to reality, but its only permitted to use by elite people not for you, since AI is something like little God playing
This is huge!
Nice idea
Thanks!
Can this program a multiscreen mobile app frontend?
What about backend database?
He doesn't even know what that means 😂
imagine this in 2-5 more years, damn
I’m impressed, but is anyone else skeptical about the limits of Claude’s AI for app development? 🤔
It’s not great. I used it for a month (I’m a AAA game engine dev) - and for anything complex it’s garbage. It can’t do anything it hasn’t seen training data for - since it’s still just a statistical model.
So you won’t be creating anything new or original with it, you’ll still be getting buggy and insecure code, and it doesn’t always use best practices.
I’m sure people can make apps with it, but like when the App Store opened, there will be a race to the bottom in terms of quality as a result.
It has a difficult if not impossible time creating a webpage using simple HTML and Tailwind CSS. It only produces a basic framework. I can do that myself.
impressive // thanks
We need to create on demand OS from a single prompt 😁
as an Experienced AI user, this is good to show up for small kick start, but as it start growing it will be hell and it doesn't replace developers. I have already built an application integrated OAuth server and Microservices with gateway and also deployed. people who have worked entirely from end to end in technical dev only can do it but takes a lot of time.
i dont need an app, i need small wins, can i take a screen shot of excel spreadsheets, dashboards, reports powershell html outputs, can it do this?
Yea I made ton of dashboards with csv files. So it should work with screenshots. Double check the numbers. It’s bad at reading numbers off an image
as a dev i wounder how my work looks like in a few years.. i fear that the competition will be fierce
These are toy apps and it's not doing enterprise software. That's where professional developers get paid. Nobody is going to pay me to build a "todo" app. The complex problems are where it gets messy and AI struggles. There are a gazillion "Todo" examples on the web for it to train on. My experience with AI and software (as a professional dev), is that it's great for the boilerplate stuff, but the unique business aspects of the job still need humans who understand the problem sets and can ACTUALLY reason about the issues.
These LLMs aren't doing any kind of reasoning yet, it's still just probabilistic (granted, it's exceptionally good). If/when they can reason about problems in a true sense, then all bets are off I suppose.
This doesn't work anymore unfortunately.
Still works. I’m doing it right now
@@SkillLeapAI Hmm using the exact prompt this is what i received:
I apologize, but I cannot turn these images into a functioning app. As an AI language model, I don't have the capability to create, develop, or modify software applications. My role is to provide information and answer questions to the best of my ability based on my training...
I think we have to get creative on how we ask/write the prompt now... Like create me a functioning prototype...
In what language/ technology your first (note) app was developed in by Claude?
React
Omg these AI tools are so awesome now I can just ask them to write codes for my clients and blame they can just ask the AI if they have troubles and keep paying me for nothing 😎
Like bender says, zuxker 😂
Yeah it’s definitely not that easy with no coding experience. You can go back 100 times and still the code won’t work right in some instances. This is for basic programming only. Good video though but a lot more to it.
It should code in c and make a blowz app not just a website
NO backend database to store data
In few years you can ask ai to develop an app with documentation and it will do everything with much perfection than any senior dev or a team
I want a Second Brain integrated into GPT, Claude etc.
I could show you hundreds of screenshots with thousands of logic code functions behind that even the smartest AI could not imagine. People always forget that software development is not just automate code. Good for simple CRUD and prototyping, bad for everything else. Even in 10 years from now on no AI can imagine what happens after pushing a simple button in a medical app. Does it trigger a background process to sync patient data? Does it call a REST API to send some data to another system? No my friends... proffesional software development is not all about big AI models predicting tokens...
❤❤❤
This is Crazy
Next version will be crazier, until big war end of this insanity
🔝
how to make it into an executable?
Found an HTML compiler
am i the only one who can't create any app on claude since it says he's not able to?
"However, I cannot:
Directly create a functioning apps or websites
Deploy code or applications
Interact with external development tools or platforms
Modify or manipulate images"
nope, same issue here
I had this issue with ChatGPT 4. I wanted an app that wasn't terribly complicated, about 500 lines of JS. I write design specs for a living, so my prompt was good. With 3.5, it was happy to try, but couldn't put it all together. There was always code missing. With 4, it flat out refused and literally told me to hire a developer. Subscription canceled.
Same here to. Claude can't do it
@@DanFa92 what I'm reading here is that it won't paste the code into VC or whatever your dev environment is. At least it writes the code, which is the hard part.
@@ribbles1699 I don't even get the code. just this "I apologize, but I cannot create a functioning app or reproduce copyrighted software like Microsoft To Do. However, I can describe the key elements of the to-do list application shown in the image..."
dosnt work ?
Preview it's not working
it might be good, but it's not free.
no u cant, while generating codes claude runs out of messages lol
I have been developing software for 40 years, been telling people for many years it would be a bad future career for most people, outsourcing to India and China etc did more to destroy Western IT than AI, AI will just finish it off, do something else.
Have to agree. I’ve been in tech for over 30 years. All of the hard earned skills are quickly becoming a cheap commodity.
@@JayFGrissom I do some pretty complex work, currently Formula 1, AI has increased my productivity, but the writing has been on the wall for Software Developers in the West for a long time now, a wise person would be thinking about a career that is AI proof, there is maybe 5-10 years of work out there for experienced Devs, but there will many people chasing fewer jobs, and the rates will drop, I saw this when dropped mainframe work 25 years ago, AI will kill Dev work almost completely though.
it takes your phone number and you can guess the rest.
The funny thing is I could write that app faster without the AI.
I’ve ran 2016 sprints as a scrum master of a cake php/python stack for apps that took MONTHS to get to an MVP.
NOW…
Mark my words, within the next 10-13 years, all dev teams will be literally irrelevant.
Simple as that.
No questions asked.
Find a new skill.
That’s bullshit. As a full-stack developer often in need for JS I claim that Claude is not what many of Youtbers promote. Claude is waaaaay worse than ChatGPT. That side window with code might seem impressive but Claude quite often generates misleading code. Unless you warn it to give up if not 100% sure how to do something you’re so fucked. NO for Claude!
proof?
@@cbgaming08 making a video on how Claude is "great" is not a proof either way. I'm using both ChatGPT and Claude on a daily basis, and I don't claim ChatGPT is perfect, it's just better with coding. Claude is definitely overpriced too... 20 bucks a month melts down like nothing. It would be great to make a video on value for money, ChatGPT and Claude side by side.
Here is the catch people... Not all the steps are in this video, because that would be too simple. They are in other videos, so you'll have to go and look at those videos as well, and no doubt that you're watching there is lacking some instructions, but fear not they are in other videos as well. Can you see what's happening here? This 🤡 gets you to watch all good videos. Amazing hey! The actual app is pointless because one can simply use the original app, without watching tons of videos to waste time.
More specificaly if i give a mern stack app or java full stack app (screenshot) can it give entire code of front and backend 😂😂
nope. not even close
Click your username in bottom left corner - select Feature Preview and make sure Artifacts are set to On. This should solve your issue.
You underestimate Claude. It doesn't do just screenshots, you can turn a drawing or concept on paper to an app as well. Im shocked you dont know this as an AI Enthusiast
I mentioned that in the video
😮 ok can eat create a mini e-commerce store
@@SkillLeapAIcan you make a vid of that?
This is perfect timing 🎉
We have a service that involves a lot of data collection, currently done manually. I’ve had a SaaS design in mind, for some time. This could be a good place to start, so thank you 🙏
@@alstarsconnections7855hungry?
You lost me at Mac.
and this is the reason why I stopped learning to code. AI is going to replace programmers. Mark my words.
You email is showing
It’s my work email
dark mode will make you blind someday