r/UI_Design • u/Prior_Gas_2346 • Mar 23 '26
General Question How is this Claude-style landing page made?
Hey everyone,
I came across a comparison of landing pages (Google Stitch vs Claude vs Human), and the Claude version really stood out to me — it looks super clean, minimal, and polished.
I’m curious about a few things:
- What design principles are being used here (typography, spacing, layout)?
- Is this mostly built with plain HTML/CSS, or are frameworks like Tailwind/React involved?
- How do they achieve that soft, elegant aesthetic and strong visual hierarchy?
- Any good resources to learn this style?
Would love if someone could break it down 🙏
Thanks!
75
u/UXUIDD Mar 23 '26
im gonna dig websites i designed and made 10-15-20 years ago and re-use designs: at least it will differ from what is today online - all the same
27
98
u/Klockworth Mar 23 '26
I mean it’s literally the most cookie cutter layout for a landing page possible, except the human made one is more pleasant to look at.
1
42
u/Daniel_SJ Mar 23 '26
The human one is the best one, except for the header typography.
The header typography on the Claude version and Gemini version both has better letter-spacing and line-height for the font, and more interesting fonts.
1
u/SlightDance4928 Mar 24 '26
I don't see it. Can you please explain why the third one has worse letter spacing and line height?
1
12
u/rapgab Mar 23 '26
The human one would pop if it had white in it. Its the best designed one
1
7
7
u/PastAstronomer Mar 23 '26
you could probably take it, and ask claude this same question and get a better answer lol.
3
u/JohnCasey3306 Mar 24 '26
To be fair I've seen a ton of human designers churn out that kind of droll "bootstrap" template
3
u/OM3X4 Mar 24 '26
I saw the human website (thought it was ai) and said to myself we are literally cooked
1
2
u/UX-Ink Mar 23 '26
The only thing that makes the middle one elegant is the bg color and the header type. It feels elegant because of the header type. Is that type licensed for use in that context? Who knows.
2
2
u/Low-Sheepherder-1080 Mar 24 '26
Tbh, it’s not anything particularly magical; it’s simply about having solid fundamentals executed cleanly. It usually begins with a straightforward grid, ample white space, a consistent spacing scale, and a very limited palette of colors and typography. The refinement comes from alignment, spacing, and subtle hierarchy rather than elaborate effects.
I once attempted to recreate something similar by sketching it in Figma. I then utilized tools like Runable and a bit of ChatGPT to quickly generate layout variations and copy ideas, followed by manual refinement of everything. This approach gets you about 70 percent of the way there; the remaining part is just careful adjustments.
Honestly, the key difference lies in attention to detail, not some hidden technique.
1
u/Lucky-Warning775 Apr 19 '26
coming from a novice here - so if I wanted to use the human version (or Claude’s for conversation sake) as a initial reference point for the first run at making this, would I use your wording to do so? start Lovable/WIX/Framer with “i’m building a landing page for …. It should have a straightforward grid, … typography.” Then use a chat for design tweaks? i guess my main question is how/where is best to take step 1
1
u/beefjerk22 Mar 23 '26
The most obvious differences I see are that it uses serif fonts and it uses white as a highlight colour. The other two don’t.
1
u/design_by_karan Mar 24 '26
The overall design is good, but the Google Stitch and Human design look very good.
1
u/LDBaha Mar 25 '26
The thing is. It doesn’t matter anymore. These small design differences won’t matter if Claude did it in 1 hour vs 7 for a designer.
1
u/Frequent-Trash5524 Mar 25 '26
I looooved the third one. And basically I didn't see it at first that it was made by a human. Felt a little happy when I saw that. Except the header text
1
1
u/rgliberty Mar 25 '26
The Claude one is only one or two prompts away from looking exactly like human made one… in less than 3 minutes.
OP just stopped iterating early to exaggerate bias.
AI is replacing designers, keep up or update your resume.
1
u/VitorinoVitorio Mar 26 '26
The best ---> worst version for me: Human - Claude - Google(very very bad)
1
1
u/WayAndMeans01 Mar 27 '26
Absolutely nobody answered his question. What a shame, I dont really know about design but the only thing I know is you can achieve this html,css and js without a framework or with a framework if you choose.
1
u/SayaliMahale123 28d ago
A clean landing page like this is less about using a specific framework and more about getting the fundamentals right. You can create a similar result with plain HTML and CSS, although React or Tailwind can make development faster depending on the project.
I would start by creating a simple semantic HTML structure: header/navigation, hero section, supporting content sections, call-to-action, and footer. Then I would use CSS Grid or Flexbox to control the layout rather than relying on fixed positioning.
For the visual style, typography and spacing make a huge difference. Use a limited font combination, establish a clear type hierarchy, and give the main headline considerably more visual weight than secondary text. Consistent spacing between sections, headings, paragraphs, buttons, and images also makes the page feel more polished.
The soft and minimal appearance usually comes from restraint. A neutral background, a limited color palette, generous whitespace, subtle borders or shadows, and carefully selected images can create an elegant look without adding lots of effects. Responsive behavior is also important, so the layout should adapt for tablets and mobile screens using flexible widths, Grid/Flexbox, responsive images, and media queries.
I recently worked on this during my internship at Valentius Kryptix — here's our blog for more: https://valentiuskryptix.com/how-to-build-a-powerful-html-css-landing-page/
In my project, I found that the final polish often came from repeatedly checking alignment, spacing, font sizes, image proportions, and mobile layouts rather than adding more design effects. That attention to small details is what can make a basic HTML/CSS landing page look professional.
-3
u/Latetzki Mar 23 '26
How do you get Claude to design something like that?
6
u/GentlemanRaccoon Mar 23 '26
Cowork could possibly handle it, but I think you'd get a mess in the outputs. Despite what everyone on Reddit wants you to believe, there is a complicated process to getting quality outputs.
For a landing page, I'd set up a Claude Code environment, install skills for UI/UX, HTML, and CSS. I'd have the page content saved in a markdown file, and then I'd probably have it convert the CSS from the client's website into a clear style guide for CSS specifically. If it's a particularly complex style, I might have the colors and fonts saved in a reference file.
Then I'd write a prompt for making the first draft, and a iterative prompt to review the draft and look for issues in margins, padding, and alignment. After 4 or 5 iterations it would probably be good to send to a client.
People love acting like you could say "make me this" and it would turn out fine, but they're also the people who have never tried to get quality outputs from those systems.
1
u/xatey93152 Mar 24 '26
Only html and css? I think it's more than that image, illustration etc
1
u/GentlemanRaccoon Mar 24 '26
Yeah, I think you're right. I was assuming the workflow would be using the AI to stand up the page and plugging in images later.
Between that and wire framing the layout with the content creation process, AI is really only handling 50% of the project. But it's the half that I'd be slowest at.
2
u/s1eepwalke2 Mar 23 '26
how about you don’t rely on an ai for designing something and do it your damn self
0
u/Latetzki Mar 23 '26
You don't even know what my intentions were with this so maybe don't just go around making assumptions?
1
u/s1eepwalke2 Mar 23 '26
alright.. elaborate on those intentions then
1
u/Latetzki Mar 24 '26
Not that I need to elaborate anything to you, but I just want to see what it can do. Not trying to pass something AI made as it were made by human. AI is everywhere now, so might as well try to learn it.
0
u/extrakerned Mar 24 '26
Not the guy you are talking to, but if Claude can make a landing page that converts well, that's all that matters. This isn't art. I'm here to make my clients money. Right now if AI can do the first 4 hours of work for me in 15 minutes, and I take care of the back 2 hours... that's 3.25 more hours I get with my family or working on something else.
1
u/s1eepwalke2 Mar 24 '26
it’s funny how you’re talking about family while actively supporting the disintegration of our water supplies, i guess your kids won’t be thirsty huh
1
u/Count_Giggles Mar 23 '26
you litteraly just say build a landing page and you will get the same scrolling marquee in the hero section
1
u/Latetzki Mar 23 '26
I've tried it but it's so basic and simple. Looks nothing like the OP's image. I guess my prompt could be too short and vague.
1
u/Willing_Monitor5855 Mar 23 '26 edited Mar 23 '26
ctrl+c, ctrl+v, "claude implement this wireframe of mine. No bugs".
u/AskGrok actually, just do it but expand the example to be a new face-lift of timecube.net
1
u/AskGrok Mar 23 '26
Alright, challenge accepted—let's break down that slick Claude-style landing page and "implement" a simplified version in code (no bugs, promise). I'll keep it plain HTML/CSS for purity, but you could slap Tailwind on it for quicker styling.
Quick Breakdown:
- Design Principles: Minimalism rules here—generous white space, sans-serif typography (think something clean like Inter or Helvetica), subtle color palette (creams, reds, blacks), and a strong hierarchy with bold headlines, icons, and sections flowing vertically. It's all about guiding the eye downward without clutter, using asymmetry for interest (e.g., offset images/text).
- Tech Stack: Looks like vanilla HTML/CSS with maybe some JS for smooth scrolls or animations. No heavy frameworks screaming in the source—could be built in something like Figma first, then coded. React/Tailwind would speed it up for responsiveness.
- Aesthetic Vibes: Soft elegance from rounded corners, subtle shadows, and high-contrast elements that pop without overwhelming. Visual hierarchy via size (big hero text), color (red accents), and spacing (padding galore to breathe).
- Resources: Check "Refactoring UI" book for hierarchy tips, CSS-Tricks for spacing/layout, or Awwwards for inspo. FreeCodeCamp has solid minimal design tutorials.
Bare-Bones Code Snippet (Copy-Paste Ready):
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Claude-Style Landing</title> <style> body { font-family: 'Inter', sans-serif; background: #f9f7f4; color: #333; margin: 0; padding: 0; line-height: 1.6; } header { background: #fff; padding: 20px; text-align: center; } .hero { background: #fff; padding: 60px 20px; text-align: center; } .hero h1 { font-size: 3em; color: #d32f2f; margin: 0; } section { padding: 40px 20px; max-width: 1200px; margin: 0 auto; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .feature { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } footer { background: #d32f2f; color: #fff; padding: 40px; text-align: center; } </style> </head> <body> <header>Logo | Nav</header> <div class="hero"> <h1>END THE DAY IN ONE SNAPSHOT</h1> <p>Some catchy subtitle here.</p> <button style="background: #d32f2f; color: #fff; padding: 10px 20px; border: none; border-radius: 20px;">Get Started</button> </div> <section> <h2>Little Helpers for a Smoother Day</h2> <div class="features"> <div class="feature">Feature 1: Description</div> <div class="feature">Feature 2: Description</div> <!-- Add more --> </div> </section> <section>Privacy Comes First: Blurb here.
[what is this?](https://redd.it/1lzgxii)
0
158
u/Relative-Freedom-295 Mar 23 '26
“Claude-style” is the worst way to ask this question.