No design skills? Produce clean design just by talking
What you will have built
A matching set: color & font system, logo (SVG), screen mockup, hero image
Claude Pro plan (or higher)required
The brain that turns design ideas into code (SVG/HTML) and image prompts. Use it right on claude.ai, or via the Claude Code extension in VS Code.
A computer and a web browserrequired
A browser is all you need to preview your designs (SVG/HTML).
(Optional) An image generatoroptional
For photo-like images, pair with an AI image generator. Without one, you can make illustrative SVG and shape graphics with Claude.
(Optional) VS Codeoptional
To apply designs straight into code, use VS Code like the coding tracks.
90% of design is 'consistency'. A few colors, one or two fonts, and a spacing rule already look far more professional. Claude sets these rules and makes them ready to use in code.
In this track we build one unified brand by talking, in order: color & font system → logo → screen mockup → images.
Tip
Pick one example brand to start. e.g. 'a calm meditation app for city workers, named SOOM'. The more specific, the better the result.
The fastest path is to log in to claude.ai and chat directly. To also apply results into code, use the Claude Code extension in VS Code.
Either way, a Pro plan or higher is enough.
Write one paragraph on what, for whom, and what feel. Ask Claude: "Set the design direction for the meditation app 'SOOM'. Mood: calm and minimal; audience: workers in their 20s-40s; it should feel trustworthy and relaxing."
Claude returns mood keywords, a color direction, and a font feel. This becomes your standard going forward.
Tip
If there's a brand or app you like, say 'feels like X' to lock the direction quickly.
Ask: "Make a color palette for 'SOOM'. Give primary, secondary, background, and text colors as HEX codes, and note when to use each. Also recommend free fonts for headings and body."
The HEX codes and font names you receive are the skeleton of your design. Swap anything you dislike: 'make the primary a calmer teal'.
Tip
To see if the colors work, ask Claude for 'a single HTML page showing this palette as swatches' and open it in a browser.
Ask: "Make a 'SOOM' text logo as SVG, with a soft curved feel, using the primary color above, plus a simple symbol for inhale/exhale beside it."
Paste the SVG code into a blank text file, save it as logo.svg, and open it in a browser to see your logo. Refine: 'simpler symbol', 'wider letter spacing'.
Tip
SVG never blurs no matter how big, which makes it best for logos and icons. Color and size changes are a one-line edit.
If you hit an error
Ask: "Make a mockup of SOOM's home screen as a single HTML file, using the colors/fonts/logo above. Put a big 'Start today's breathing' button in the center and three recommended-meditation cards below, in a mobile aspect ratio."
Save the code as design.html and open it in a browser to see it like a real screen. This locks the look before you build the real app.
Tip
Need several screens? Continue with 'make a settings screen in the same style' to keep the tone consistent.
For photo-like images, get an English prompt from Claude to feed an image generator: "Write an English prompt for a calm misty dawn lake image for SOOM's homepage, matching our brand colors (teal, off-white)."
If it doesn't need to be a photo, ask Claude to make an abstract shape/gradient background directly in SVG/CSS. For text-free abstract graphics, this approach is more reliable.
Heads up
Image generators often garble text. Don't bake logos or copy into the image, lay them on top as SVG/HTML (steps 4-5) for a clean result.
Collect your color codes, fonts, logo (SVG), and image files into one folder (assets). Now use this design directly in the website/app/video tracks.
To drop it straight into code, tell Claude in VS Code: "Apply these colors/fonts/logo to my Next.js project" and it wires it up.
Tip
Save your SVG logo as a PNG too (capture in browser or convert) so it's ready for slides, social media, anywhere.
Congratulations, you have a brand set where colors, fonts, logo, screens, and images all match.
Combine this design with the website/app/game tracks for results that look genuinely professional. Share your design in the community for feedback.
