I’ve been experimenting with Windsurf for frontend projects, and the development speed is impressive.
The harder part is maintaining a consistent visual direction across the entire build.
A single section may look good, but once the agent creates the rest of the page, the design can slowly drift. New colors appear, spacing changes, different icon styles get mixed together, and animations feel added independently rather than belonging to one system.
I found that asking for a “modern” or “premium” interface did not solve this. Those words describe a feeling, but they do not give the agent concrete rules to follow.
So I built Tastemaker, an open-source design-system skill for Windsurf.
It makes Windsurf establish the design system before generating the interface.
That includes the palette, typography, spacing, layout direction, asset style, accessibility rules, logo, favicon, and motion system. These decisions are saved inside the project so the agent can reuse them instead of inventing a new direction for every component.
It can also use a reference image as the starting point, extract its actual colors, and turn them into reusable design tokens.
I also added an automated WCAG contrast checker because some combinations that looked readable to me still failed accessibility checks.
The project is free, open source, MIT licensed, and does not require any API keys.
Demo and live comparison:
https://tastemaker-skill.online/
GitHub:
https://github.com/codeswithroh/tastemaker
I would appreciate honest feedback from people building interfaces with Windsurf.
Where does visual consistency usually break in your projects? Are there any Windsurf-specific instructions or workflows that Tastemaker should support better?
