Engineer uses Claude Code metaphors to escape generic AI design
Software engineer Justin Ahinon shares a workflow for steering Claude Code past generic AI aesthetics using physical metaphors and a `/frontend-design` skill to give each side project a distinctive visual identity.
Score breakdown
Developers building side projects can escape generic AI-generated aesthetics by combining a reactive iteration approach with a `/frontend-design` skill and a single physical metaphor prompt — no design background required.
- 01Author Justin Ahinon applied this workflow across four side projects: WhatIsThatBook, DishCost, naps.sh, and Threadcast.
- 02His first prompt is always intentionally vague — no color palette, no vibe — so the generic output serves as a negative design brief.
- 03A `/frontend-design` Claude Code skill instructs the model to avoid generic AI aesthetics and use editorial typography like Playfair Display and Instrument Serif instead of Inter.
Justin Ahinon describes a design workflow he settled into across four side projects — WhatIsThatBook, DishCost, naps.sh, and Threadcast — after his landing pages started embarrassing him. His core realization is that Claude Code's default output is a "beige SaaS dashboard," and that the skill isn't prompting Claude to generate good design from nothing, but rather steering it away from generic output through reaction and iteration. His first prompt is always intentionally vague, letting Claude produce whatever it defaults to, then using that draft as a negative brief: if the hero is teal, he knows he doesn't want teal.
The two techniques that most transformed his output are the `/frontend-design` skill and physical metaphors.
The two techniques that most transformed his output are the `/frontend-design` skill and physical metaphors. The `/frontend-design` skill explicitly instructs Claude to avoid generic AI aesthetics, commit to bold directions, and use editorial typefaces like Playfair Display and Instrument Serif instead of Inter. He quotes a real session where a single prompt — "use /frontend-design skill" — caused Claude to completely reimagine a naps.sh design from a soft cream aesthetic to a dark researcher's-desk aesthetic. The physical metaphor technique goes further: telling Claude that WhatIsThatBook "should feel like walking into a dusty indie bookshop" caused the nav to become book spines, the loading state to become a sliding bookmark, and a 404 page concept ("lost in the stacks") to emerge organically. DishCost received the metaphor "a chef's line prep sheet — clipboards, ticket paper, terracotta, sage," and naps.sh got "a researcher's desk after hours." Ahinon argues that a single metaphor sentence does more work in subsequent prompts than any color palette, because it keeps every design decision in a consistent lane.
Key facts
- 01Author Justin Ahinon applied this workflow across four side projects: WhatIsThatBook, DishCost, naps.sh, and Threadcast.
- 02His first prompt is always intentionally vague — no color palette, no vibe — so the generic output serves as a negative design brief.
- 03A `/frontend-design` Claude Code skill instructs the model to avoid generic AI aesthetics and use editorial typography like Playfair Display and Instrument Serif instead of Inter.
- 04A single prompt invoking `/frontend-design` caused Claude to fully reimagine a naps.sh design from a cream/soft aesthetic to a dark researcher's-desk aesthetic.
- 05WhatIsThatBook was given the metaphor 'walking into a dusty indie bookshop,' which led Claude to generate book-spine navigation, a bookmark loading state, and a 'lost in the stacks' 404 concept without explicit instruction.