skillpack.co
← All skills

Onlook

active

Open-source, local-first WYSIWYG visual editor that writes directly to a Next.js + Tailwind codebase. 24,918 stars — highest in UX/UI category. 'Cursor for Designers' positioning. Bypasses Figma entirely for design-in-code workflows.

Connector
Composite
Complexity
designui

72/100

Trust

25K+

Stars

2

Evidence

Product screenshot

Onlook in action

Repo health

72/100

2w ago

Last push

353

Open issues

1,877

Forks

107

Contributors

Editorial verdict

Different lane from Figma MCP tools — not a Figma bridge, but a direct design-in-code editor. 24,918 stars and two HN hits above 200 points make this the most-starred tool in the UX/UI category. Best for frontend teams where designers work directly in the Next.js + Tailwind codebase and want to eliminate the Figma-to-code translation step.

Source

GitHub: onlook-dev/onlook

Public evidence

strong2025-05
Show HN: Onlook — open-source, local-first Webflow for your own app (408 pts)

408-point HN post (May 2025). Described as 'open-source, local-first Webflow for your own app.' Community validated the 'Cursor for Designers' positioning. Second HN hit in Aug 2024 at 227 points confirms sustained interest.

408 points on Hacker News — top-tier community validationHacker News community (independent)
strongSelf-reported2026-03
24,918 GitHub stars — highest in UX/UI category

Most-starred project in the UX/UI category — more stars than Framelink (13.7K). 1,877 forks indicate active community. Last commit 2026-02-27.

24,918 stars, 1,877 forksGitHub community (aggregate signal)

How does this compare?

See side-by-side metrics against other skills in the same category.

COMPARE SKILLS →

Where it wins

Most-starred tool in the UX/UI category (24,918 stars) — more than Framelink

Two HN hits above 200 points (408 pts May 2025, 227 pts Aug 2024) — top-tier community validation

Open-source, local-first — data never leaves the machine

1,877 forks — signals active community adaptation

Eliminates Figma-to-code translation step entirely for Next.js + Tailwind teams

Where to be skeptical

No Figma integration — different workflow assumption than Figma MCP tools

Tightly coupled to Next.js + Tailwind (not framework-agnostic)

Desktop app install required — no npm package

Last commit 2026-02-27 — development pace unclear

Ranking in categories

UX / UI

#04of 11

Frontend teams building in Next.js + Tailwind who want designers to work directly in the codebase

Know a better alternative?

Submit evidence and we'll run the full pipeline.

SUBMIT →

Similar skills

Framelink / Figma-Context-MCP

70

Community standard for feeding Figma design context to AI coding agents. 13.7K stars, 38.6K npm/week, 11+ editor support. Framework-agnostic descriptive JSON output, listed in Figma's own help docs.

Figma MCP Server Guide

62

Official Figma MCP. Trust leader with triple partnership (OpenAI Codex, GitHub Copilot, Claude Code), Code Connect integration, bidirectional since Mar 6 2026. 14 tools, 14+ client support, two server modes.

Figma Console MCP

59

Most comprehensive Figma MCP by tool count (57+: 22 read + 35+ write, 11 variable/token management). Uber Engineering Blog validates production uSpec usage across 7 stacks. Hockey-stick npm growth (127/wk Nov → 17.4K/wk Mar). Local WebSocket — no rate limits, data never leaves network.

Cursor Talk to Figma

57

Enterprise-trust write-access Figma MCP. Built by Grab ($12B+ market cap). Bypasses Figma API rate limits via plugin architecture. 6,505 stars, 699 forks. Listed in Cursor's official marketplace alongside Amplitude, AWS, Linear, Stripe.

Raw GitHub source

GitHub README peek

Constrained peek so you can sanity-check the source material without leaving the site.

<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --> <div align="center"> <img width="800" alt="header image" src="https://raw.githubusercontent.com/onlook-dev/onlook/main/assets/web-preview.png"> <h3 align="center">Onlook</h3> <p align="center"> Cursor for Designers <br /> <a href="https://docs.onlook.com"><strong>Explore the docs »</strong></a> <br /> </p> <p align="center"> 👨‍💻👩‍💻👨‍💻 <a href="https://www.ycombinator.com/companies/onlook/jobs/e4gHv1n-founding-engineer-fullstack">We're hiring engineers in SF!</a> 👩‍💻👨‍💻👩‍💻 </p> <br /> <a href="https://youtu.be/RSX_3EaO5eU?feature=shared">View Demo</a> · <a href="https://github.com/onlook-dev/onlook/issues/new?labels=bug&template=bug-report---.md">Report Bug</a> · <a href="https://github.com/onlook-dev/onlook/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a> </p> <!-- PROJECT SHIELDS --> <!-- *** I'm using markdown "reference style" links for readability. *** Reference links are enclosed in brackets [ ] instead of parentheses ( ). *** See the bottom of this document for the declaration of the reference variables *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use. *** https://www.markdownguide.org/basic-syntax/#reference-style-links --> <!-- [![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url] [![Apache License][license-shield]][license-url] -->

[![Discord][discord-shield]][discord-url] [![LinkedIn][linkedin-shield]][linkedin-url] [![Twitter][twitter-shield]][twitter-url]

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

</div>

An Open-Source, Visual-First Code Editor

Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

🚧 🚧 🚧 Onlook is still under development 🚧 🚧 🚧

We're actively looking for contributors to help make Onlook for Web an incredible prompt-to-build experience. Check the open issues for a full list of proposed features (and known issues), and join our Discord to collaborate with hundreds of other builders.

What you can do with Onlook:

  • Create Next.js app in seconds
    • Start from text or image
    • Use prebuilt templates
    • Import from Figma
    • Import from GitHub repo
    • Make a PR to a GitHub repo
  • Visually edit your app
    • Use Figma-like UI
    • Preview your app in real-time
    • Manage brand assets and tokens
    • Create and navigate to Pages
    • Browse layers
    • Manage project Images
    • Detect and use Components – Previously in Onlook Desktop
    • Drag-and-drop Components Panel
    • Use Branching to experiment with designs
  • Development Tools
    • Real-time code editor
    • Save and restore from checkpoints
    • Run commands via CLI
    • Connect with app marketplace
  • Deploy your app in seconds
    • Generate sharable links
    • Link your custom domain
  • Collaborate with your team
    • Real-time editing
    • Leave comments
  • Advanced AI capabilities
    • Queue multiple messages at once
    • Use Images as references and as assets in a project
    • Setup and use MCPs in projects
    • Allow Onlook to use itself as a toolcall for branch creation and iteration
  • Advanced project support
    • Support non-NextJS projects
    • Support non-Tailwind projects

Onlook-GitHub-Example

Getting Started

Use our hosted app or run locally.

Usage

Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.

Use the AI chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code.

<img width="600" alt="image" src="https://github.com/user-attachments/assets/4ad9f411-b172-4430-81ef-650f4f314666" /> <br>

Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

<img width="600" alt="image" src="https://raw.githubusercontent.com/onlook-dev/onlook/main/assets/insert-div.png"> <br>

Preview the code side-by-side with your site design.

<img width="600" alt="image" src="https://raw.githubusercontent.com/onlook-dev/onlook/main/assets/code-connect.png"> <br>
View on GitHub →