Sat, October 1701:30Open SourceMCP & Skills AI coding Open source MCP & Skills guide

Onlook releases open-source visual editor: design directly on Next.js code with AI

Decision Brief

What changedOnlook has open-sourced a visual code editor on GitHub for designers and visual engineers, enabling AI-driven edits to the browser DOM with synced code changes in Next.js + TailwindCSS projects.

Why it mattersFrontend developers using Next.js and TailwindCSS can now drag and adjust DOM elements in the browser with a visual editor while code updates in sync—essentially overlaying a Figma-style interface on real code; MCP and branch management support means teams can plug design iterations directly into existing dev workflows.

Who should careOpen-source model users, Agent builders

Affected stackMCPSupabase

Builder actionUpdate MCP to the latest version

Source confidenceHigh · Official release / blog / repo

Onlook is an open-source, visual-first code editor aimed at AI-native designers and visual engineers. It supports direct visual editing in the browser DOM while keeping code in real-time sync. It currently focuses on the Next.js and TailwindCSS stack, but the architecture can extend to any declarative DOM language or framework. Core features include generating Next.js apps from text or images, a Figma-style interface, a draggable component panel, branch management for experimental designs, live preview, AI chat-based code editing, and MCP tool invocation. The tech stack uses Next.js, TailwindCSS, tRPC, Supabase, Drizzle, AI SDK, OpenRouter, Morph Fast Apply, CodeSandbox SDK, Freestyle, Bun, and Docker.

Summary basis: full article readCompiled from the source scope noted above; the original remains authoritative.

Sources

Skill Radar（GitHub 趋势）
Trending hands-on MCP servers, agent skills, and AI-coding tools discovered from GitHub search momentum.
GitHub：onlook-dev/onlook

Related intel

留言

登入后即可留言，和其他 builder 交换实测心得。

还没有留言，抢头香。