We have been reconsidering how designers could directly contribute to large-scale Next.js applications without requiring deep expertise in JavaScript, Node.js, or React. Our incremental improvements have gradually pushed the boundaries, but the core paradigm remained unchanged: designers, no matter how talented, were still expected to follow the same developer-centric workflows.
Today, we’re excited to share how Design Mode, built on Cursor and powered by Cursor Rule, is bringing a new designer-first experience to Next.js projects.
We have published Cursor Rule in our GitHub repository, so please try it out. It looks like this:
With Design Mode, even those with minimal exposure to the traditional Next.js stack (Node.js, TypeScript, React, and the like) can now implement and verify design changes directly within a codebase spanning tens of thousands of lines. The result: a workflow that empowers designers to shape the look and feel of production applications from within Cursor.
Design Mode is just a cursor rule, text file. You can check it on github since our product is fully open source.
Real-World Example: Designer-Driven UI Update
Let me share a quick story. Last week, our designer created a pull request that prototypes sharing UI . In the old days, this would have meant a Figma handoff, a ticket in GitHub, and a developer slotting the change into their already-packed sprint.
With Design Mode, our designer opened Cursor, typed design mode, and followed the prompts. The Rule walked her through cleaning up stray servers, checking out a fresh branch, and syncing environment variables. She found the relevant CSS and React Components, made her changes, and launched the dev server—all without leaving Cursor. Within minutes, she was previewing her update in a live environment, and with a single command, she pushed her branch and opened a pull request.
No bottlenecks, no handoffs, no waiting. The change was reviewed and merged the same day.
| Workflow | Time Required | Led By | Communication Needed |
|---|---|---|---|
| Without Design Mode | 8-10 Hours | Engineer | High Volume |
| With Design Mode | Minutes | Designer | Minimal |
Why Design Mode + Cursor Rule Is a Game Changer
There are plenty of tools that promise to “democratize” development, but most fall short when it comes to real-world projects. Here’s why Design Mode, powered by Cursor Rule, actually delivers:
- Designer-First Workflow: The experience is tailored for designers, not developers. No jargon, no assumptions about prior knowledge — just clear, actionable steps.
- Safe Boundaries: By scoping changes to look and feel, the Rule protects the integrity of the codebase while empowering designers to make meaningful contributions.
- Automated Setup: Environment variables, dependencies, server ports — handled automatically. Designers can focus on design, not on troubleshooting.
- Repeatable and Reliable: Every step is codified, every requirement explicit. No more “it works on my machine” mysteries.
- Open Source and Extensible: The Rule is just a text file. You can read it, tweak it, and share improvements with the community.
Try It Yourself
If you’re a designer who’s ever felt locked out of the codebase, or a developer tired of playing telephone with design specs, I urge you: try Design Mode. The setup is trivial, the learning curve gentle, and the payoff immediate. You’ll spend less time fighting the stack and more time bringing your vision to life.
Have you tried Design Mode or a similar workflow? I’d love to hear your stories — successes, struggles, and everything in between.