DarnlyFree design tools for vibecoders
These tools are for people building an app or site with Claude Code, Codex or Cursor who want it to look deliberate instead of like every other AI-made page. Pull the colors and fonts from a site you like, turn them into a DESIGN.md or a shadcn/ui theme your agent can follow, check that your text has enough contrast, and see how your colors look to people with color blindness. There are also generators for gradients, shadows, buttons, loaders, animations, glass effects and fluid type, each giving you CSS or Tailwind to paste or hand to your agent.
- Font finderSee what fonts any website uses, whether they’re free, and copy them into your project.
- Color palette from imageThe main colors of any screenshot or logo, as hex, CSS and Tailwind.
- Website color finderGet any website’s color palette and CSS color variables, ready for CSS, Tailwind or your AI agent.
- DESIGN.md generatorTurn any website into a DESIGN.md style guide, so your AI agent builds in the same colors, fonts and spacing.
- Color contrast checkerIs your text readable? WCAG AA and AAA pass or fail, plus the nearest color that passes.
- Tailwind color shadesTurn one brand color into an even 50–950 Tailwind scale, ready for v4, v3 or CSS.
- CSS gradients and shadowsMake gradients with draggable colors and soft layered shadows, then copy CSS or Tailwind.
- Logo makerA simple logo from your project’s name, an icon, a font and colors. SVG, PNG, app icon and favicons.
- Hex to TailwindPaste any color and see the nearest Tailwind colors side by side, then copy the class.
- Color converterAny color as HEX, RGB, HSL, OKLCH, LAB, CSS name and Tailwind, with how it looks on white and black.
- CSS animations and keyframesPick fade, slide, bounce, shimmer or typing, tune the timing on a visual curve, copy CSS or Tailwind.
- shadcn/ui theme generatorPick a brand color, gray and corners, see real shadcn components change live in light and dark, copy globals.css.
- CSS button generatorDesign a button with hover and press, see it on light and dark pages, copy CSS, Tailwind, React or shadcn.
- CSS loading spinners20 pure-CSS spinners, dots and bars plus a skeleton card builder. Copy HTML and CSS, Tailwind or React.
- Color blindness simulatorSee your screenshot the way color-blind users do, and which colors turn into the same color.
- Background generatorWaves, blobs, mesh gradients and patterns for your hero. Shuffle, then download SVG or PNG or copy CSS.
- Font pairing ideasHand-picked Google Fonts pairs shown on a real-looking landing page. Copy the link tag, CSS, Tailwind or a prompt.
- Icon finderSearch 10,000+ free icons from Lucide, Heroicons, Tabler and Phosphor, then copy as SVG, JSX or React.
- Fluid type scale generatorFont sizes that grow smoothly from phone to desktop. Drag the screen width, then copy clamp() CSS or a Tailwind config.
- Glassmorphism generatorMake a frosted glass card over colorful backgrounds or your own screenshot, check the text stays readable, copy CSS or Tailwind.
- NewAI slop checkerDoes your site look AI-made? Get a score, the tells that give it away, and a prompt to fix them.
Questions
Are these tools really free?
Yes. Every tool on darnly.dev is free, with no sign-in and nothing to install. They are made by Darnly, a free Chrome extension and Mac app that turns a bug you see on screen into context your AI coding agent can fix.
How do I get my AI agent to follow a design?
Give it something concrete. The DESIGN.md generator turns any website into a style guide file with its colors, fonts and spacing, which you can drop in your project for Claude Code, Codex or Cursor to read. The shadcn/ui theme and Tailwind color tools give you values to paste straight into your config.
Do these work with Tailwind?
Most of them do. The color, gradient, button and theme tools give you Tailwind classes or config alongside plain CSS, and Hex to Tailwind finds the closest Tailwind color for any hex code.