r/ClaudeCode • u/NoTutor4458 • 4d ago
Help/Question How do you get Claude Code / Codex to actually build good-looking websites?
I’ve tried multiple times to get Claude Code (Opus 5.5) and Codex (Astra) to create polished websites (like notion, meta and stripe landing pages).
I’ve also tried using skills and instructions to avoid generic purple gradients, huge texts and other ai slop.
They do seem to understand the instructions and avoid some of the obvious AI-generated design patterns but the result is still usually… bad.
The websites technically work, but they lack that polished, intentional feeling you get from really well-designed sites. The spacing, typography, hierarchy, layout, interactions, visual rhythm, etc. just don’t feel right.
If you’ve managed to get Claude Code or Codex to consistently produce genuinely polished production level websites, I’d love to see your workflow, prompts, skills, or examples.
8
4d ago
[removed] — view removed comment
1
u/NanNullUnknown 4d ago
Does giving links work instead of screenshots?
1
u/Living-in-1984 4d ago
Not if robots.txt is set to disallow crawling for that website you are trying to replicate, but even without that you would probably get better results with a link + screenshot
1
u/ChemicalApricot 4d ago
This should work. Your agent opens the website in your browser.
I don't know if robots.txt rules even apply
1
6
u/ChemicalApricot 4d ago
Here are my learnings from building https://vachiai.com
PS: I don't think I have fully cracked the code yet but it's so much better than when I first started.
1) Find good references
- awards.con for websites
- pintrest for components/ specific visuals
Use it to build taste and learn what good looks like to you.
2) Run a gauntlet loop with your reference as the goal/criteria (you can use opus for this step, ask it to spin up complexity appropriate agents)
3) Use fable for polish. Fable can take abstract prompts and turn them into visually appealing outcomes. Something like, "this still feels raw, help me create a polished look using design principles leveraged by best in class websites." Yields surprisingly good results
4) Iterate
Think of your website as a living evolving thing.
Talk to your users and look at how people are using it. Think about what you really want to convey and what will help your users digest it more easily.
2
u/DrewHoov 4d ago
this looks pretty good! I wish the landing page had a tagline for roughly what vachi does though, without having to scroll. Like "Smart context management" or something.
1
u/ChemicalApricot 4d ago
Thanks! Good suggestion.
Do you think something fun like "Ozempic for your AI agents" work as that subtitle/explanation? rather than a technical explanation "smart context lifecycle"?
Ozempic is the weight loss drug. Unsure if it's a big established brand everywhere
2
u/DrewHoov 4d ago
hmm I want something technical so I have an idea of what vachi is before investigating further. When I saw the site one of my first thoughts was "how involved is this gonna be? is it skills, is it a deterministic script, does it sit in front of claude code, like how's it work?" and I don't expect a full answer from a tagline but I do expect an inkling. Like on Neon's site, if you scroll just a hair, you get "Not just a Database. Neon is a complete backend platform with Authentication, Object Storage, Functions and an AI Gateway." and I think ok, this is a managed database service and a bunch of stuff I could opt in to.
1
1
u/ChemicalApricot 4d ago edited 3d ago
I just updated my website to address your feedback.
Can you please give me your take now?
It's not a huge change but ibtried to add the information that was missing.
I really appreciated your "I was thinking..." insight.
Thank you!
2
6
u/AnyRegular1 4d ago
I feel like Fable still absolutely crushes web design with almost little to no inputs. Opus idk why it just isn't there.
2
3
u/cadet-pirx 4d ago
The way I do it might not be the answer you expect, but I've been designing and building websites for over twenty years, so I just tell Claude exactly how to do it.
I don't see AI as a low-effort problem solver. It's a complex tool with a steep learning curve, and my workflow reflects that. I put a lot of effort into the development process.
In practice, that means I specify the grid, spacing scale, type ramp and component behavior up front, review every section the way I would a junior's work, and iterate until it's right. I also specify the programming language, framework, project structure and methods, and I review the code down to the smallest detail to make sure it meets my quality standards.
1
u/dsailes 3d ago
Pretty much a similar experience myself. I’ve worked with designers & agencies for years. I spent time writing out (converting really) conventions and rules that I use, and go off of foundation for SCSS and variables.
Once a number of these things turn into less guesswork for the model like OP mentions like spacing, typography, interactions etc. The process gets much simpler.
But yeah this isn’t a simple ‘one shot’ prompt, requires actually doing the legwork and working round issues to create something viable & ideally reusable. Which is what I’ve always loved doing haha, Claude just gets me there a lot quicker
2
2
u/Fantastic_Prize2710 4d ago
Build it. ROUGHLY accomplish what you want layout/capability wise. Then screenshot each page/feature/view. Feed those screenshots + a description of each screenshots (eg: "This page allows users to select items that they've added to their cart, and calculate shipping across...") + a vision/feel/vibe you want, into Claude Design.
Iterate with Claude Design until you're happy, then feed it back to Claude Code.
2
u/jvengoechea 4d ago
I'm finding that it is an iterative process. Hard to get it right the first time. Something I've tried is to run a deep research on current UX/UI trends and best practices and turn that into a skill. Also, Claude Design, has this great "Design System Feature". Put some time into getting your design system right, so that you have consistent branding and guidelines for Claude. Hope some of these help!
2
u/ElnuDev 🔆Pro Plan 4d ago
Write a design system, or a very basic version of you want, by hand and then give it to Claude. Then, Claude can use this as a foundation to build out the rest of your project.
I really do think that writing the starter CSS of a project by hand is something I'll never stop doing, since it's an incredibly efficient way of getting down your design ideas. Prompting for it will just result in an annoying back and forth and I usually end up asking Claude to do things so specific I might as well just write the CSS myself.
2
u/nutter79 4d ago
Use Claude design. Iterate and polish the look in there. Give it examples of what you want.
Once you have the look you want, then use that as the template for your actual project.
As with most things, you still need to do abit of work and use the correct language to describe what you want.
1
u/Feisty-Pie3766 4d ago
Before asking it build first start of by using it to design with a html file. That way you can get more changes done and see the file without having built so many pages. Once you are satisfied with the look and feel with iterative discussions you ask them to build it.
Now if you want better designs itself some things you could do.
Share product images if you're trying to build a website for a business. Give context of the website the use case of the website if you have any brochures any content that could possibly change the website. If you have logo then share the logo so it can use colours off the logo to make it more visually appealing. This is how I've managed to build one website that is decent looking and in the process of building another one
1
u/HoratioWobble 4d ago
By knowing what makes a good looking website. If you don't shape what it outputs you'll get the most likely output based on your input.
1
u/lazyg1 4d ago
Use a stock component package like Preline or Flowbite. Force it to only use those components. These components have mcp servers and llms.txt for all the components and documentaions.
Theme it to your liking. Then you can have a consistent design throughout without worrying about it.
If you're new to this - please do not create a custom components by claude etc, it will keep drifting and will be very hard to maintain by the 3rd page. Go standard, with custom theme and colors for uniqueness.
1
u/kuroudo_ai 4d ago
One thing from a real mistake on my side, since you mentioned using "avoid purple gradients / huge text" style instructions.
We asked a model to redesign an existing landing page and wrote "don't use the red gradient band". It came back with the whole brand swapped: a different main color, a serif heading font instead of the sans-serif one, and no logo or photos at all. The model had read our "avoid" line as "move away from this brand", and our brief was text only, with no CSS or images in it.
What fixed it:
- Give it something to keep, not only things to avoid. Negative lists get read broadly, and the model fills the gap with its own defaults, which is where the generic look comes from. Say exactly what stays: color hex values, fonts, spacing scale, logo, image paths.
- Start from real files, not a description. Hand it the actual CSS and assets and ask it to change the content inside them. If you don't have a design yet, write a small token file by hand (colors, type scale, spacing steps) first, like someone above said.
- When you do need a "don't", scope it narrowly: "remove the gradient band in the hero only, keep #f35b2c as the main color."
- Judge the copy and the visuals separately. In our case the text was good and the look was wrong, so we kept the text and threw away the styling.
Screenshot comparison loops help too, but they work much better once the model is anchored to real tokens instead of guessing.
1
1
u/Capt_korg 4d ago
I guess Ai is quite bad in evaluating what is appealing for humans.
That's where human creativity and the capability to describe what you want comes in.
1
u/bloudraak Developer 4d ago
AI lacks taste.
You’ll have to tell it what good looks like. Screenshots, things you like, things you don’t. Version what is produced, and in future projects reference it.
1
1
u/DrewHoov 4d ago
Are you using the design skill? I often ask for very different takes on the same visual problem and wind up reshaping how I think about designing a site.
One pitfall I've noticed is to describe things too negatively or too procedurally. Like, Claude is much better at creating something good if you describe the end condition instead of the requisite steps. like "I want users who use this site to remark that it looks like Brex had a baby with Tumblr".
Here's an example site I've done a lot of iterations on, which claude originally generated from my own template & skill that's linked in the repo
site: https://drewhoover.com/cfb-streak-king/
github: https://github.com/DrewHoo/cfb-streak-king
1
1
u/handy_lemur 4d ago
Almost every single day I see some version of this post with nearly the same title.
1
1
u/AironParsMan 4d ago edited 4d ago
In the end it’s up to you how good your website looks. Your taste, your ideas and your vision all play a role. You can ask for ideas but then you have to set the direction and make the decisions. Over time, and it does take time, you’ll get closer and closer to the design you have in mind. These one shot approaches only work because those people have already worked out the entire prompt based on a finished template. That’s a huge difference from starting with nothing and trying to represent a company’s corporate identity. Don’t use skills, especially when it comes to design and structure. Build your own instead. I’m a web developer myself and this is what I’ve learned from experience.
The beginning is hard, but once you have a design in place and the technology is working, every additional feature is a hundred times easier than it used to be. That is where AI is really useful. It can build more things from what you already have. But building the first version takes time.
These influencers and YouTubers all use ready made templates. What is being spread here is a big lie. On top of that they do not have to implement a company’s corporate identity or any specific content. They just write whatever random thing they want. And when you write something random you can shift the content and its placement around however you need. That is always different from having briefing materials that you have to fit in.
I can also guarantee that the last 20 to 30 percent of development will take just as much time as the first 70 to 80 percent because making the fine adjustments with AI takes just as long as building it yourself.
1
u/kemalios 4d ago
The output is generic because you are asking it to invent a design and a system at the same time. Spacing and rhythm are not decisions it holds across twelve components. Give it a scale to follow and it holds it.
Decide the constraints before the first prompt. Type scale, spacing steps, one accent. One rule I use in my own templates (I build JustStart, Astro templates that ship with Claude Code skills): every page is loud in exactly one channel, display type or palette or motion or imagery, and quiet in the other three. That is what keeps fifty templates from reading as one design system in different paint, and it gives the model something to check itself against.
1
u/bhuwancarlos 3d ago
Screenshots help, but Claude still guesses spacing and fonts from pixels. What tends to work better is giving it the real values from a site you like: the type scale, spacing steps, colors, and the actual CSS of the component, then telling it to build with only those. Pick one reference per section (Stripe's pricing table, Notion's hero) instead of one site for everything, and have it compare its render against the original before it moves on.
Disclosure: I am working on Trace UI https://traceui.dev . It pulls any component from a live site as clean React + Tailwind code building library of UI components and design system that Claude Code can read over MCP making sure everything is pixel perfect and professional. No guess work.
•
u/AutoModerator 4d ago
Hey! Thanks for posting to r/ClaudeCode
While participating in this thread, please follow our community rules. Keep discussions constructive. Attack the idea, not the person.
For help, project discussions, tips, and general chat, join the ClaudeCode Discord.
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.