Onlook Workflows: Integrate with Claude Code, Cursor, and AI Coding Tools
Onlook adds a visual design layer to your AI coding workflow. Connect Onlook to the tools you already use — Claude Code, Cursor, and more. Design visually with your real components, then publish the result to a preview link or your own custom domain.
Available Integrations
- Claude Code — The visual canvas your AI workflow is missing. Claude Code builds it, Onlook lets you design it.
- Vibe Coding — AI-generated UIs are hard to review. Onlook gives them a canvas, your real components, and code you own.
- Cursor — Visual design layer for Cursor users (coming soon)
- Codex — Visual design layer for OpenAI Codex users (coming soon)
Key Benefits
- Visual canvas for AI-generated UIs — see and arrange your code spatially
- Design with your real components — buttons, cards, layouts your engineers already built
- Version history — roll back at any time
- Code you own — every change is written to real files in your project
- AI constrained to your design system — no brand drift
Workflows
Onlook fits into your stack
Connect Onlook to the tools you already use. Design visually, ship real code.
Claude Code
Claude Code writes the files from the terminal. Onlook opens the same files on a canvas so you can see what was built and adjust it by hand.
Available now
Vibe Coding
Vibe coding has a review problem: you read back generated code instead of seeing the page. Onlook gives it a canvas, your design tokens, and code you own.
Available now
Codex
Visual design layer for OpenAI Codex users. Coming soon.
Coming Soon