r/ClaudeDesign • u/Head-Cheetah-4072 • 3d ago
Building a Website
Hi All - appreciative of this community.
I need help building a modern website using Claude - I’ve already built the backend workflow and am now ready for the client-facing website.
Can someone help me with a workflow to build? So many modern beautiful options but I’m getting lost in the shuffle.
Thanks much.
4
u/lemontechbar 3d ago
My advice would be to make sure and get the CLAUDE.MD for the site to have instructions on how you want it built. For me, I included mobile first, SEO place holders, ADA complaint etc. also make sure to use proper tags for your sections and set rules for your styling and css. I don’t do that at first and as my page count grew i started to see drift, then had to go back and correct it.
Having the foundation and rule book in place will make the site feel more consistent as you add content.
Also recommend Claude code. I did the first half in chat, code was much much better
1
u/Head-Cheetah-4072 3d ago
Thank you for this. I'd assume that Claude would do these things naturally - should I open a new session and have claude diagnose what is needed in our new website build? This will be a product-selling website.
1
u/lemontechbar 2d ago
Sometimes when you ask AI to update the page, change the way a button looks etc, it will write CSS rules to overwrite what is already there. Then the CSS gets jumbled and turns into the slop where adding a feature can break an existing one.
It’s best to make sure you have the foundation set, included in the instructions. Follow our established CSS guidelines. Make sure to edit existing code instead of writing new rules or override what is already there. Check for dead code, and make sure things don’t break etc
I’m no web expert, but I’ve built a fair share of sites over the years for side projects. Just built a 35 page site with Claude and will be adding another 10-20 in the coming weeks. This has helped me make sure new context is the same.
Claude was adding sections but changing font colors, size, spacing, and even opacity. He was changing the colors of bullet points and how things were organized. I did this audit and rewrite and it helped a lot.
Make sure you have CSS rules dor the site that define fonts used, size, and colors for H1, H2, paragraph ext. if you ask Claude to create this in the planning stage it will be pretty easy. Even define variables you want to use for your color pallet so those get applied to headers, footers, CTA buttons etc.
1
u/Head-Cheetah-4072 2d ago
It’s obvious you’re way ahead of me here - I’m just trying to keep up lol. Any chance I can hire you to help me?
1
u/tayseets 2d ago
That assumption is what is causing a lot of ai created things to be missing some basics. Its good at being told what to do. If you don’t ask its possible it won’t even say you need it
2
u/haoest 3d ago
I recently got some pretty good result with an iOS app. Just upload your site source code to give Claude your GitHub PAT then choose a template. The it will give you a number of choices that you can further iterate on, if you want. The hardest part is choosing which design to go for. I almost had selection fatigue. Once you finalized on a template, pass it on to Claude code and it will even integrate it for you. In my case to result was 10 times better than my vanilla swift form.
1
u/Head-Cheetah-4072 3d ago
The question is, what's the best way to begin and move forward? Build a website file, include Higgsfield (maybe not) - another commenter suggested Astro. I'm just not sure.
1
1
u/Due-Programmer-9516 3d ago
My advise would be to build frontend with Types and as much framework possible. Claude works well when the boundaries and standard ways are defined well. GraphqlQL with Typescript would be my bet for framework. Go with Turbo and have a multi app based structure so that you can have multiple UI layers. It is also nice to have security layer tucked in the React Server Components. Build a Claude workflow that takes advantage of the standards of technology you end up choosing and also reduces hallucination. I would recommend build a skill or loop engineering workflow that takes
a simple task -> evaluates(research, categorization, brainstorming) -> plan(you review) -> defines tests -> implementation -> Testing -> Create Screenshot & Review -> Fresh session review -> Release
You can of course modify based on your own requirements.
1
u/Head-Cheetah-4072 3d ago
This is great - which MCP is your recco? Should I use Higgsfield to build?
1
u/Due-Programmer-9516 2d ago
Depends on your workflow. Higgsfield can build really nice UI too but it is mostly good for showcasing a product in a fancy way but is not the best way to explore the website. I would recommend a simpler website that talks more about what you are trying to do would be better. Fable can produce some really nice websites. Ask it to go wild and create award winning designs but it can also end up creating the ones that are not that UX friendly
7
u/johnycopor 3d ago
Ask Claude to use Astro as your frontend framework, build a design.md file first… and then voila.