Once you have a solid design system in place, for React apps, the most efficient approach is often to design directly in code. This is particularly true for standard software products like SaaS applications.
The old downsides that no longer apply
At Quora, all designers were required to code as early as 2011. This had some upsides but looking back it created some severe downsides:
- We used to break the system system a lot less because new components were much more overhead to design.
- We implicitly gravitated towards smaller, more iterative changes when sometimes we needed a bigger redesign.
Code is now so cheap that this isn’t a problem any more.
Enforcement via Cursor Rules
One of the most useful things I do for the team is keep a cursor rules file that enforces the design system. It varies by project but the base version looks like this:
# Your rule content
- Always use ShadCN UI components when possible.
- Use Tailwind CSS for styles whenever possible.
- Avoid introducing new colors. There is an existing ShadCN UI theme. Reuse that.
- Trust default settings for margin, padding, roundedness and colors. don't add opinions like that each time.
- We are using a standard ShadCN themes including dark mode settings using :root and .dark. Always do colors in a way that respects dark mode.
- Check components/ for existing components for re-use and double check with the user if something seems reusable.Benefits
- Faster Iteration: Changes can be implemented and tested immediately, with rapid feedback loops
- Better Consistency: Direct use of design system components ensures adherence to standards
- Reduced Documentation: The code itself serves as documentation, eliminating need for redlines and handoffs
- Improved Collaboration: Designers and developers work in the same medium
- Representative Data: Especially important for AI products where content is the product - working directly with real data flows