Your components. Your next idea.
Build on the UI components, styles, and patterns already in your codebase. Use Hexby to explore your app visually and work with your coding agent to refine existing screens or create new ones.
Existing components. Real source. Room for your next idea.
The problem with a separate design file
Your app changes with every iteration. Hexby gives you a visual canvas to explore your real UI and refine it with the coding agents you already use.
One UI in your app. Another in your design file.
When developers change a button, form, or layout, someone has to update the design file too. Until then, you’re designing with an older version.
Every time the app changes
Then do it again with the next change.
Keep recreating and checking UI that already exists in your app.
Design with the UI that’s already built.
Open your project in Hexby. See its actual screens and components, then work with your coding agent to improve them.
Start with what your team already ships
Your codebase becomes the actual visual design environment.
Built into your product
Hexby gives you a visual workspace to explore the UI components and screens already in your project. Start with an existing screen, see how its components fit together, and build on the implementations your team already uses.
No need to recreate them in a separate design file or piece together what’s changed since it was last updated. Whether you’re refining a layout or exploring a new feature, you start with the components, patterns, and context of your actual product.
Discover what’s already there
Browse the pieces your app already uses, inspect their previews and code, and see how they connect to your screens.
Browse your existing buttons, forms, cards, and navigation together on one canvas.
Browse the UI already in your project.
Trace connections between reusable components and the screens that rely on them.
Follow the connections back to the screens that use them.
See its rendered preview alongside the source code to understand how it works.
Get to know a component before you change it.
Component View
Open any component on its own to see it rendered in your app. Use Change controls to try different props and states, ask your agent to iterate in chat, and inspect the source code as you work.
Each update appears in the preview, helping you understand how the component behaves and how it is built before you decide what to change next.
Localhost App⌄
✦ Superhost♡Bridlepath, Ontario, Canada
1export function ListingItem(props) {2 return (3 <article className="listing">4 {props.showSuperhostTag && (5 <SuperhostBadge />6 )}7 <ListingDetails {...props} />8 </article>9 );10}1.listing {2 display: grid;3 gap: 12px;4 border-radius: 12px;5 background: white;6 overflow: hidden;7}A Hexby Component View demonstration: a coding agent refines a listing component, the showSuperhostTag prop changes, and the component source code opens.
Props, chat, preview, and code in one view.
Explore with Hexby
Use the AI agents you already work with to explore new flows, compare alternatives, polish the details, or match your UI to a Figma design. Start with your existing UI, then review and refine each idea in Hexby.
One card. Three new directions.
★ SuperhostMississauga, Ontario, Canada
The original photo and listing details.
★ SuperhostMississauga, Ontario, Canada
More room to scan the stay details.
★ SuperhostName and nightly price take the lead.
★ SuperhostMississauga, Ontario, Canada
Amenities and a clear next action together.
Swipe to compare previews
Explore new directions with the components already in your project.
How it works
Bring the codebase into Hexby, explore its UI, work with your agent, then review the changes.
Browse screens and components, and inspect the pieces relevant to your task.
Use Claude Code, Codex, Cursor and other preferred agents.
Share a board with before-and-after screens, a brief, and change notes. Collect feedback and approval, then create a GitHub pull request for developer review.
Frequently Asked Questions
Explore how Hexby fits into your existing product and development workflow.
Hexby is a visual design workspace for teams whose product UIs live in code. It turns an existing frontend codebase into a visual canvas where you can explore screens and components, try design alternatives, and refine interfaces using your existing AI coding agents. Unlike a traditional design-first workflow, Hexby lets you work with the UI that already exists in your codebase, without having to recreate it in a separate design file. You can watch a demo of the Hexby workspace here.
Hexby turns your existing frontend codebase into a visual workspace for exploring your application's pages and components. Instead of navigating source files to understand the UI, you can inspect rendered interfaces, explore component relationships and identify areas to improve. This helps designers, product managers and developers understand and work on coded UIs visually. You can explore the Hexby workspace in the product tour here.
Hexby brings a visual design workflow to products built directly in code by AI coding agents. Connect your project, explore the UI on a visual canvas, experiment with layouts and components, and use your existing coding agent to implement changes. You can move between visual exploration and code implementation without first recreating your application in a separate design tool. You can explore different design directions here.
Hexby helps you refine AI-generated applications after the initial build. Bring your project into a visual workspace, explore alternative layouts, improve components and polish the interface using your existing AI coding agent. Instead of rebuilding the application from scratch, you can iterate on the UI of the product you have already created. You can learn how to open your existing project here.
Yes. Hexby brings visual UI exploration and iteration into your existing AI coding workflow. Work with your application's screens and components, identify the changes you want to make, and use your connected coding agent to implement them in code. You can continue using your existing agent and its subscription rather than switching to a separate AI coding agent provided by Hexby. You can find the AI assistant integration guide here.
Hexby lets you explore alternative UI directions using your existing application as the starting point. Experiment with layouts, screens and components, review visual changes against the current interface, and refine your preferred direction with your AI coding agent. This helps teams evaluate design options before deciding which changes to implement in their codebase. You can learn how to explore and compare design ideas here.
Hexby gives designers and product managers a visual workspace for understanding and refining an existing application's UI. They can explore screens and components, communicate desired changes and work with an AI coding agent to implement improvements. Teams can review visual changes together and hand approved work back to developers through their existing development workflow. You can learn about visual review and developer handoff here.
Yes. Hexby creates a visual workspace from your existing frontend project so you can explore the UI that has already been implemented. You can inspect pages and components, understand how the interface is structured, and iterate on the existing product using your AI coding agent. Your codebase remains the source of truth, rather than requiring you to manually recreate each screen in a separate design file. You can find project requirements and setup instructions here.
Hexby helps you explore the pages and components that make up your application, making it easier to understand how shared UI elements fit into the product. You can identify areas for refinement, explore changes to reusable components and work with your AI coding agent to implement improvements across the interface. This supports more consistent UI iteration within your existing codebase. You can learn how to give your AI agent design guidelines for consistent UI changes here.
Hexby gives teams a visual workspace for reviewing UI changes before they become part of the main product. You can compare the updated interface with the existing version, inspect proposed changes and collaborate with teammates on the result. When changes are ready, they can be handed back through your supported repository workflow for developer review and merging. You can learn how to review UI changes and hand them off for merging here.
Already built. Ready for more.
Improve your next screen with the UI components and patterns your team has already built.
Start designing with Hexby