Resources & Inspiration

Vibe Coding

Curated tools, repos, products, and inspiration for designers who code. The best resources for building with vibes.

Tools

Cursor

AI-first code editor built on VS Code. The best tool for designers who want to build — prompts your way to production code.

AIIDEEssential
Tools

v0 by Vercel

Generate UI components from text prompts. Uses shadcn/ui and Tailwind CSS. Perfect for rapid prototyping and exploring design ideas.

AIUI GenerationPrototyping
Tools

Lovable

Build full-stack web apps from natural language descriptions. Great for designers who want to ship complete products without deep engineering.

AIFull StackNo-Code
Repos

shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS. Copy-paste, not install. The foundation of modern React UI.

ComponentsReactTailwind
Tools

Tailwind CSS

Utility-first CSS framework. The backbone of vibe coding — write styles as fast as you think. v4 brings CSS-first configuration.

CSSFrameworkEssential
Repos

Framer Motion

Production-ready animation library for React. Smooth, physics-based animations that make your interfaces feel alive.

AnimationReactUI
Products

Vercel

Deploy your projects with zero config. Push to git, get a live URL. The fastest path from code to production.

HostingDeploymentEssential
Inspiration

Linear

Beautiful project management for modern teams. A masterclass in UI design, speed, and keyboard-first interactions.

SaaSDesign QualityUX
Inspiration

Raycast

Productivity tool that replaces Spotlight. Stunning UI, thoughtful UX, and a great example of design-driven product building.

Desktop AppDesign QualityDX
Inspiration

Arc Browser

A browser designed for how we use the internet today. Bold design choices, beautiful UI, and a rethinking of browser UX.

BrowserDesign QualityUX
Tools

Figma Dev Mode MCP

Connect Figma designs directly to AI IDEs via MCP. The bridge between design files and production code.

FigmaMCPDesign-to-Code
Tools

GitHub Copilot

AI pair programmer that suggests code in real-time. Essential for designers learning to code — it fills in the gaps.

AICodingProductivity
Repos

Radix UI

Unstyled, accessible UI primitives for React. The foundation that shadcn/ui builds on. Perfect headless components.

ComponentsAccessibilityReact
Repos

Next.js

The React framework for production. File-based routing, server components, and the best DX for building modern web apps.

FrameworkReactEssential
Inspiration

Stripe

The gold standard of developer-facing product design. Beautiful docs, thoughtful UI patterns, and attention to detail.

FintechDesign QualityDocs
Inspiration

Notion

All-in-one workspace with elegant design. A reference for how to handle complex functionality with simple, clean UI.

ProductivityDesign QualityUX
Learning

The Coding Design Podcast

Discussions on the intersection of design and engineering. Great for designers who want to understand the builder's perspective.

PodcastDesign + Code
Learning

Refactoring UI

Design tips and techniques for developers by the creators of Tailwind CSS. The essential book for anyone who codes and designs.

BookDesignEssential