frontend-design
Frontend-design guides creation of distinctive, working web interfaces that reject generic AI output. It enforces a context-gathering protocol to understand your audience and brand personality, then commits to a bold aesthetic direction—whether brutally minimal, maximalist, or any other intentional style—before implementing production-grade code with meticulous attention to typography, color, layout, and interaction.
Frontend-design helps you build visually distinctive web interfaces with intentional, production-grade aesthetics.
AI-generated summary based on this skill's SKILL.md
Install
AkaraChen/aghub/frontend-design · repository language: TypeScript
git clone https://github.com/AkaraChen/aghub
cp -r aghub/.agents/skills/frontend-design ~/.claude/skills/frontend-designFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does frontend-design help create a distinctive website that doesn't look generic?
Frontend-design guides you through a context-gathering protocol to understand your audience and brand personality, then commits to a bold, intentional aesthetic direction before writing code. Rather than defaulting to generic templates, it enforces deliberate choices in typography, color, layout, and interaction—whether your direction is brutally minimal, maximalist, or any other cohesive style—ensuring your interface has real visual personality and avoids AI-generated aesthetics.
Can frontend-design build production-ready frontend components with custom styling?
Yes. Frontend-design produces production-grade UI components with meticulous attention to refined typography, color harmony, and spatial rhythm. It delivers working code that's ready to deploy, not placeholder mockups. The skill prioritizes building responsive, accessible interfaces with cohesive visual language while maintaining the intentional design direction established during the context phase.
What makes frontend-design different from generic web design tools?
Frontend-design rejects generic AI output by enforcing a protocol that gathers design context first—understanding your audience, brand, and goals—before committing to a specific aesthetic direction. This intentional approach, combined with production-ready code implementation, creates memorable user experiences with strong visual personality rather than defaulting to bland, off-the-shelf aesthetics.
How do I make my UI look professionally designed using frontend-design?
Frontend-design combines strategic design thinking with technical execution. It starts by establishing your visual direction through context gathering, then implements that vision with refined choices in typography, color, and layout. The result is a web interface with cohesive visual language and intentional aesthetic personality—avoiding the flat, generic look of AI-generated designs and delivering interfaces that feel professionally crafted.
Does frontend-design create visually striking web applications with responsive design?
Frontend-design builds responsive, accessible web interfaces that stand out visually while working reliably across devices. It combines bold aesthetic choices with practical responsive architecture, ensuring your application maintains its distinctive visual personality and memorable user experience whether viewed on desktop, tablet, or mobile.
SKILL.md
rendered from the published skill — quoted content, verbatim
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.
Context Gathering Protocol
Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work.
Required context — every design skill needs at minimum:
- Target audience: Who uses this product and in what context?
- Use cases: What jobs are they trying to get done?
- Brand personality/tone: How should the interface feel?
Individual skills may require additional context — check the skill's preparation section for specifics.
CRITICAL: You cannot infer
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
.agents/skills/frontend-design/SKILL.md
.agents/skills/frontend-design/reference/color-and-contrast.md
.agents/skills/frontend-design/reference/interaction-design.md
.agents/skills/frontend-design/reference/motion-design.md
.agents/skills/frontend-design/reference/responsive-design.md
.agents/skills/frontend-design/reference/spatial-design.md
.agents/skills/frontend-design/reference/typography.md
.agents/skills/frontend-design/reference/ux-writing.md