Set the visual direction before building the site
Use Claude Design to shape the look first, then hand the decisions to Claude Code for implementation.
- What they did
- The author first asked Claude Code to generate websites for six different industries with no styling guidance, and the results all felt alike. For their own site, aiqkangber.com, they gave Claude Design an existing codebase or GitHub repo so it could question them about the look, suggest three button styles, and let them refine spacing and color with references like Dribbble screenshots. After that, they passed the agreed direction to Claude Code as a package of specs and design tokens.
- How it went
- The homepage, services page, and newsletter page ended up with a more distinct look instead of the same generic pattern. The homepage also gained a particle-globe hero. Claude Design still cannot create photos or detailed illustrations, so those pieces still need to come from the user.
- Tips
- This works best if you separate taste-setting from implementation. Be aware that Claude Design and Claude Code draw from the same quota pool on paid plans, so using both together can run through limits faster.
Try it yourself with Claude Code
I’m building a [type of site] for [business name] in [folder or repo]. First, review the codebase and ask me the minimum set of questions you need to define the visual direction. Then give me three clearly different design options, including palette, type style, spacing, button treatment, and overall mood, and wait for my choice. After I pick one, turn that direction into design tokens and implementation guidance, then build the pages with Claude Code. Before any irreversible action such as publishing, deleting files, or submitting anything, pause and ask for my approval. Stop when the site is responsive and the chosen direction is applied consistently across the pages.
Fill in the [brackets]. Agents can make mistakes, so review anything before it is sent, paid or deleted.
Get 3 agent uses like this every morning
With the day's top AI news. Free, and one click to unsubscribe.
Related agent uses
Set up a company workflow with specialized Claude Code agents
They split company work across Claude Code agents for product, design, engineering, and marketing, with a human still steering the overall direction.
Use Claude Code to generate music with Python
Josh Cohenzadeh had Claude Code write Python that synthesized songs, made videos, and assembled a 5-track album.
Ask Claude for a release clip for your code project
A developer had Claude build a video-focused tool and then produce a short promo clip to accompany the repository announcement.
Edit a keynote take into two finished video formats
Andreas Fuchs used Claude Code to convert one keynote recording into a polished edit with captions, graphics, branding, music, and both widescreen and vertical exports.
Turn a reading passage into an interactive HTML lesson
A teacher used Claude Code to convert a passage into a ready-to-teach HTML lesson with practice activities and teacher controls.
Set up a chapter-by-chapter drafting workflow
A writer used Claude Code to plan and draft a novel in stages, generating 10 chapters and about 32,000 words in 17 minutes.