A design canvas laid over your real product, where the edits leave as pull requests.
Mode connects to a repository and pulls existing screens onto a canvas built out of the actual components, tokens and data rather than recreations of them. You adjust layout, styling, copy, states and breakpoints, or ask it to explore variants, and what you land leaves as a scoped pull request written against the design system it read. The argument is that the work starts in the real product instead of at the top of a handoff chain.
- Canvas built from your repository
- Real components, tokens and data
- Every breakpoint at once
- Hover, error and loading states
- Changes leave as pull requests
- Pixel-compare canvas to production
Recent X Posts
Designers were never meant to stop at the mockup. At @UsePrelude, design worked directly on the real product. Engineering reviewed the result. It merged. This is what designing directly in your real product looks like.
The product you already shipped is a good place to design. Open a live screen in Mode. Work on it with the rest of the app still in view. Publish the change, or send it to engineering to review. #DesignEngineer
🚀 Figma Copy/Paste is live @Figma has given you great tools to design a prototype. We're extending the workflow directly into the product. Paste your Figma frames into the Mode canvas. Use familiar visual controls, to continue building in the real product codebase, and publish to GitHub instead of handing off for implementation. Bring your next change into Modeinspect ↓
There's something satisfying about watching the agent build on canvas in real-time 👀