4 free tools that make your vibe-coded site look designed
Hey, it's Cindy 🌱 The gap between a vibe-coded site and a designed one is never the idea, it's the polish. Here are four free tools that close that gap fast.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
the polish stack
The four tools
🍉 Watermelon UI Open-source (MIT) and free. Copy-paste React components (buttons, cards, whole sections) that already look considered, so you stop hand-styling from scratch. Built on React and Tailwind. ui.watermelon.sh
✨ Motion Primitives Free, open-source animated React components built with Motion and Tailwind CSS. The public repository uses the MIT license. Add a focused reveal, hover response, or text effect without inventing the animation system from scratch. motion-primitives.com
🌊 Haikei Free, no signup. Generates unique SVG backgrounds (blobs, gradients, waves) so your hero section is not a flat block of colour. Export as SVG or PNG and drop it straight in. haikei.app
🎨 Realtime Colors Free. Test any palette plus font pairing on a real live layout before you build, so you commit to colours that actually work in context, not swatches on their own. Export the CSS when you like it. realtimecolors.com
choose your route
What works with your current stack
React and Tailwind project All four tools can fit. Watermelon UI and Motion Primitives provide code components, while Haikei and Realtime Colors supply assets and design tokens.
Plain HTML, Webflow, or another builder Use Realtime Colors and Haikei directly. Treat the component sites as visual references and ask Claude to recreate the idea in your actual stack.
Existing design system Keep its spacing, colour, and type tokens. Importing a component should not create a second visual language inside the page.
Starting from zero Build the static, accessible version first. Add animation only after the page hierarchy and mobile layout already work.
from blank to polished
The end-to-end workflow
1. Preview the palette on a real layout. In Realtime Colors, enter your text, background, primary, secondary, and accent colours. Test both the hero and lower sections instead of judging isolated swatches.
2. Export the colour tokens. Copy the CSS variables and ask Claude to map them to the project's existing theme file. Keep one accent colour for actions and links.
3. Make one background asset in Haikei. Pick a blob, wave, gradient, or layered shape. Enter the same palette, export SVG, and keep enough empty space for the headline.
4. Add the structural components. In a React and Tailwind project, choose the smallest Watermelon UI component that solves the layout problem. Read its dependency list, bring the source into the project, and restyle it with your tokens.
5. Add one motion primitive. Choose the moment that deserves movement, such as the hero text entering or proof cards revealing. Keep duration short and support reduced motion.
6. Run the boring checks. Test small phones, large screens, keyboard navigation, focus states, image loading, and contrast. A polished site that is hard to use is still unfinished.
💡 Do not paste React components into an incompatible project. Ask Claude to inspect the package file and styling setup first. If the site is not React and Tailwind, recreate the pattern with native components instead.
copy this
The polish-pass prompt
🌱 improve the design without breaking the site
Audit this website as a product designer and front-end engineer. First identify the framework, styling system, global theme files, and accessibility patterns already in use. Do not install or change anything until you show me that inventory.
Use these design inputs: text [HEX], background [HEX], primary [HEX], secondary [HEX], accent [HEX], and this Haikei SVG at [PATH]. Improve hierarchy, spacing, responsive layout, buttons, cards, and empty states while preserving the current content and functionality.
If this is a React and Tailwind project, you may use one Watermelon UI component for structure and one Motion Primitives component for the most important reveal. Explain each dependency before adding it, preserve visible keyboard focus, add prefers-reduced-motion behaviour, and show me the finished page at mobile and desktop widths.
the restraint test
Four signs the polish pass worked
The first action is obvious One primary button leads. Secondary actions look secondary instead of competing for attention.
The page has a rhythm Sections repeat consistent spacing, widths, card treatments, and heading sizes.
The background supports the copy The Haikei asset frames the content and keeps contrast high instead of sitting behind every word.
Motion has a job The animation reveals, confirms, or guides. It does not delay the visitor from using the page.
open the real tools
Links and source notes
Watermelon UI: public copy-paste React component registry. Its official repository identifies the project as MIT licensed.
Motion Primitives: animated components for React, Motion, and Tailwind. The official repository carries the MIT license.
Haikei: SVG design-asset generator for backgrounds and layered shapes.
Realtime Colors: preview colour and font choices on a working page before you commit them to the build.
the waitlist is now open
AI System Club is launching soon
Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.
btw this list gets first dibs the moment doors open :)