frontend-design · Frontend Design Guidance
Visual design guidance for building new UI or reshaping existing UI: aesthetic direction, typography, and choices that don't read as templated defaults.
The core is opinionated, brief-specific decisions: palette, type, and layout grounded in the subject matter, industry, and audience — recognizing and avoiding current AI-design defaults (warm-cream background + serif display + terracotta accent, the SaaS card kit, etc.). A two-pass method: plan and self-check against the brief first, then build.
Example invocation: "Help me set the design direction for this financial data dashboard."
Full brief
Positioning
frontend-design is a design-methodology skill: it doesn't produce images or code directly. Instead, it acts as a design lead, guiding every visual decision to be "made for this brief" and rejecting templated defaults.
Core capabilities
- Subject grounding: identify the product's subject, audience, and primary job first; visual choices come from the subject's industry, materials, and vernacular.
- Default recognition: names the current clichés of AI-generated design (warm-cream + high-contrast serif + terracotta accent, acid-green-on-black, the SaaS card kit, generic tracked-out ALL-CAPS eyebrow labels) and steers away where the brief leaves the axis free.
- Typography principles: type carries the page's personality; one or two families with a clear scale; bans cheap treatments like accenting a single headline word.
- Structure as information: outlines, numbering, dividers encode real information only; numbered markers only for true sequences.
- Motion restraint: non-user-triggered motion gets one orchestrated moment; motion answering user actions is welcome.
- Two-pass method: compact design plan (palette/type/layout/principles) self-checked against the brief for uniqueness before any code; CSS specificity discipline while building.
Workflow
- Confirm the brief: subject, audience, design's primary job (propose and confirm when missing)
- Draft the design plan: 4–6 named hex colors, typefaces and roles, one-sentence layout concept + ASCII wireframes, uniqueness principles
- Self-check against the brief: if any part reads like the default answer to any similar brief, revise and state what changed and why
- Build to the revised plan with ongoing self-critique (screenshots when available)
Inputs & outputs
| Input | Notes |
|---|---|
| Design brief | Required: what product/page, for whom, primary job |
| Visual preferences | Optional; an explicit brief always wins |
Output: design plan (palette, type, layout, principles) → UI code implementing the plan.
Boundaries with adjacent skills
- This skill is methodology for design decisions; card-quote, poster-hero and similar are execution tools that render to fixed design systems.
Fit
- Establishing visual direction for new products/pages
- Reshaping existing UI away from templated looks
- Reviewing AI-generated design drafts for default-pattern problems
- Giving design teams a shared language for aesthetic decisions
Before you start
- No API key needed.
- Output quality tracks brief quality: the more specific the subject, audience, and job, the more grounded the design position; vague briefs get clarified first.
frontend-design is part of the Aiglade Skill library. Invoke it from the Aiglade chat box in plain language.