← ClaudeAtlas

frontend-designlisted

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic 'AI slop' aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. ## Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: - \\Purpose\\: What problem does this interface solve? Who uses it? - \\Tone\\: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the...
prvthmpcypher/skills-design · ★ 0 · Web & Frontend · score 70
Install: claude install-skill prvthmpcypher/skills-design
# Frontend Design This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. ## Design Thinking Before coding, understand the context and commit to a BOLD aesthetic direction: - \*\*Purpose\*\*: What problem does this interface solve? Who uses it? - \*\*Tone\*\*: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction. - \*\*Constraints\*\*: Technical requirements (framework, performance, accessibility). - \*\*Differentiation\*\*: What makes this UNFORGETTABLE? What's the one thing someone will remember? \*\*CRITICAL\*\*: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is: - Production-grade and functional - Visually striking and memorable - Cohesive with a clear aesthetic point-of-view - Me