frontend-design

Design distinctive frontend interfaces from audience, use case, and tone context.

5|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/Gyanano/Bower --skill frontend-design-gyanano
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Gyanano/Bower/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Gyanano/Bower --skill frontend-design-gyanano

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents AI-generated, templated aesthetics by forcing the design of distinctive, production-grade front-end experiences that are grounded in explicit audience, use case, and tone context.

Core Features & Use Cases

  • Context Gathering Protocol: Verify target audience, jobs to be done, and brand personality before any layout work, even invoking teach-impeccable when no context is present.
  • Creative Direction: Commit to a cohesive, bold aesthetic—minimalist, maximalist, retro, or other—while honoring typography, color, spacing, and motion rules for memorable, refined interfaces.
  • Implementation Guidance: Follow the provided references on typography, color/contrast, spatial systems, interaction states, motion timing, responsive behavior, and UX writing to deliver production-ready code.

Quick Start

Request the required audience, use case, and brand tone details before sketching any layout so the design avoids generic AI slop.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I avoid generic AI aesthetics when generating frontend designs?

To avoid generic AI aesthetics in frontend designs, establish explicit audience, use case, and brand tone context before layout execution. This approach forces distinctive, production-grade interfaces by committing to a cohesive creative direction like minimalist or maximalist styles.

What context do I need to provide before creating production-grade frontend interfaces?

Creating production-grade frontend interfaces requires confirming the target audience, jobs to be done, and brand personality before sketching any layout. This contextual design direction ensures the final web components and pages meet specific tone goals.

Can I use this approach for both web applications and poster designs?

Yes, this design approach applies to web components, pages, posters, and applications. It ensures all outputs follow typography, color, motion, and responsiveness standards while maintaining the requested bold visual aesthetic.

How do I ensure my AI-generated UI meets typography and motion standards?

Ensure AI-generated UI meets typography and motion standards by following explicit design references for interaction states, motion timing, and spatial systems. This prevents templated aesthetics and delivers production-ready code grounded in audience context.

What's the best way to define creative direction for bold frontend visuals?

Defining creative direction for bold frontend visuals requires committing to a specific aesthetic style, such as retro or minimalist, while honoring established typography, color, and spacing rules. This contextual approach yields memorable, refined interfaces.