Mikey Website avatarThumbnail — 5 Ways to ACTUALLY Build Beautiful Websites Using Claude for FREE5 Ways to ACTUALLY Build Beautiful Websites Using Claude for FREE
Community library — not by the creator.
17 prompts

Jump to the moment you're watching:

Watch on YouTube
Step 1 of 17

AI company website

To create a modern, minimal, and premium website.

Claude
Create a world-class website that feels like it was designed by an elite Silicon Valley product team. The aesthetic should be modern, minimal, and premium, inspired by the best AI companies.
00:12
Step 2 of 17

Basic portfolio site

To generate a basic, clean portfolio website.

Claude
Build me a portfolio website. Make it look modern and professional. Include a section for my work, an about me section, and a contact form. Use a clean design with a nice color scheme.
02:35
Step 3 of 17

Make it dark

To apply a dark theme to the website.

Claude
Make it dark
03:14
Step 4 of 17

Basic portfolio site repetition

To demonstrate a standard portfolio prompt.

Claude
Build me a portfolio website. Make it look modern and professional. Include a section for my work, an about me section, and a contact form. Use a clean design with a nice color scheme.
03:48
Step 5 of 17

Dark Academia portfolio

To generate a highly specific Dark Academia portfolio.

Claude
Create a portfolio website for [your name], a freelance [your craft, e.g. motion designer, illustrator, photographer] who works with [your target clients, e.g. tech startups and independent music labels on brand films, title sequences, and UI animations]. Use a Scrollytelling layout structure. Apply a Dark Academia aesthetic, think the inside of a high-end watchmaker's workshop at night, almost black walls, cool electric blue as the only accent color like a neon sign through a dark window, crisp white text. The accent is strictly for CTAs, active nav states, and hover interactions only, not headings or body copy. Sections: hero with your name and a single-line positioning statement, selected work grid with 6 cards each showing title, client, and category, about, and contact. Every section should feel like it belongs in a high-end creative studio portfolio, not a template.
04:26
Step 6 of 17

Neo-Brutalism split-screen

To build a typography-focused Neo-Brutalist website.

Claude
Create a website for [YOUR BUSINESS NAME], [YOUR SERVICE TYPE: e.g., brand identity and motion design studio] working with [YOUR TARGET CLIENTS: e.g., early-stage tech companies]. Use a Split-Screen layout structure. Apply a Neo-Brutalism aesthetic. Typography is the entire design system: use Clash Display for all headings at bold weight with wide tracking and a minimum H1 size of 72px, and IBM Plex Mono for all body text and UI elements, nothing else. Heading hierarchy must create strong visual contrast, H1 should feel three times heavier than body text. Body line height 1.7, max line length 70 characters. Keep layout clean and minimal so the type carries the page. Sections: hero with a single bold statement headline, [YOUR CORE SERVICES] as individual cards, selected work, and contact. Do not add decorative elements, gradients, or illustrations. The typography is doing all the work.
08:02
Step 7 of 17

Solarpunk consultancy site

To generate a Solarpunk-themed website for a renewable energy firm.

Claude
Create a website for VERDANT LABS, A RENEWABLE ENERGY CONSULTING FIRM working with MUNICIPAL GOVERNMENTS and urban developers transitioning neighborhoods to clean infrastructure. Use a Scrollytelling layout structure. Apply a Solarpunk aesthetic: warm greens and earth tones as the base, gold as the single accent color... INFRASTRUCTURE PLANNING, and COMMUNITY TRANSITION ROADMAPS), a selected projects section, and contact. Do not use dark backgrounds, hard borders, or aggressive type contrast. The palette and the typography should make the visitor feel like the future is already being built.
08:50
Step 8 of 17

Bento grid landing page

To create a landing page prioritizing whitespace and a bento grid.

Claude
Create a product landing page for [YOUR BUSINESS NAME], a [WHAT YOUR BUSINESS DOES] for [YOUR TARGET CLIENTS]. Use a Bento Grid layout structure. Apply a minimal editorial aesthetic: off-white background like heavyweight uncoated paper, charcoal typography, no color accents except a single [YOUR ACCENT COLOR DESCRIBED AS A REAL-WORLD REFERENCE: e.g., warm stone, aged brass, slate blue] tone for subtle UI details. Whitespace is the primary design directive: give every element room to breathe, never crowd two content blocks together, and when in doubt add more space rather than less. Sections: hero with a single statement headline and one CTA, [YOUR THREE CORE SERVICES] as individual cards, one client testimonial displayed in large editorial type, and a simple contact section. No dense layouts, no stacked elements fighting for attention, no stock imagery, no icons.
12:21
Step 9 of 17

Premium SaaS hero

To design a premium SaaS hero section with specific elements.

Claude
Design a premium SaaS hero section with a bold outcome-driven headline (8-12 words), a supporting paragraph (20-30 words), one primary CTA and one secondary CTA, customer logos, a testimonial or usage metric, and subtle trust badges.
15:35
Step 10 of 17

Local fitness studio

To generate a basic local fitness studio website with dark design.

Claude
Build me a website for a local fitness studio. Include a home page, an about page, a classes page, pricing, and contact. Make it look modern and motivating with a dark design.
15:47
Step 11 of 17

Detailed strength studio site

To build an outcome-driven strength training studio website.

