digest
Short Summary
Main recommendation: Take a screenshot of an existing app, website, or dashboard, upload it to Claude (using Claude 3.5 Sonnet with a paid plan), and prompt it to "turn this into a functioning app," then refine through plain-English back-and-forth prompts, and publish via Claude's Publish button or a platform like Replit for a custom domain. The speaker demonstrates this with Microsoft To-Do, a company website, and a SaaS dashboard, and says it lets non-developers build customized internal tools without writing code.
Key Points
- Claude 3.5 Sonnet is the model to use; the speaker says other models do not perform as well for this task.
- A screenshot only captures visual layout, so the first version lacks functionality (such as crossing off tasks or handling categories) and needs revision prompts.
- Claude's Publish button creates a shareable URL, while Replit (replit.com) is used to deploy the code on your own domain.
- Claude may refuse to copy a website it does not appear to belong to because of copyright limits; the speaker used his own website.
- The speaker says he used to pay developers on platforms like Upwork for small productivity tools, and now can build much of that himself, though he still recommends hiring a developer for public setup.
Details Worth Noting
- Concrete instructions:
- Take a screenshot (on a Mac, press Command + Shift + 4).
- Open Claude, choose Claude 3.5 Sonnet, and click Add Content to upload the screenshot.
- Prompt: "Turn this into a functioning app" and send.
- If no preview appears, open the menu in the bottom corner and enable Artifact to see a live preview.
- Test the preview and describe fixes in plain English, for example: "When someone clicks this box, make sure this gets crossed off," or "When someone changes these categories, make sure it starts a fresh list of to-dos."
- Once it works, press Publish and copy the URL to share.
- For dashboards with data, remove sensitive names and emails, save Excel data as CSV, upload it, and prompt: "Create an interactive dashboard using this design with my own data."
- For your own domain, prompt Claude: "I want to deploy this website on Replit. Give me the step-by-step guide," then copy the code into a Replit React project.
- When Replit shows errors, copy the error message and tell Claude, "I got this error, fix it."
- In Replit, press Deploy; choose Autoscale (scales with user demand) or Static. Adding a custom domain requires upgrading the Replit plan.
- The speaker says sketching a design in a tool like Figma and screenshotting it can also produce a working app.
- Images on a copied website are not carried over, because they must be hosted on a server to be linked in the code.
- The speaker says the Artifact preview sometimes works better than the copied code in Replit.
- The speaker notes that Autoscale suits growing user counts, while Static does not scale that way.
Bottom Line
Screenshot-to-app building with Claude is practical for internal tools and prototypes, but expect several rounds of revision and consider a developer for production launch.
