[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10110":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},10110,"draw-a-ui","SawyerHood\u002Fdraw-a-ui","SawyerHood","Draw a mockup and generate html for it","https:\u002F\u002Fdraw-a-ui.com",null,"TypeScript",13600,1632,99,35,0,5,18,3,44.64,"MIT License",false,"main",[25,26,27,28,29],"ai","gpt","openai","react","typescript","2026-06-12 02:02:17","# draw-a-ui\n\nThis is an app that uses tldraw and the gpt-4-vision api to generate html based on a wireframe you draw.\n\n> The spiritual successor to this project is [Terragon Labs](https:\u002F\u002Fterragonlabs.com).\n\n![A demo of the app](.\u002Fdemo.gif)\n\nThis works by just taking the current canvas SVG, converting it to a PNG, and sending that png to gpt-4-vision with instructions to return a single html file with tailwind.\n\n> Disclaimer: This is a demo and is not intended for production use. It doesn't have any auth so you will go broke if you deploy it.\n\n## Getting Started\n\nThis is a Next.js app. To get started run the following commands in the root directory of the project. You will need an OpenAI API key with access to the GPT-4 Vision API.\n\n> Note this uses Next.js 14 and requires a version of `node` greater than 18.17. [Read more here](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fpages\u002Fbuilding-your-application\u002Fupgrading\u002Fversion-14).\n\n```bash\necho \"OPENAI_API_KEY=sk-your-key\" > .env.local\nnpm install\nnpm run dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) with your browser to see the result.\n","draw-a-ui 是一个利用 tldraw 和 GPT-4 Vision API 根据手绘线框图生成 HTML 代码的应用。其核心功能是将用户绘制的界面草图转换为 PNG 图像，并通过调用 GPT-4 Vision API 生成包含 Tailwind CSS 的单个 HTML 文件，整个项目基于 TypeScript 开发并使用了 React 和 Next.js 框架。此工具非常适合前端开发者或设计师在原型设计阶段快速验证UI布局想法，但请注意，由于缺乏认证机制，该项目不建议直接用于生产环境。",2,"2026-06-11 03:26:38","top_topic"]