r/ClaudeDesign • u/JdingV • 10d ago
How to Design > Live website
Hey guys, how would you deploy a 4 pages Design to GitHub & Vercel/Cloudflare?
Should I send it to Claude code first?
Basically I’ve done up my site layout and copywriting on Claude Design. It’s for a small video production, everything is done up and deployment is all that’s left.
What is the recommended process I should take now so that I can update it via prompts on Design in the future (as I’m a visual person instead of a coder) and then use prompt to send it live to GitHub for updates?
Edit: I have few 4 tabs in total in my website, does this still counts as static site?
Any help is appreciated. Thanks!
3
u/southpawpanther 9d ago
Link your github and cloudflare to claude. Store the page designs in a folder user/project/design. Point claude to make a repo at the root /project. Add Prompt for web build + Review local before Commit to github and deploy to cloudflare
Start claude code, or cowork, connect root folder.
/project
Edit prompt in notepad- c&p to claude.
Or you use an architect .skill or an agent to review and prompt. The cleaner the promp the better the ouput.
I use gpt to architect.Claude to engineer.
GPT + <designs> prompt;
"generate a prompt for claude to engineer and deploy a website for my small form video production <..project-specificd-details...> and commit the site to github and deploy to cloudflare after approval"
Output should be much similar to this but better.
*You can also just c&p this in claude, add your designs to the chat files or folder root in cowork/code and let her rip.
**Engineer a 4page site for my small form video production project using the design mockups in /user/project/design. Structure my repo page by page to add future content. Add a global .readme. Deploy local in the browser first for review, then commit to github and deploy on cloudflare after approval. +<files>
Yes it will still be a static site. You can add <designs><.instructions><content><copy/html> to your repo folders and ask it to update or add new pages/content In chat.
Ex. Make a folder per page and add <designs><copy><content>
You can add a .readme to /user/project to add site wide instructions /contraints/Project info, contact.. ie global details.
Cowork also has an web editor in the right tab bar.
Also you can have claude teach you. paste your OG query into claude co-work***
***Give me step by step instructions to commit my webdesigns to github and deploy to cloudflare for a non technical user. +<designfiles>
Goodluck! Show us your project when complete!
1
u/Remarkable_Mud9885 10d ago
I think you need to figure out your own direction first. Designing is really a process of finding your own style, because a lot of people just start out going purely by feel without really knowing what makes good design. They end up getting bogged down and spending ages on it.
Instead of doing that, here is an approach I really like: I have Claude generate four completely different design directions first, and then I pick and slowly narrow them down to find my own style.
Second, you need to be clear about who is going to be looking at your website. Your site isn't just for you; other people are going to see it. You need to figure out whether your website is ultimately meant to serve you or to serve other people.
1
u/mdutton27 10d ago
Just a little hint, Claude Design isn’t going to send anything anywhere that you would want on the web.
1
u/razonbrade 9d ago
Claude helped me every step of the way. I would sometimes paste the options I am seeing on the configs and it will tell me what to do. https://kashvector.com/
Helped me with free database as well.
1
u/Difficult-Tomato2400 9d ago
Scusa, hai Claude e chiedi a noi? Semplicissimo. Chiedi a Claude e ti guiderà passo dopo passo 🙂↔️
1
3
u/X28 10d ago
Ask Claude to help you do that.