screenshot-to-code
make-real
| screenshot-to-code | make-real | |
|---|---|---|
| 17 | 16 | |
| 50,593 | 4,850 | |
| - | 3.1% | |
| 9.7 | 9.1 | |
| 2 days ago | 9 days ago | |
| Python | TypeScript | |
| MIT License | GNU Affero General Public License v3.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
screenshot-to-code
- Screenshot to Code
-
Show HN: Turn a recording of an app into a functional prototype with Claude Opus
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 the prompt yourself here: https://github.com/abi/screenshot-to-code/blob/6069c2a118592...
The quality of the output code is solid, I think. You can see the code for the examples: https://codepen.io/abi/pen/ExJPdop and https://codepen.io/abi/pen/jORWeYB
I think the biggest thing LLM code is typically missing is better abstractions/componentization. You could probably prompt around some of that.
- Evaluating Claude 3 for Converting Screenshots to Code
-
You Don't Need React
You can use GPT-V to create functional components from images directly:
There was an open source project (https://github.com/abi/screenshot-to-code) that I borrowed the prompt from and made a custom GPT for myself where I just drag and drop the image. It’s not perfect but it’s pretty great overall!
Here are the prompts:
-
Convert a screenshot to a working Flutter app
PS: I got the idea from tldraw/make-real and abi/screenshot-to-code projects. So all credit to them 🙌
-
Get Ready to Rock Web Development: Screenshot to Code with GPT-4V!
Screenshot to Code GitHub Repo: https://github.com/abi/screenshot-to-code
- Has anyone came up with a way to create images from your own photos?
- FLaNK Stack Weekly for 20 Nov 2023
- GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean HTML/Tailwind/JS code
make-real
- Make-real – Draw a mockup and make a real software using AI
-
Ask HN: Yo wants to build a game, I'm lost. What can I do?
Consider using some seriously modern tech (LLMs!) to make games with point and click/draw.
https://github.com/tldraw/make-real
This is a really fun project that uses GPT4 and TLDraw. People have made games with it- it’s super WYSIWYG and you can draw the state machines as a diagram with boxes and arrows, the UI directly, etc. I would have loved to have this as a kid.
-
Catalyst – Tailwind CSS Application UI Kit
This is one of the reasons make-real works so surprisingly well: https://github.com/tldraw/make-real
-
Convert a screenshot to a working Flutter app
PS: I got the idea from tldraw/make-real and abi/screenshot-to-code projects. So all credit to them 🙌
-
Show HN: Design2Code – Convert any screenshot to HTML/CSS code using GPT4 Vision
https://github.com/tldraw/make-real
Was posted some time ago on HN, it was a twitter link, can't find it anymore.
- Tldraw/draw-a-UI: Draw a mockup and generate HTML for it
-
I think I need to go lie down
> Turn this into a single html file using tailwind.
https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
Looks simple enough to run “privately” by screenshooting a normal tldraw canvas and passing the prompt with it to the API.
- Generate working HTML/JS UI from a wireframe, using AI
What are some alternatives?
Scada-LTS - Scada-LTS is an Open Source, web-based, multi-platform solution for building your own SCADA (Supervisory Control and Data Acquisition) system.
SQLpage - SQL-only webapp builder, empowering data analysts to build websites and applications quickly
awesome-public-real-time-datasets - A list of publicly available datasets with real-time data maintained by the team at bytewax.io
pixels2flutter - Convert a screenshot to a working Flutter app.
CoC2023 - Community over Code, Apache NiFi, Apache Kafka, Apache Flink, Python, GTFS, Transit, Open Source, Open Data
design2code - Convert any web design screenshot to clean HTML/CSS code
TinyLlama - The TinyLlama project is an open endeavor to pretrain a 1.1B Llama model on 3 trillion tokens.
preline - Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
StyleTTS2 - StyleTTS 2: Towards Human-Level Text-to-Speech through Style Diffusion and Adversarial Training with Large Speech Language Models
unocss - The instant on-demand atomic CSS engine.
fury-benchmarks - Serialization Benchmarks for fury with other libraries
Tailwind CSS - A utility-first CSS framework for rapid UI development.