[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-onlook-dev--onlook":3,"tool-onlook-dev--onlook":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":70,"readme_en":71,"readme_zh":72,"quickstart_zh":73,"use_case_zh":74,"hero_image_url":75,"owner_login":76,"owner_name":77,"owner_avatar_url":78,"owner_bio":79,"owner_company":80,"owner_location":80,"owner_email":81,"owner_twitter":82,"owner_website":83,"owner_url":84,"languages":85,"stars":108,"forks":109,"last_commit_at":110,"license":111,"difficulty_score":112,"env_os":113,"env_gpu":114,"env_ram":114,"env_deps":115,"category_tags":127,"github_topics":128,"view_count":148,"oss_zip_url":80,"oss_zip_packed_at":80,"status":16,"created_at":149,"updated_at":150,"faqs":151,"releases":181},2483,"onlook-dev\u002Fonlook","onlook","The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI","Onlook 是一款专为设计师打造的开源 AI 优先设计工具，被誉为“设计师版的 Cursor”。它旨在打破设计与开发之间的壁垒，让用户能够以可视化的方式直接构建、样式化和编辑 React 应用。通过 Onlook，用户无需深入编写复杂代码，即可在类似 Figma 的直观界面中完成网页原型的搭建与调整，并实时预览最终效果。\n\n这款工具主要解决了传统工作流中设计稿到代码转换效率低、沟通成本高的问题。以往，设计师使用 Figma 等工具完成设计后，需要开发人员手动将其转化为代码，过程繁琐且容易出错。Onlook 允许用户直接在浏览器 DOM 中进行可视化编辑，底层自动生成基于 Next.js 和 TailwindCSS 的高质量代码，实现了“所见即所得”的开发体验。它不仅支持从文本或图像快速生成应用，还具备分支管理、资源管理及一键部署等功能，极大地简化了从创意到成品的流程。\n\nOnlook 特别适合前端开发者、UI\u002FUX 设计师以及希望快速验证产品创意的独立开发者使用。对于设计师而言，它降低了参与前端开发的门槛；对于开发者来说，它提供了一个高效的视觉化调试和原型构建环境。其核心技术亮点在于","Onlook 是一款专为设计师打造的开源 AI 优先设计工具，被誉为“设计师版的 Cursor”。它旨在打破设计与开发之间的壁垒，让用户能够以可视化的方式直接构建、样式化和编辑 React 应用。通过 Onlook，用户无需深入编写复杂代码，即可在类似 Figma 的直观界面中完成网页原型的搭建与调整，并实时预览最终效果。\n\n这款工具主要解决了传统工作流中设计稿到代码转换效率低、沟通成本高的问题。以往，设计师使用 Figma 等工具完成设计后，需要开发人员手动将其转化为代码，过程繁琐且容易出错。Onlook 允许用户直接在浏览器 DOM 中进行可视化编辑，底层自动生成基于 Next.js 和 TailwindCSS 的高质量代码，实现了“所见即所得”的开发体验。它不仅支持从文本或图像快速生成应用，还具备分支管理、资源管理及一键部署等功能，极大地简化了从创意到成品的流程。\n\nOnlook 特别适合前端开发者、UI\u002FUX 设计师以及希望快速验证产品创意的独立开发者使用。对于设计师而言，它降低了参与前端开发的门槛；对于开发者来说，它提供了一个高效的视觉化调试和原型构建环境。其核心技术亮点在于将可视化编辑器与实时代码同步相结合，既保留了图形界面的易用性，又确保了代码的可维护性和专业性。目前该项目仍在积极开发中，作为一个开源替代品，它为寻求比 Bolt.new 或 V0 更灵活、可控的用户提供了新的选择。","\u003C!-- Improved compatibility of back to top link: See: https:\u002F\u002Fgithub.com\u002Fothneildrew\u002FBest-README-Template\u002Fpull\u002F73 -->\n\n\u003Cdiv align=\"center\">\n\u003Cimg width=\"800\" alt=\"header image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_cbb2a990be76.png\">\n\u003Ch3 align=\"center\">Onlook\u003C\u002Fh3>\n  \u003Cp align=\"center\">\n    Cursor for Designers\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fdocs.onlook.com\">\u003Cstrong>Explore the docs »\u003C\u002Fstrong>\u003C\u002Fa>\n    \u003Cbr \u002F>\n  \u003C\u002Fp>\n  \u003Cp align=\"center\">\n    👨‍💻👩‍💻👨‍💻\n    \u003Ca href=\"https:\u002F\u002Fwww.ycombinator.com\u002Fcompanies\u002Fonlook\u002Fjobs\u002Fe4gHv1n-founding-engineer-fullstack\">We're hiring engineers in SF!\u003C\u002Fa>\n    👩‍💻👨‍💻👩‍💻\n  \u003C\u002Fp>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FRSX_3EaO5eU?feature=shared\">View Demo\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002Fnew?labels=bug&template=bug-report---.md\">Report Bug\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002Fnew?labels=enhancement&template=feature-request---.md\">Request Feature\u003C\u002Fa>\n  \u003C\u002Fp>\n  \u003C!-- PROJECT SHIELDS -->\n\u003C!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https:\u002F\u002Fwww.markdownguide.org\u002Fbasic-syntax\u002F#reference-style-links\n-->\n\u003C!-- [![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![Apache License][license-shield]][license-url] -->\n\n[![Discord][discord-shield]][discord-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n[![Twitter][twitter-shield]][twitter-url]\n\n[中文](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=zh) |\n[Español](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=es) |\n[Deutsch](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=de) |\n[français](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=fr) |\n[Português](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=pt) |\n[Русский](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ru) |\n[日本語](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ja) |\n[한국어](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ko)\n\n\u003C\u002Fdiv>\n\n# An Open-Source, Visual-First Code Editor\n\nCraft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make\nedits directly in the browser DOM with a visual editor. Design in realtime with\ncode. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma\nMake, Webflow, etc.\n\n### 🚧 🚧 🚧 Onlook is still under development 🚧 🚧 🚧\n\nWe're actively looking for contributors to help make Onlook for Web an\nincredible prompt-to-build experience. Check the\n[open issues](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues) for a full list of\nproposed features (and known issues), and join our\n[Discord](https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH) to collaborate with hundreds of other\nbuilders.\n\n## What you can do with Onlook:\n\n- [x] Create Next.js app in seconds\n  - [x] Start from text or image\n  - [x] Use prebuilt templates\n  - [ ] Import from Figma\n  - [ ] Import from GitHub repo\n  - [ ] Make a PR to a GitHub repo\n- [x] Visually edit your app\n  - [x] Use Figma-like UI\n  - [x] Preview your app in real-time\n  - [x] Manage brand assets and tokens\n  - [x] Create and navigate to Pages\n  - [x] Browse layers\n  - [x] Manage project Images\n  - [x] Detect and use Components – _Previously in\n        [Onlook Desktop](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fdesktop)_\n  - [ ] Drag-and-drop Components Panel\n  - [x] Use Branching to experiment with designs\n- [x] Development Tools\n  - [x] Real-time code editor\n  - [x] Save and restore from checkpoints\n  - [x] Run commands via CLI\n  - [x] Connect with app marketplace\n- [x] Deploy your app in seconds\n  - [x] Generate sharable links\n  - [x] Link your custom domain    \n- [ ] Collaborate with your team\n  - [x] Real-time editing\n  - [ ] Leave comments\n- [ ] Advanced AI capabilities\n  - [x] Queue multiple messages at once\n  - [ ] Use Images as references and as assets in a project\n  - [ ] Setup and use MCPs in projects\n  - [ ] Allow Onlook to use itself as a toolcall for branch creation and iteration\n- [ ] Advanced project support\n  - [ ] Support non-NextJS projects\n  - [ ] Support non-Tailwind projects\n\n![Onlook-GitHub-Example](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_41fd8e763ef2.png)\n\n## Getting Started\n\nUse our [hosted app](https:\u002F\u002Fonlook.com) or\n[run locally](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Frunning-locally).\n\n### Usage\n\nOnlook will run on any Next.js + TailwindCSS project, import your project into\nOnlook or start from scratch within the editor.\n\nUse the AI chat to create or edit a project you're working on. At any time, you\ncan always right-click an element to open up the exact location of the element\nin code.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_f0c819ae8f2e.png\" \u002F>\n\n\u003Cbr>\n\nDraw-in new divs and re-arrange them within their parent containers by\ndragging-and-dropping.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_ca538e74c977.png\">\n\n\u003Cbr>\n\nPreview the code side-by-side with your site design.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_1bdec8dbc8c4.png\">\n\n\u003Cbr>\n\nUse Onlook's editor toolbar to adjust Tailwind styles, directly manipulate\nobjects, and experiment with layouts.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_437f32d37be7.png\" \u002F>\n\n## Documentation\n\nFor full documentation, visit [docs.onlook.com](https:\u002F\u002Fdocs.onlook.com)\n\nTo see how to Contribute, visit\n[Contributing to Onlook](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers) in our docs.\n\n## How it works\n\n\u003Cimg width=\"676\" alt=\"architecture\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_c32f6daa76cd.png\">\n\n1. When you create an app, we load the code into a web container\n2. The container runs and serves the code\n3. Our editor receives the preview link and displays it in an iFrame\n4. Our editor reads and indexes the code from the container\n5. We instrument the code in order to map elements to their place in code\n6. When the element is edited, we edit the element in our iFrame, then in code\n7. Our AI chat also has code access and tools to understand and edit the code\n\nThis architecture can theoretically scale to any language or framework that\ndisplays DOM elements declaratively (e.g. jsx\u002Ftsx\u002Fhtml). We are focused on\nmaking it work well with Next.js and TailwindCSS for now.\n\nFor a full walkthrough, check out our\n[Architecture Docs](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Farchitecture).\n\n### Our Tech Stack\n\n#### Front-end\n\n- [Next.js](https:\u002F\u002Fnextjs.org\u002F) - Full stack\n- [TailwindCSS](https:\u002F\u002Ftailwindcss.com\u002F) - Styling\n- [tRPC](https:\u002F\u002Ftrpc.io\u002F) - Server interface\n\n#### Database\n\n- [Supabase](https:\u002F\u002Fsupabase.com\u002F) - Auth, Database, Storage\n- [Drizzle](https:\u002F\u002Form.drizzle.team\u002F) - ORM\n\n#### AI\n\n- [AI SDK](https:\u002F\u002Fai-sdk.dev\u002F) - LLM client\n- [OpenRouter](https:\u002F\u002Fopenrouter.ai\u002F) - LLM model provider\n- [Morph Fast Apply](https:\u002F\u002Fmorphllm.com) - Fast apply model provider\n- [Relace](https:\u002F\u002Frelace.ai) - Fast apply model provider\n\n#### Sandbox and hosting\n\n- [CodeSandboxSDK](https:\u002F\u002Fcodesandbox.io\u002Fdocs\u002Fsdk) - Dev sandbox\n- [Freestyle](https:\u002F\u002Fwww.freestyle.sh\u002F) - Hosting\n\n#### Runtime\n\n- [Bun](https:\u002F\u002Fbun.sh\u002F) - Monorepo, runtime, bundler\n- [Docker](https:\u002F\u002Fwww.docker.com\u002F) - Container management\n\n## Contributing\n\n![image](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_00d30a7cc5bb.png)\n\nIf you have a suggestion that would make this better, please fork the repo and\ncreate a pull request. You can also\n[open issues](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues).\n\nSee the [CONTRIBUTING.md](CONTRIBUTING.md) for instructions and code of conduct.\n\n#### Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_0471d0012a24.png\" \u002F>\n\u003C\u002Fa>\n\n## Contact\n\n![image](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_98c1b8f21285.png)\n\n- Team: [Discord](https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH) -\n  [Twitter](https:\u002F\u002Ftwitter.com\u002Fonlookdev) -\n  [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fonlook-dev\u002F) -\n  [Email](mailto:contact@onlook.com)\n- Project:\n  [https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook)\n- Website: [https:\u002F\u002Fonlook.com](https:\u002F\u002Fonlook.com)\n\n## License\n\nDistributed under the Apache 2.0 License. See [LICENSE.md](LICENSE.md) for more\ninformation.\n\n\u003C!-- https:\u002F\u002Fwww.markdownguide.org\u002Fbasic-syntax\u002F#reference-style-links -->\n\n[contributors-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[contributors-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fgraphs\u002Fcontributors\n[forks-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[forks-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fnetwork\u002Fmembers\n[stars-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[stars-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fstargazers\n[issues-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[issues-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\n[license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[license-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fblob\u002Fmaster\u002FLICENSE.txt\n[linkedin-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-LinkedIn-black.svg?logo=linkedin&colorB=555\n[linkedin-url]: https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fonlook-dev\n[twitter-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Twitter-black?logo=x&colorB=555\n[twitter-url]: https:\u002F\u002Fx.com\u002Fonlookdev\n[discord-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Discord-black?logo=discord&colorB=555\n[discord-url]: https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH\n[React.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Freact-%2320232a.svg?logo=react&logoColor=%2361DAFB\n[React-url]: https:\u002F\u002Freactjs.org\u002F\n[TailwindCSS]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftailwindcss-%2338B2AC.svg?logo=tailwind-css&logoColor=white\n[Tailwind-url]: https:\u002F\u002Ftailwindcss.com\u002F\n[Electron.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FElectron-191970?logo=Electron&logoColor=white\n[Electron-url]: https:\u002F\u002Fwww.electronjs.org\u002F\n[Vite.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvite-%23646CFF.svg?logo=vite&logoColor=white\n[Vite-url]: https:\u002F\u002Fvitejs.dev\u002F\n[product-screenshot]: assets\u002Fbrand.png\n[weave-shield]: https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fapp.workweave.ai%2Fapi%2Frepository%2Fbadge%2Forg_pWcXBHJo3Li2Te2Y4WkCPA33%2F820087727&cacheSeconds=3600&labelColor=#131313\n[weave-url]: https:\u002F\u002Fapp.workweave.ai\u002Freports\u002Frepository\u002Forg_pWcXBHJo3Li2Te2Y4WkCPA33\u002F820087727\n","\u003C!-- 改进了返回顶部链接的兼容性：参见：https:\u002F\u002Fgithub.com\u002Fothneildrew\u002FBest-README-Template\u002Fpull\u002F73 -->\n\n\u003Cdiv align=\"center\">\n\u003Cimg width=\"800\" alt=\"header image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_cbb2a990be76.png\">\n\u003Ch3 align=\"center\">Onlook\u003C\u002Fh3>\n  \u003Cp align=\"center\">\n    设计师的光标\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fdocs.onlook.com\">\u003Cstrong>探索文档 »\u003C\u002Fstrong>\u003C\u002Fa>\n    \u003Cbr \u002F>\n  \u003C\u002Fp>\n  \u003Cp align=\"center\">\n    👨‍💻👩‍💻👨‍💻\n    \u003Ca href=\"https:\u002F\u002Fwww.ycombinator.com\u002Fcompanies\u002Fonlook\u002Fjobs\u002Fe4gHv1n-founding-engineer-fullstack\">我们在旧金山招聘工程师！\u003C\u002Fa>\n    👩‍💻👨‍💻👩‍💻\n  \u003C\u002Fp>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FRSX_3EaO5eU?feature=shared\">观看演示\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002Fnew?labels=bug&template=bug-report---.md\">报告 Bug\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002Fnew?labels=enhancement&template=feature-request---.md\">请求功能\u003C\u002Fa>\n  \u003C\u002Fp>\n  \u003C!-- 项目盾牌 -->\n\u003C!--\n*** 我使用 Markdown 的“引用风格”链接以提高可读性。\n*** 引用链接用方括号 [ ] 而不是圆括号 ( ) 括起来。\n*** 文档底部列出了贡献者 URL、分支 URL 等引用变量的声明，\n*** 这是一种可选的简洁语法，您可以选择使用。\n*** https:\u002F\u002Fwww.markdownguide.org\u002Fbasic-syntax\u002F#reference-style-links\n-->\n\u003C!-- [![贡献者][contributors-shield]][contributors-url]\n[![分支][forks-shield]][forks-url]\n[![星标][stars-shield]][stars-url]\n[![问题][issues-shield]][issues-url]\n[![Apache 许可证][license-shield]][license-url] -->\n\n[![Discord][discord-shield]][discord-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n[![Twitter][twitter-shield]][twitter-url]\n\n[中文](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=zh) |\n[Español](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=es) |\n[Deutsch](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=de) |\n[français](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=fr) |\n[Português](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=pt) |\n[Русский](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ru) |\n[日本語](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ja) |\n[한국어](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ko)\n\n\u003C\u002Fdiv>\n\n# 一款开源、以视觉为主的代码编辑器\n\n在 Next.js + TailwindCSS 中利用 AI 打造网站、原型和设计。通过可视化编辑器直接在浏览器 DOM 中进行编辑。实时设计，同时生成代码。它是 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等工具的开源替代方案。\n\n### 🚧 🚧 🚧 Onlook 仍在开发中 🚧 🚧 🚧\n\n我们正在积极寻找贡献者，共同打造 Onlook for Web 这一从提示到构建的卓越体验。请查看\n[开放议题](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues)，了解所有拟议功能（以及已知问题），并加入我们的\n[Discord](https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH)，与数百位其他开发者协作。\n\n## 使用 Onlook 可以做什么：\n\n- [x] 几秒钟内创建 Next.js 应用程序\n  - [x] 从文本或图片开始\n  - [x] 使用预建模板\n  - [ ] 从 Figma 导入\n  - [ ] 从 GitHub 仓库导入\n  - [ ] 向 GitHub 仓库提交 PR\n- [x] 可视化编辑您的应用程序\n  - [x] 使用类似 Figma 的界面\n  - [x] 实时预览您的应用\n  - [x] 管理品牌资产和样式变量\n  - [x] 创建并导航页面\n  - [x] 浏览图层\n  - [x] 管理项目图片\n  - [x] 检测并使用组件——此前已在\n        [Onlook Desktop](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fdesktop) 中实现_\n  - [ ] 拖放组件面板\n  - [x] 使用分支功能尝试不同的设计方案\n- [x] 开发工具\n  - [x] 实时代码编辑器\n  - [x] 从检查点保存和恢复\n  - [x] 通过 CLI 运行命令\n  - [x] 与应用市场连接\n- [x] 几秒钟内部署您的应用\n  - [x] 生成可分享的链接\n  - [x] 绑定自定义域名\n- [ ] 与团队协作\n  - [x] 实时编辑\n  - [ ] 发表评论\n- [ ] 高级 AI 功能\n  - [x] 一次排队发送多条消息\n  - [ ] 将图片用作参考和项目资产\n  - [ ] 在项目中设置和使用 MCP\n  - [ ] 允许 Onlook 自身作为工具调用来创建分支和迭代\n- [ ] 高级项目支持\n  - [ ] 支持非 NextJS 项目\n  - [ ] 支持非 Tailwind 项目\n\n![Onlook-GitHub-Example](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_41fd8e763ef2.png)\n\n## 开始使用\n\n使用我们的[托管应用](https:\u002F\u002Fonlook.com)或\n[本地运行](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Frunning-locally)。\n\n### 使用方法\n\nOnlook 可以运行在任何 Next.js + TailwindCSS 项目上，您可以将现有项目导入 Onlook，也可以在编辑器中从头开始。\n\n使用 AI 聊天来创建或编辑您正在处理的项目。任何时候，您都可以右键单击某个元素，直接打开该元素在代码中的位置。\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_f0c819ae8f2e.png\" \u002F>\n\n\u003Cbr>\n\n通过拖放方式绘制新的 div 并在父容器内重新排列它们。\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_ca538e74c977.png\">\n\n\u003Cbr>\n\n将代码与您的站点设计并排预览。\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_1bdec8dbc8c4.png\">\n\n\u003Cbr>\n\n使用 Onlook 的编辑器工具栏调整 Tailwind 样式、直接操作对象，并尝试不同的布局。\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_437f32d37be7.png\" \u002F>\n\n## 文档\n\n如需完整文档，请访问 [docs.onlook.com](https:\u002F\u002Fdocs.onlook.com)。\n\n如需了解如何贡献，请参阅我们的文档中的\n[参与 Onlook](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers) 部分。\n\n## 工作原理\n\n\u003Cimg width=\"676\" alt=\"architecture\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_c32f6daa76cd.png\">\n\n1. 当您创建应用时，我们会将代码加载到一个 Web 容器中。\n2. 容器运行并提供代码服务。\n3. 我们的编辑器接收预览链接并在 iFrame 中显示。\n4. 编辑器会读取并索引容器中的代码。\n5. 我们会对代码进行插桩，以便将元素映射回其在代码中的位置。\n6. 当元素被编辑时，我们会在 iFrame 中先编辑该元素，然后再更新代码。\n7. 我们的 AI 聊天也具有代码访问权限，并拥有理解和编辑代码的工具。\n\n从理论上讲，这种架构可以扩展到任何以声明式方式渲染 DOM 元素的语言或框架（例如 jsx\u002Ftsx\u002Fhtml）。目前，我们专注于使其与 Next.js 和 TailwindCSS 良好配合。\n\n有关完整说明，请参阅我们的\n[架构文档](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Farchitecture)。\n\n### 我们的技术栈\n\n#### 前端\n\n- [Next.js](https:\u002F\u002Fnextjs.org\u002F) - 全栈框架\n- [TailwindCSS](https:\u002F\u002Ftailwindcss.com\u002F) - 样式工具\n- [tRPC](https:\u002F\u002Ftrpc.io\u002F) - 服务器接口\n\n#### 数据库\n\n- [Supabase](https:\u002F\u002Fsupabase.com\u002F) - 身份验证、数据库、存储\n- [Drizzle](https:\u002F\u002Form.drizzle.team\u002F) - ORM 框架\n\n#### 人工智能\n\n- [AI SDK](https:\u002F\u002Fai-sdk.dev\u002F) - 大语言模型客户端\n- [OpenRouter](https:\u002F\u002Fopenrouter.ai\u002F) - 大语言模型提供商\n- [Morph Fast Apply](https:\u002F\u002Fmorphllm.com) - 快速申请模型提供商\n- [Relace](https:\u002F\u002Frelace.ai) - 快速申请模型提供商\n\n#### 沙盒与托管\n\n- [CodeSandboxSDK](https:\u002F\u002Fcodesandbox.io\u002Fdocs\u002Fsdk) - 开发沙盒\n- [Freestyle](https:\u002F\u002Fwww.freestyle.sh\u002F) - 托管服务\n\n#### 运行时\n\n- [Bun](https:\u002F\u002Fbun.sh\u002F) - 单仓库管理、运行时、打包工具\n- [Docker](https:\u002F\u002Fwww.docker.com\u002F) - 容器管理\n\n## 贡献\n\n![image](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_00d30a7cc5bb.png)\n\n如果你有任何改进建议，欢迎 fork 本仓库并提交 pull request。你也可以直接[提交 issue](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues)。\n\n请参阅 [CONTRIBUTING.md](CONTRIBUTING.md)，了解贡献指南和行为准则。\n\n#### 贡献者\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_0471d0012a24.png\" \u002F>\n\u003C\u002Fa>\n\n## 联系方式\n\n![image](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_readme_98c1b8f21285.png)\n\n- 团队：[Discord](https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH) -\n  [Twitter](https:\u002F\u002Ftwitter.com\u002Fonlookdev) -\n  [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fonlook-dev\u002F) -\n  [电子邮件](mailto:contact@onlook.com)\n- 项目：\n  [https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook)\n- 官网：[https:\u002F\u002Fonlook.com](https:\u002F\u002Fonlook.com)\n\n## 许可证\n\n本项目采用 Apache 2.0 许可证进行分发。更多信息请参阅 [LICENSE.md](LICENSE.md)。\n\n\u003C!-- https:\u002F\u002Fwww.markdownguide.org\u002Fbasic-syntax\u002F#reference-style-links -->\n\n[contributors-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[contributors-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fgraphs\u002Fcontributors\n[forks-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[forks-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fnetwork\u002Fmembers\n[stars-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[stars-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fstargazers\n[issues-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[issues-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\n[license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[license-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fblob\u002Fmaster\u002FLICENSE.txt\n[linkedin-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-LinkedIn-black.svg?logo=linkedin&colorB=555\n[linkedin-url]: https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fonlook-dev\n[twitter-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Twitter-black?logo=x&colorB=555\n[twitter-url]: https:\u002F\u002Fx.com\u002Fonlookdev\n[discord-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Discord-black?logo=discord&colorB=555\n[discord-url]: https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH\n[React.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Freact-%2320232a.svg?logo=react&logoColor=%2361DAFB\n[React-url]: https:\u002F\u002Freactjs.org\u002F\n[TailwindCSS]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftailwindcss-%2338B2AC.svg?logo=tailwind-css&logoColor=white\n[Tailwind-url]: https:\u002F\u002Ftailwindcss.com\u002F\n[Electron.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FElectron-191970?logo=Electron&logoColor=white\n[Electron-url]: https:\u002F\u002Fwww.electronjs.org\u002F\n[Vite.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvite-%23646CFF.svg?logo=vite&logoColor=white\n[Vite-url]: https:\u002F\u002Fvitejs.dev\u002F\n[product-screenshot]: assets\u002Fbrand.png\n[weave-shield]: https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fapp.workweave.ai%2Fapi%2Frepository%2Fbadge%2Forg_pWcXBHJo3Li2Te2Y4WkCPA33%2F820087727&cacheSeconds=3600&labelColor=#131313\n[weave-url]: https:\u002F\u002Fapp.workweave.ai\u002Freports\u002Frepository\u002Forg_pWcXBHJo3Li2Te2Y4WkCPA33\u002F820087727","# Onlook 快速上手指南\n\nOnlook 是一款专为设计师和开发者打造的开源可视化代码编辑器，被誉为“设计师版的 Cursor”。它支持在浏览器中直接对 Next.js + TailwindCSS 项目进行可视化编辑，并实时同步代码。\n\n## 1. 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **操作系统**：Windows、macOS 或 Linux\n*   **Node.js**：建议安装最新 LTS 版本（用于运行 Next.js 项目）\n*   **包管理器**：npm、yarn、pnpm 或 bun\n*   **框架依赖**：Onlook 目前主要支持 **Next.js** 配合 **TailwindCSS** 的项目。\n\n> **注意**：Onlook 仍处于积极开发阶段（Beta），主要功能集中在 Next.js 和 TailwindCSS 生态系统中。\n\n## 2. 安装与启动\n\n你可以选择直接使用官方托管服务，或在本地运行以获得更完整的控制权。\n\n### 方式一：使用官方托管服务（推荐新手）\n\n无需配置本地环境，直接访问网页即可使用：\n\n1.  访问 [Onlook Hosted App](https:\u002F\u002Fonlook.com)\n2.  登录账号并开始创建项目。\n\n### 方式二：本地运行（适合开发者）\n\n如果你希望本地部署或贡献代码，请按以下步骤操作：\n\n1.  **克隆仓库**\n    ```bash\n    git clone https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook.git\n    cd onlook\n    ```\n\n2.  **安装依赖**\n    Onlook 使用 Bun 作为运行时和包管理器，请确保已安装 Bun。\n    ```bash\n    bun install\n    ```\n\n3.  **启动开发服务器**\n    ```bash\n    bun run dev\n    ```\n\n4.  **访问应用**\n    打开浏览器访问 `http:\u002F\u002Flocalhost:3000`（具体端口请参考终端输出）。\n\n*详细本地运行文档请参考：[Running Locally](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Frunning-locally)*\n\n## 3. 基本使用\n\n### 创建新项目\n\n1.  **从模板或文本生成**：\n    *   在 Onlook 界面中，你可以输入自然语言描述（例如：“创建一个带有导航栏的英雄区域”），AI 将自动生成 Next.js + TailwindCSS 代码。\n    *   或者选择一个预建模板开始。\n\n2.  **导入现有项目**：\n    *   如果你已有 Next.js + TailwindCSS 项目，可以将其导入 Onlook 进行可视化编辑。\n\n### 可视化编辑\n\n*   **即时预览与修改**：\n    *   界面左侧为可视化画布，右侧为代码编辑器。\n    *   在画布上点击任意元素，右侧代码会自动定位到对应位置。\n    *   使用顶部工具栏调整 Tailwind 样式（如间距、颜色、排版），修改会实时反映在代码和预览中。\n\n*   **拖拽布局**：\n    *   可以通过拖拽在父容器中重新排列 `div` 或其他组件。\n    *   支持绘制新的 `div` 并嵌套到现有结构中。\n\n*   **AI 辅助开发**：\n    *   使用内置的 AI 聊天窗口，通过对话方式修改项目。例如：“把按钮变成红色”或“添加一个页脚”。\n    *   AI 拥有代码上下文权限，能理解并执行复杂的代码变更。\n\n*   **右键查看代码**：\n    *   在任何元素上右键单击，可选择“在代码中打开”，直接跳转到该元素的确切代码行。\n\n### 部署\n\n*   编辑完成后，可一键生成可分享的链接。\n*   支持绑定自定义域名，快速发布你的原型或网站。\n\n---\n\n*更多高级功能和架构细节，请访问 [Onlook 官方文档](https:\u002F\u002Fdocs.onlook.com)。*","某初创公司的 UI 设计师需要独立搭建一个营销活动落地页，要求基于 Next.js 和 Tailwind CSS 技术栈，且必须保证设计稿与最终代码的高度一致。\n\n### 没有 onlook 时\n- **沟通损耗巨大**：设计师在 Figma 中完成视觉稿后，需编写冗长的标注文档交给前端开发，双方常因间距、色值等细节理解偏差导致反复返工。\n- **实现效果失真**：传统“设计转代码”流程中，开发者手动编写 CSS 往往难以完美还原复杂的交互状态和响应式布局，最终页面与设计稿存在明显“像素级”差距。\n- **修改门槛极高**：若设计师想微调按钮圆角或调整板块顺序，必须等待开发人员修改代码并重新部署，一个简单的视觉调整可能耗时数小时甚至数天。\n- **技术断层明显**：设计师不懂 React 组件结构，无法直接干预代码逻辑，只能被动等待开发排期，严重拖慢产品迭代速度。\n\n### 使用 onlook 后\n- **可视化直接编辑**：设计师直接在浏览器中通过类 Figma 的界面操作 DOM 元素，实时调整样式和布局，onlook 自动同步生成标准的 Tailwind CSS 代码，无需中间传话。\n- **所见即所得**：在可视界面中进行的每一次拖拽或参数修改，都能即时预览真实运行效果，确保最终交付的代码与设计意图完全一致，消除还原度焦虑。\n- **即时迭代反馈**：设计师可自主完成文案替换、图片更换及样式微调，利用分支功能大胆尝试不同设计方案，确认无误后直接保存，将修改周期从“天”缩短至“分钟”。\n- **低代码无缝协作**：onlook 生成的代码符合工程规范，开发人员可直接接管后续逻辑开发，设计师也能通过理解组件结构更好地配合开发，打破职能壁垒。\n\nonlook 让设计师拥有直接操控代码的能力，将传统的“设计-开发”串行工作流转变为高效的并行协作，极大提升了前端原型的构建速度与质量。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fonlook-dev_onlook_41fd8e76.gif","onlook-dev","Onlook","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fonlook-dev_536ca334.png","Somewhere between dev and design",null,"contact@onlook.com","onlookdev","https:\u002F\u002Fonlook.com","https:\u002F\u002Fgithub.com\u002Fonlook-dev",[86,90,94,97,101,105],{"name":87,"color":88,"percentage":89},"TypeScript","#3178c6",99.2,{"name":91,"color":92,"percentage":93},"CSS","#663399",0.3,{"name":95,"color":96,"percentage":93},"JavaScript","#f1e05a",{"name":98,"color":99,"percentage":100},"PLpgSQL","#336790",0.2,{"name":102,"color":103,"percentage":104},"Dockerfile","#384d54",0,{"name":106,"color":107,"percentage":104},"HTML","#e34c26",25006,1890,"2026-04-03T01:50:49","Apache-2.0",4,"Linux, macOS, Windows","未说明",{"notes":116,"python":114,"dependencies":117},"该工具主要基于 Web 技术栈（Next.js + TailwindCSS），使用 Bun 作为运行时和包管理器，使用 Docker 进行容器管理。它不是一个传统的 Python AI 模型库，而是一个可视化的代码编辑器\u002F开发环境。运行本地版本需要安装 Bun 和 Docker。AI 功能通过 OpenRouter 等外部 LLM 提供商实现，而非本地运行大型模型，因此对本地 GPU 无特殊硬性要求。",[118,119,120,121,122,123,124,125,126],"Next.js","TailwindCSS","tRPC","Supabase","Drizzle","AI SDK","CodeSandboxSDK","Bun","Docker",[15,14,52,13],[129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147],"react","typescript","tailwindcss","nextjs","low-code","design","frontend","ui","figma","cursor","ide","cursor-ai","design-to-code","editor","vibe-coding","drizzle","supabase","ai","vibecoding",12,"2026-03-27T02:49:30.150509","2026-04-06T05:17:46.827827",[152,157,162,167,171,176],{"id":153,"question_zh":154,"answer_zh":155,"source_url":156},11441,"免费版的使用限制（速率限制）是多少？","免费用户每天有 5 条消息的限制。达到限制后，生成功能将暂时不可用。","https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002F1243",{"id":158,"question_zh":159,"answer_zh":160,"source_url":161},11442,"应用卡在“Waiting for the App to Start”（等待应用启动）界面怎么办？","这通常是服务端的一个已知问题。维护者已经合并了修复补丁并发布新版本。请尝试更新到最新版本的 Onlook 以解决此问题。","https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002F1333",{"id":163,"question_zh":164,"answer_zh":165,"source_url":166},11443,"如何在本地开发环境中解决数据库种子数据（db:seed）失败及登录问题？","如果在运行 `bun db:seed` 时遇到 Postgres 错误（如表不存在），或者随后无法登录，请注意不要使用默认的测试沙盒账户。建议创建一个新的沙盒环境进行测试，因为默认沙盒绑定的是用于测试的生产环境账户，可能会导致冲突或权限问题。","https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002F2353",{"id":168,"question_zh":169,"answer_zh":170,"source_url":156},11444,"Windows 用户运行命令时出现“'C:\\Users\\Mr' is not recognized...”错误如何解决？","该错误通常是由于用户名中包含空格（例如 'Mr Base'），导致命令行解析路径失败。虽然具体的变通方案可能需要通过 Discord 社区获取详细指导，但一般建议检查环境变量配置，或尝试将项目移动到不含空格的路径下运行，确保命令行工具能正确识别路径。",{"id":172,"question_zh":173,"answer_zh":174,"source_url":175},11445,"Onlook 支持哪些前端框架？如何快速初始化项目？","Onlook 支持 Next.js、Vite 和 Webpack 等项目框架。你可以使用 npx 脚本自动完成初始化，该脚本会自动检测项目框架、安装必要的 npm 包，并更新配置文件（如 next.config.js）以启用插件。相关 CLI 工具已发布在 npm (@onlook\u002Fcli)。","https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002F106",{"id":177,"question_zh":178,"answer_zh":179,"source_url":180},11446,"如何在设计模式（Design Mode）下编辑文本？","在设计模式下，双击文本元素即可进入编辑状态。单击文本外部区域可以保持选中状态但退出“文本编辑”模式。如果选中文本的一部分并调整样式，样式将仅应用于选中的部分。","https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002F91",[182,186,190,195,200,205,210,215,220,225,230,235,239,244,249,254,259,264,269,274],{"id":183,"version":184,"summary_zh":80,"released_at":185},61926,"v0.2.32","2025-07-17T18:36:21",{"id":187,"version":188,"summary_zh":80,"released_at":189},61927,"v0.2.31","2025-07-17T09:46:43",{"id":191,"version":192,"summary_zh":193,"released_at":194},61928,"v0.2.29","## 变更内容\n* Web 版本第 8 部分，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1782 中完成\n* 修复进入编辑模式时文本颜色不一致变化的问题，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1780 中完成\n* 解决已复制页面再次复制的功能问题，由 @SoloDevAbu 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1776 中完成\n* Tys 工具栏 v4，由 @thughey 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1786 中完成\n* 重构：更新品牌色命名，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1785 中完成\n* 杂项：错误嵌套按钮，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1790 中完成\n* 重构：更新图片管理器，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1784 中完成\n* 在样式面板中添加了 overflow 选项，由 @SoloDevAbu 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1793 中完成\n* 移动 overflow 输入框，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1800 中完成\n* 修复：从颜色选择器设置边框颜色时，边框粗细会隐藏的问题，由 @Nithishvb 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1805 中完成\n* 新特性：在开发选项卡中添加文件监听器，并实现自动更新已打开的修改文件功能，由 @iNerdStack 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1802 中完成\n* 使用 DomElementStyles，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1810 中完成\n\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.28...v0.2.29","2025-04-24T15:53:04",{"id":196,"version":197,"summary_zh":198,"released_at":199},61929,"v0.2.28","## 变更内容\n* 由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1774 中发布版本 v0.2.27\n* 重构：支持使用字体的撤销与重做操作，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1751 中完成\n* 新特性：更新页面元数据，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1766 中实现\n* 新特性：实现开发面板及 IDE 功能，由 @iNerdStack 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1740 中完成\n* 将 \u002Fapps\u002Fweb\u002Ftemplate 中的 next 从 14.2.25 升级至 14.2.26，由 @dependabot 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1778 中完成\n* Web 版本第 7 部分，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1775 中完成\n* 撤销 Studio 中的 frameid 变更，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1779 中完成\n\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.27...v0.2.28","2025-04-14T07:01:41",{"id":201,"version":202,"summary_zh":203,"released_at":204},61930,"v0.2.27","## 变更内容\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1758 中发布了 v0.2.26 版本\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1765 中创建了 Web 版本的编辑器服务器\n* @thughey 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1764 中完成了工具栏 v3 的一半工作\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1767 中完成了 Web 版本的第 6 部分\n* @devin-ai-integration 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1769 中向设置模态框添加了环境变量部分\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1772 中实现了对格式无效时的自我修复工具调用\n\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.26...v0.2.27","2025-04-12T01:11:03",{"id":206,"version":207,"summary_zh":208,"released_at":209},61931,"v0.2.26","## 变更内容\n* 由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1736 中发布版本 v0.2.25\n* Web 版本第 4 部分，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1730 中完成\n* Tys 工具栏主功能 - 进行中，由 @thughey 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1745 中开发\n* 重构：将 web 文件夹移至 web\u002Fclient 目录，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1746 中完成\n* Web 版本第 5 部分，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1747 中完成\n* 重构：在字体面板中使用 FlexSearch，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1749 中实现\n* 添加缺失的鼠标操作，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1750 中完成\n* 更新构建错误，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1755 中修复\n* 处理代理错误，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1757 中实现\n\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.25...v0.2.26","2025-04-09T07:41:40",{"id":211,"version":212,"summary_zh":213,"released_at":214},61932,"v0.2.25","## 变更内容\n* 由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1699 中发布版本 v0.2.24\n* 由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1702 中添加 Web 应用\n* 功能：字体面板配置，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1666 中实现\n* 开发模式下禁用 Web，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1718 中完成\n* 修复：新增颜色组时添加验证，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1703 中完成\n* 再次添加 Web，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1711 中完成\n* 修复复制颜色时的错误，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1720 中完成\n* Web 版本第 3 部分，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1722 中完成\n* 移除首次选中元素的功能，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1731 中完成\n* 功能：将字体应用到元素上，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1719 中实现\n* 将新的 div className 设置为 relative 而不是 absolute，由 @SoloDevAbu 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1639 中完成\n* 移除插入元素的位置信息，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1733 中完成\n* 修复透明度输入验证，由 @hamzahxx 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1732 中完成\n* 使图层面板值可为空，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1734 中完成\n* 添加 trainloop SDK，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1735 中完成\n\n## 新贡献者\n* @SoloDevAbu 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1639 中完成了首次贡献\n* @hamzahxx 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1732 中完成了首次贡献\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.24...v0.2.25","2025-04-05T20:09:59",{"id":216,"version":217,"summary_zh":218,"released_at":219},61933,"v0.2.24","## 变更内容\n* 修复编辑面板未完全隐藏的问题，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1695 中完成\n* 发布版本 v0.2.23，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1694 中完成\n* 撤销自由模式下的 prepareDir 修改，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1698 中完成\n\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.23...v0.2.24","2025-03-31T19:53:27",{"id":221,"version":222,"summary_zh":223,"released_at":224},61934,"v0.2.23","## 变更内容\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1679 中发布了 v0.2.22 版本\n* @Rupak182 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1692 中新增了粘性定位功能\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1693 中更新了文件监听器，并移除了省略线\n\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.22...v0.2.23","2025-03-31T08:02:37",{"id":226,"version":227,"summary_zh":228,"released_at":229},61935,"v0.2.22","\u003Cimg width=\"377\" alt=\"截图 2025-03-29 下午2:14:13\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd97da66a-01ef-46b4-83b9-ef581ba0c2e0\" \u002F>\n\n## 变更内容\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1676 中发布了 v0.2.21 版本\n* @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1678 中修复了默认品牌色的问题\n* @homebodify 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1677 中修复了韩语本地化问题\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1680 中添加了品牌翻译\n* @Wh1isper 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1682 中实现了将工具结果纳入聊天的功能\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1684 中增加了对工具结果的支持\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1685 中优化了自由式构建流程，使其更快\n* @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1681 中更新了品牌色选择器的搜索功能\n* @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1683 中修复了向分组中添加新颜色时出现的错误\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1686 中回滚了自由式源代码\n* @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1688 中修复了设置文本颜色时的错误\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1690 中更新了更改项目设置 URL 时的链接\n* @Rupak182 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1689 中在样式面板中新增了文本变换功能\n\n## 新贡献者\n* @Wh1isper 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1682 中完成了首次贡献\n* @Rupak182 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1689 中完成了首次贡献\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.21...v0.2.22","2025-03-29T21:15:56",{"id":231,"version":232,"summary_zh":233,"released_at":234},61936,"v0.2.21","## 变更内容\n* 由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1662 中发布版本 v0.2.20\n* 由 @devin-ai-integration 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1663 中改进 applyDiffs，使其能够更稳健地处理失败情况\n* 重构：在更新品牌色后刷新 WebView，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1665 中完成\n* 修复：防止 Tailwind 中出现重复变量，由 @spartan-vutrannguyen 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1671 中完成\n* 为 Linux 软件包修改配置，由 @rsamf 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1664 中完成\n* 应用面板、已安装应用及应用详情，由 @thughey 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1608 中实现\n* 禁用 precommit 钩子中的 elide lines，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1674 中完成\n* 添加品牌测试，由 @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1675 中完成\n\n## 新贡献者\n* @rsamf 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1664 中完成了首次贡献\n\n**完整变更日志**：https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.20...v0.2.21","2025-03-25T21:57:38",{"id":236,"version":237,"summary_zh":80,"released_at":238},61937,"v0.2.20-linux","2025-03-24T23:35:48",{"id":240,"version":241,"summary_zh":242,"released_at":243},61938,"v0.2.20","## 变更内容\n* @Kitenite 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1659 中发布了 v0.2.19 版本\n* @homebodify 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1657 中添加了韩语语言翻译文件\n\n## 新贡献者\n* @homebodify 在 https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1657 中完成了首次贡献\n\n**完整变更日志**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.19...v0.2.20","2025-03-22T06:12:34",{"id":245,"version":246,"summary_zh":247,"released_at":248},61939,"v0.2.19","## What's Changed\r\n* Releases\u002F0.2.18 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1653\r\n* Fix chat errors aren't showing by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1658\r\n* More persistent port checking by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1660\r\n* Check port before starting project by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1661\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.18...v0.2.19","2025-03-22T04:46:13",{"id":250,"version":251,"summary_zh":252,"released_at":253},61940,"v0.2.18","## What's Changed\r\n* Publish version v0.2.17 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1636\r\n* Add 1-second delay between restore changes and refresh webviews by @devin-ai-integration in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1634\r\n* refactor: using classname instead of hex value when using brand color by @spartan-vutrannguyen in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1629\r\n* Used more natural wording for \"play\" in Japanese translation by @takumi-1 in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1638\r\n* Upgrade electron to 35.0.2 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1640\r\n* Fix preload import by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1641\r\n* Only show console errors by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1642\r\n* Improve chatting with project by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1644\r\n* Improve settings modal and build with script by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1645\r\n* refactor: change position of brand popover by @spartan-vutrannguyen in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1648\r\n* feat: merge style action instead of replacing it by @spartan-vutrannguyen in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1647\r\n* Update Onlook prompt by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1646\r\n\r\n## New Contributors\r\n* @takumi-1 made their first contribution in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1638\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.17...v0.2.18","2025-03-20T06:11:58",{"id":255,"version":256,"summary_zh":257,"released_at":258},61941,"v0.2.17","## What's Changed\r\n* Publish version v0.2.16 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1622\r\n* added re-install dependencies by @iNerdStack in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1586\r\n* Fix spelling mistake by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1625\r\n* Better deploy error message handling by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1626\r\n* Save when sending messages, not when applying code by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1627\r\n* Fix toast should not be showing by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1628\r\n* File watcher improvements by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1631\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.16...v0.2.17","2025-03-18T05:32:01",{"id":260,"version":261,"summary_zh":262,"released_at":263},61942,"v0.2.16","## What's Changed\r\n* Publish version v0.2.15 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1606\r\n* Mac icon by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1610\r\n* Improve Chat + Applying code  by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1607\r\n* Color Panel style edits by @thughey in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1613\r\n* Sanding improvements to brand panel and settings by @drfarrell in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1620\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.15...v0.2.16","2025-03-17T04:53:28",{"id":265,"version":266,"summary_zh":267,"released_at":268},61943,"v0.2.15","## What's Changed\r\n* Releases\u002F0.2.14 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1601\r\n* Update Bun --elide-lines options by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1603\r\n* Make auth more persistent by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1604\r\n* Add auth unsubscribe to state change by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1605\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.14...v0.2.15","2025-03-15T07:25:40",{"id":270,"version":271,"summary_zh":272,"released_at":273},61944,"v0.2.14","## What's Changed\r\n* Releases\u002F0.2.13 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1585\r\n* Update no lint script default by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1597\r\n* refactor: update brand tab by @spartan-vutrannguyen in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1584\r\n* Refactor theme class by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1598\r\n* Fix saving bugs by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1599\r\n* Make saving non-block for deployment by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1600\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.13...v0.2.14","2025-03-14T02:17:32",{"id":275,"version":276,"summary_zh":277,"released_at":278},61945,"v0.2.13","## What's Changed\r\n* feat: read tailwind config and display by @spartan-vutrannguyen in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1524\r\n* Add setting to toggle bun replace command functionality by @devin-ai-integration in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1576\r\n* Publish version v0.2.12 by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1574\r\n* Add advanced settings for build flags and custom projects path by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1582\r\n* Advanced settings in create new project by @Kitenite in https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fpull\u002F1583\r\n\r\n\r\n**Full Changelog**: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fcompare\u002Fv0.2.12...v0.2.13","2025-03-12T04:29:37"]