Beginner7 min readShare
Was this chapter helpful?
Share
Try these free tools
Your AI tool can build it — but how do you make it look good? Follow these 5 steps to go from "it works" to "it looks amazing."
Browse design galleries and screenshot what catches your eye
Choose a color palette and font pairing — or skip this and let your AI tool decide based on the design you upload
Give your AI tool a visual reference — upload a screenshot or use Google Stitch to generate variations
Tweak spacing, shadows, icons, and micro-interactions until it feels right
Make sure every page on your site respects the same design language
Before you build anything, spend 10 minutes browsing design galleries. Screenshot 2-3 designs you like. You don't need to copy them exactly — you're looking for a vibe: the colors, the layout, the feel.
The largest design community. Browse UI, landing pages, dashboards. Filter by color.
Award-winning websites judged by professionals. The best of the best.
Curated gallery of beautiful web designs. Clean, modern, well-organized.
Landing pages organized by type: SaaS, agency, portfolio, etc.
Real app and web design patterns from top companies.
Single-page website inspiration. Great for portfolios.
Search 'web design' or 'dashboard UI' for endless visual inspiration.
Collection of SaaS landing pages for inspiration.
Need inspiration for a specific part of your site?
This step is optional — if you already love the colors in your inspiration screenshot, skip ahead to Step 3. But if you want to customize, lock in your colors, fonts, and gradients now. This way when you upload to AI or use Stitch, you can say "use these exact colors" instead of getting random ones.
Our vibe-based palette picker. Choose a mood and get matching colors instantly.
Build beautiful gradients visually and copy the CSS. Great for hero backgrounds.
Generate beautiful color palettes. Press spacebar for new combinations.
See your palette applied to a real website layout in real-time.
Curated palettes applied to real design mockups so you can see how they look.
Community-curated color palettes. Thousands of combinations to browse.
Browse Google Font pairings — find a heading + body combo that fits your vibe.
Browse 200+ Lucide icons. Click to copy the name and use in your AI prompts.
Apply your colors and fonts
"Update my site to use this design system: Colors — Primary: [#hex], Secondary: [#hex], Background: [#hex], Text: [#hex], Accent: [#hex]. Fonts — Headings: [font name] bold, Body: [font name] regular. Apply these consistently across all components — buttons, links, headings, card backgrounds, borders, and hover states. Make sure there's enough contrast for readability."
Now that you have inspiration and your colors picked, give your AI tool a visual reference. You have two options:
Tools like Claude Code and Lovable accept image uploads. Screenshot a design you like, upload it, and ask AI to build it with your chosen colors. This is the fastest path.
Upload a screenshot and build it
"I'm uploading a screenshot of a website design I like. Please recreate this layout and visual style for my [type of project]. Use my color palette: Primary [#hex], Secondary [#hex], Background [#hex]. Use [font name] for headings and [font name] for body text. Match the spacing, typography hierarchy, and overall feel as closely as possible. Build it with Next.js and Tailwind CSS."
Google Stitch is a free AI design tool from Google. It creates professional UI designs from plain English — or you can upload a design you found and ask Stitch to generate variations. Then export or screenshot the result and upload it to your AI coding tool.
Describe your page in words: 'a landing page for a dog walking app with a hero and pricing cards.' Stitch generates a full design.
Upload a screenshot of a design you like and ask Stitch to create variations — different colors, different layout, same vibe.
Create up to 5 screens at once (homepage, about, dashboard) so your whole app looks consistent.
Don't like it? Say 'make it darker' or 'use a blue accent instead.' Stitch updates in seconds.
How to use Stitch
Upload a Stitch design and build it
"I'm uploading a UI design I created in Google Stitch. Please recreate this exact design as a working website. Use my color palette: Primary [#hex], Secondary [#hex], Background [#hex]. Match the layout, fonts, spacing, and component styles as closely as possible. Build it with Next.js and Tailwind CSS."
The difference between "fine" and "beautiful" is in the details. Once your layout and colors are in place, ask your AI tool to polish these things:
Spacing & whitespace
"Add more breathing room between sections — at least 80px padding between major sections, 24px padding inside cards, 16px gaps in grids."
Typography hierarchy
"Make headings larger and bolder (text-4xl font-bold for h1, text-2xl for h2). Use a subtle gray for body text instead of pure black. Add letter-spacing to headings."
Shadows & borders
"Add subtle shadows to cards (shadow-sm) and rounded corners (rounded-xl). Use a light border (border-gray-100) for definition."
Hover effects & transitions
"Add smooth hover effects: cards should lift slightly with a deeper shadow, buttons should darken, links should change color. Use transition-all duration-200."
Scroll animations
"Add subtle scroll-triggered fade-up animations to sections as they enter the viewport. Use a 100ms stagger between items in a grid."
Consistent border radius
"Make all border-radius values consistent: 12px for cards, 8px for buttons, 6px for inputs. This creates visual harmony."
Background textures
"Add visual interest to the background: a subtle dot grid pattern, soft gradient blobs behind the hero, or a light noise texture overlay."
Favicon & branding
"Create a simple favicon that uses my primary color. Add my logo to the navbar. Make sure the browser tab looks professional."
These tools can help you refine specific parts of your design:
Plan your page sections
SEO & social preview
Craft AI coding prompts
Asymmetric card layouts, popularized by Apple.
Frosted glass effect with blur and transparency.
Soft blurred gradient shapes in the background.
Dark backgrounds with glowing accent colors.
Subtle motion on hover, click, and scroll.
Lots of whitespace, limited colors, simple layouts.
A pretty homepage means nothing if your about page looks completely different. Once you're happy with one page, tell your AI tool to apply the same design to everything else.
Same color palette (primary, secondary, accent, backgrounds)
Same fonts and heading sizes
Same button styles and hover effects
Same card designs (padding, radius, shadows)
Same spacing between sections
Same navbar and footer on every page
Same border-radius values everywhere
Same animation style (if you use animations)
Apply design to all pages
"Look at the design of my homepage — the colors, fonts, spacing, card styles, button styles, and overall feel. Now apply this exact same design language to all other pages on my site (about, pricing, dashboard, etc.). Every page should feel like it belongs to the same website. Use the same component styles, the same color palette, and the same spacing rules."
Design audit prompt
"Review all pages on my site and list any design inconsistencies. Check for: different button styles, inconsistent spacing, mismatched colors, different font sizes for the same type of heading, cards that look different on different pages. Then fix all the inconsistencies so everything matches the homepage design."