Claude
Create a website for IRONFORM, A LOCAL STRENGTH TRAINING STUDIO in CHICAGO, built for WORKING ADULTS aged 25 to 40 who want STRUCTURED PROGRAMMING WITHOUT the intimidating big-box gym atmosphere. Pages: Home, [your page 2], [your page 3], Pricing, and Contact. Use a Split-Screen layout structure. Apply a dark, high-contrast aesthetic with deep charcoal backgrounds and a sharp amber accent color — think a luxury whiskey bar at closing time, warm but serious. The hero section is the entire focus of this build and needs all five of the following: a value-proposition headline written from the customer outcome, not your features (for example "Get Strong Enough to Surprise Yourself," not "Chicago's Premier Strength Studio"), a subheadline that adds one specific detail about the experience or the result customers see in the first 90 DAYS, a single CTA button reading "CLAIM YOUR FIRST WEEK FREE" with no secondary CTA competing with it in the hero, a background image slot labeled WIDE SHOT OF A DIMLY LIT GYM FLOOR WITH A SINGLE ATHLETE UNDER A SPOTLIGHT ON A BARBELL, and one trust signal showing either your customer count or a short real customer quote. Write all copy as if the business has been open for 6 YEARS and has 340 ACTIVE MEMBERS. Do not use placeholder copy or generic industry clichés anywhere on the page.
16:26
Step 12 of 17

Blue and white theme

To request a basic blue and white color scheme.

Claude
I want blue and white theme
17:57
Step 13 of 17

B2B analytics basic page

To create a standard professional B2B analytics landing page.

Claude
Create a landing page for a B2B analytics platform. Use a blue and white color scheme. Include a hero section, a features section, and a pricing section. Make it look professional and modern.
19:20
Step 14 of 17

Advanced B2B color system

To apply a strict 60-30-10 color system to a B2B landing page.

Claude
Create a landing page for [your product name], a [what it does, e.g. B2B analytics platform] that helps [who it helps, e.g. e-commerce marketing teams] [achieve what outcome, e.g. track ad spend, attribution, and revenue in one dashboard], built for [specific customer description, e.g. growth marketers at DTC brands doing $1M to $20M in revenue] who are tired of [their current pain, e.g. stitching data together from five DIFFERENT TOOLS]. Pages: Home only for this build. Use a Bento Grid layout structure. Apply an Aurora Gradients aesthetic with a dark base. Use the following color system exactly and do not add to it: Primary covers 60 percent of the page, think the deep black of a Bloomberg terminal, used for all backgrounds and primary surfaces. Secondary covers 30 percent, a slightly lighter dark slate, like the bezel around a luxury watch face, used for cards, nav background, and dividers only. Accent covers 10 percent, a SHARP MINT GREEN LIKE THE GLOW ON A HEART RATE MONITOR, used only for CTAs, active states, and key data callouts, nowhere else. All text must be clearly legible against its background with strong contrast. Write real copy throughout: a headline focused on the customer outcome rather than your features, real-sounding feature names, and a pricing section with [your tier names]. Do not use placeholder text or lorem ipsum anywhere.
20:25
Step 15 of 17

Comprehensive SaaS landing page

To combine typography, layout, whitespace, and color instructions into one master prompt.

Claude
You are a senior product designer who specializes in clean, high-converting SaaS landing pages. You avoid visual clutter, decorative noise, and anything that delays the visitor from understanding the core value.

Build a landing page for CLARITIQ, a B2B REVENUE ANALYTICS PLATFORM for GROWTH MARKETERS at DTC BRANDS DOING $1M to $20M IN REVENUE who are tired of STITCHING AD SPEND, ATTRIBUTION, and REVENUE DATA TOGETHER FROM FIVE DIFFERENT TOOLS. Pages: Home only for this build.
Use a Bento Grid layout structure. Apply an Aurora Gradients aesthetic with a dark base.
Use the following color system exactly and do not add to it: Primary covers 60 percent of the page, think the deep black of a Bloomberg terminal, used for all backgrounds and primary surfaces. Secondary covers 30 percent, a slightly lighter dark slate, like the bezel around a luxury watch face, used for cards, nav background, and dividers only. Accent covers 10 percent, a SHARP MINT GREEN LIKE THE GLOW ON A HEART RATE MONITOR, used only for CTAs, active states, and key data callouts, nowhere else. All text must be clearly legible against its background with strong contrast.
Typography: use Clash Display for all headings at heavy weight, and IBM Plex Mono for all body text and UI elements, nothing else. Never use Inter, Roboto, Arial, or system fonts. Heading hierarchy must create strong visual contrast, H1 should feel three times heavier than body text. Body line height 1.75.
Whitespace is the third design directive: section padding top and bottom at 120px minimum, 80px minimum gap between any two content blocks within a section. When in doubt, add more space, never less.
The hero section needs all five of the following: a value-proposition headline written from the customer outcome not your features, a subheadline that adds one specific detail about the result customers see in the first 30 DAYS, a single CTA button reading SEE YOUR REVENUE CLEARLY, a labeled DASHBOARD SCREENSHOT SHOWING MULTI-CHANNEL ATTRIBUTION AND REVENUE TOTALS SIDE BY SIDE, and one trust signal showing OVER 1,200 DTC MARKETING TEAMS HAVE SWITCHED FROM SPREADSHEETS TO CLARITIQ.
Write real copy throughout: a headline focused on the customer outcome rather than your features, real-sounding feature names, and a pricing section with STARTER, GROWTH, and ENTERPRISE tiers. Do not use placeholder text or lorem ipsum anywhere. Do not add decorative elements, gradients outside the defined system, or features not listed above.
23:31
Step 16 of 17

Vague portfolio prompt

To show an example of a vague, poorly written prompt.

Claude
create a portfolio website for editing
25:45
Step 17 of 17

Detailed portfolio prompt

To show an example of a highly detailed, descriptive prompt.

Claude
Design a premium, modern personal portfolio with a dark charcoal background, electric blue and violet accents, subtle glassmorphism, soft gradients, 12-column grid
25:55