How do you make a Claude Code project that doesn't look vibecoded?
Most apps built with Claude Code look alike: the same purple gradient, the same rounded cards, the same centred hero with three feature boxes underneath. Are there Claude Code projects that do not look like that, and what did their builders do differently to get a distinct design?
The generic look comes from leaving design decisions to defaults. When you ask for 'a landing page', the model fills every gap with the most common choice it has seen, which is why the results converge. Projects that look distinct start with decisions made before any code: a reference site or two, a short palette, one or two typefaces, and a description of who the page is for.
Ask for a design plan first and the code second. Have the agent write down colours, type scale, spacing and layout for this specific subject, check it, and only then build. A plan you can read is much easier to correct than a finished page.
Critique in passes. After the first build, ask for a review of hierarchy, spacing and contrast against the plan, and fix those before adding features. Many vibecoded apps look generic because nobody went back after the first version.
Small details carry a lot: real copy instead of placeholder text, consistent spacing, and removing decoration that does not help the user. Design skills help most by forcing these steps into every run.
Listings mentioned
- Frontend design · skill by anthropicsAnthropic's skill that has Claude plan colours, type and layout for your subject before coding, so the UI stops looking generic.
- Impeccable · skill by pbakausCovers designing, critiquing and polishing an interface, including hierarchy, layout, cognitive load and accessibility.
Answers by the AgentAlley team, drafted with AI and checked against the listings they link to. Not a real-person reply from the original thread.