Enter your search text in the box above

Select a result to preview

KS - Claude Design = Easy Websites for Beginners Design

Citypunks Website Design Workflow

Based on Kelly Skelly’s YouTube video:
https://youtu.be/rJtF32LTX8U?si=ObNAWOf9OncohSc5

1. Claude Design Prompt

Use Claude Design to generate the first wireframe.

Prompt

Create me a wireframe for a cyberpunk type game.

Large video hero with H1 and CTA bottom left.

I want a button/box that has a CTA for watching the trailer, and a main CTA to play the game.

The game should be called Citypunks.

The second section should be 2 features about the game.

Then a news section for updates from the game, 3 posts and a link to read more.

And a big full width CTA section to play the game and a footer.

2. Claude Design Output

Claude generates:

3. Refine the Design

Choose the preferred layout and ask Claude to develop it further.

Prompt

Let's go with A. Full style Nav.

Develop this into a high fidelity UI design.

4. Generate AI Assets

Use Midjourney to create the main hero image.

Midjourney Prompt

A sci-fi cyberpunk-esque female character standing facing away, holding a samurai sword down by her side, on a red solid background with subtle small sci-fi details.

Settings

Aspect ratio: 16:9

5. Add the Generated Image to Claude Design

After generating the image in Midjourney, bring it into Claude Design.

Claude Design Prompt

Let's use this as our full screen hero image and generate.

Claude should now generate the full website using the image.

6. Fix Responsiveness

The generated website may not be fully responsive. Ask Claude Design to fix the layout.

Claude Design Prompt

Perfect, let's fix the responsiveness of the site.

It should be fully responsive, and the navigation should become a burger icon which opens a full screen menu on mobile.

7. Handoff to Claude Code

At this stage, Kelly hands the project over to Claude Code because Claude Design is close to its usage limit.

Claude Code Prompt

Fetch this design file, read its readme, and implement the relevant aspects of the design.

https://api.anthropic.com/v1/design/h/nhaSH_NjqNIA0GJQBG-PVA?open_file=Citypunks.html

Implement: Citypunks.html

8. Turn the Midjourney Image Into a Video

Go back to Midjourney and convert the generated hero image into a video.

Midjourney Video Options

Select the generated image used in the website, then choose:

Optional step shown by Kelly:

9. Add Video to Claude Code Project

Take the video back into Claude Code.

Claude Code Prompt

Change the hero image to BGvid.mp4 in the folder.

Also, compress the video down so it is suitable for web.

10. Complete Remaining Sections

Continue building out the page sections:

11. Generate More Assets

Go back to Midjourney and generate additional images or videos for the remaining sections of the page.

Use these assets to improve: