Cloubie is a visual design canvas that connects to your existing codebase. Design with your real components on an infinite canvas. AI is constrained to your design system — no brand drift, no throwaway code. Changes become mergeable pull requests.
Design with Your Real Components
更简单的创作流程
云比把日常需求整理成精致的网站初稿；文字、图片和风格都能直接在页面上修改，不必接触代码。
MILK TEA · DAILY
用新鲜牛乳、真叶好茶和一点用心，治愈今天。
AI Constrained to Your Design System
Reference images, designs, and docs in chat. AI sees what you see — no more explaining from scratch. Outputs use your real components, colors, and tokens. No drift. No off-brand results.
Design on an Infinite Canvas
Drag, resize, and arrange elements directly on the canvas. See changes in real code instantly — no switching between tools. Point at what you want. AI knows exactly what you mean.
Your Colors, Fonts, and Tokens
AI is constrained to your design system. Pick from your brand colors, use your typography scales, and style with your existing tokens. No drift. No off-brand outputs.
Familiar to Designers. Trusted by Engineers.
A canvas that feels intuitive, with real code underneath. Engineers can merge what you create directly — no handoff, no rebuilding.
Design with what engineers built
Use the buttons, cards, and layouts your team already created. Not generic HTML — your actual design system, ready to drag onto the canvas.
Real-time collaboration
Share your canvas. Leave spatial comments. Work together on designs that become real PRs. No more "now how do I share this?"
Changes become pull requests
Your changes become a real pull request. Engineers review and merge — no handoff, no translation, no rebuilding from specs.
Navigate your component tree
See your React component hierarchy in a visual layer panel. Click any layer to select it on the canvas. No more hunting through JSX.
Connect existing projects
Connect your existing React or Next.js project. No rebuilding. No migration. Start designing in minutes.
Never lose your progress
Cloubie automatically saves project snapshots. Experiment with confidence — roll back to any previous version with one click.
Cloubie is a visual design canvas that connects to your existing codebase. Designers drag real components onto an infinite canvas, make changes visually, and submit pull requests — no coding required.
Traditional design tools create static mockups that must be rebuilt in code. Cloubie works with your real components — what you design IS the code. Changes become PRs, not handoff specs.
AI generators create new code from scratch. Cloubie constrains AI to YOUR existing components, so outputs match your design system. No translation, no drift.
No. Designers use a visual canvas with familiar tools. Real code runs underneath — you don't need to touch it unless you want to.
Yes. Share your canvas, leave spatial comments, and work together in real-time. Changes sync to code and can be submitted as PRs for engineers to review.
React, Next.js, and any CSS approach (Tailwind, CSS modules, styled-components). Works with any component library.