VibeDesigner has 106 color palettes. None of them are yours
By The WAALEE Team · · 4 min read
Two small tools landed in the same lane this month, both trying to stop Cursor, Bolt, Lovable and v0 from inventing a look on the spot. VibeDesigner hands the agent a design spec picked from a library: page type, style, palette, exported as exact CSS values. DesignScan, a local npm package and MCP server, does something that sounds similar but isn't: it reads the computed styles off a URL you give it and turns those into the same kind of token file. One is a style you choose. The other is a style you already have. Worth being clear on which problem each one actually solves, because they don't solve the same one.
VibeDesigner: pick a style, get a spec
VibeDesigner's pitch, per its own Product Hunt listing, is a library of 10 page types, 18 design styles and 106 color palettes. You pick combinations close to what you want, and it generates a design spec with exact CSS tokens, colors, spacing, type, ready to paste straight into Cursor, Bolt, Lovable or v0. That's a real fix for the blank-prompt problem: instead of typing "make it modern and clean" and letting the model guess, you're handing it concrete values up front. The agent stops inventing a purple gradient because you already told it exactly what to use.
DesignScan: point it at a URL, read what's actually there
DesignScan runs as a local MCP server, added with a plain `claude mcp add designscan -- npx -y @designscan/extractor`, no API key, nothing leaves your machine. Its npm listing describes the flow as URL in, design tokens out, normalized into a DESIGN.md, W3C JSON, or CSS variables, whichever format the agent or the rest of your pipeline expects. It also reports extraction warnings, a bot challenge blocking the page, a site that renders almost nothing without JavaScript, so the agent knows when a read came back thin instead of silently trusting a broken scrape. The output format looks a lot like VibeDesigner's spec file. The input is the opposite: not a choice from a library, a reading of a page that already exists.
- VibeDesigner: 106 preset palettes and 18 styles, combined into a spec. The values are real CSS, but they belong to whoever built the preset library, not to you.
- DesignScan: reads computed styles off a live URL, locally, with warnings when the read is unreliable. The values are real because they came off your actual page.
- Both output the same kind of thing in the end, tokens an agent can paste in instead of guessing. Only one of them is describing a brand that already exists.
A preset is still someone's choice, just not yours
Here's the part worth sitting with. A palette from a library of 106 is still a real, deliberate color choice, someone thought about contrast and mood when they built it. That's genuinely better than a model's default gradient. But it's also not your brand any more than a Dribbble screenshot is. If you already have a site, a logo, a Figma file, anything with your actual colors and type in it, starting from a preset means throwing that away and borrowing someone else's taste instead of using your own. VibeDesigner is the right tool when you're starting from nothing and need a decent-looking starting point fast. It's the wrong tool the moment you already have a brand to be consistent with.
When extraction is the right call instead
DesignScan's whole premise only works when there's a real page to point it at. A founder redesigning an existing product, a team matching a new feature to a site that's already live, anyone who wants the new thing to look like the old thing rather than like a fresh preset, that's the case for reading instead of picking. The tradeoff is the one DesignScan is honest about in its own warnings: a page behind a bot check or one that renders nothing without JavaScript gives you a bad read, and a bad read that gets treated as good is worse than no read at all.
Three ways to get design values in front of an AI coding tool, depending on whether you're starting fresh or matching something that already exists:
- VibeDesigner: Library of 10 page types, 18 styles and 106 color palettes, combined into a CSS spec for Cursor, Bolt, Lovable or v0. No site required, but the values aren't yours.
- DesignScan: Local npm package and MCP server. Reads computed styles off a real URL, outputs DESIGN.md, W3C tokens or CSS, with warnings when a page didn't read cleanly.
- WAALEE: Paste a live URL and get real colors, type and spacing back as W3C tokens and AI-ready prompts already shaped for Claude, Lovable, v0, Cursor and Bolt, no library to pick from.
Neither tool here is doing anything wrong. A preset library turns a blank page into a decent one fast, and a local extractor that warns you when its own read is shaky is more honest than most tools in this space. The question to ask before opening either one is simple: does a version of this brand already exist somewhere I can point a tool at, or am I actually starting from zero. If it's the first, read it. If it's the second, a good preset beats a bad guess every time.