skills.rest
Peterson-Benhame
Peterson-BenhameCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces with distinctive typography, color, layout, and motion design.

Updated Sep 15, 2026
Search Tags:#typography#accessibility#frontend#css#color palette#web design#ui design
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill frontend-design-peterson-benhame
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28design%29/frontend-design
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill frontend-design-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces often look generic and templated, relying on overused fonts, purple gradients, and card-in-card layouts. This Skill guides the creation of distinctive, production-grade web interfaces that avoid recognizable AI design patterns. ## Core Features & Use Cases - Aesthetic Direction: Commits to a bold, intentional design direction covering typography, color palettes, spatial rhythm, motion, and interaction patterns. - In-Depth Design References: Provides detailed guidance on OKLCH color systems, fluid typography, container queries, easing curves, focus states, and UX writing through dedicated reference files. - Anti-Pattern Detection: Applies an explicit checklist of AI design clichés to avoid, such as gradient text, glassmorphism overuse, and hero-metric layouts. - Use Case: Ask for a landing page for a developer tools product and receive a complete implementation with a distinctive type pairing, cohesive tinted palette, fluid spacing, and staggered entrance animations instead of a generic SaaS template. ## Quick Start Build a landing page for my analytics product with a bold editorial aesthetic that does not look like a typical AI-generated SaaS site.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated websites look less generic?▼

Commit to a bold aesthetic direction with distinctive font pairings, tinted neutral palettes, and asymmetric layouts. Avoid common AI tells like purple-to-blue gradients, Inter or Roboto fonts, cards nested in cards, and gradient text on headings.

What color format should I use for modern CSS design systems?▼

Use OKLCH instead of HSL because it is perceptually uniform, meaning equal lightness steps look equal across hues. Reduce chroma as you approach white or black, and tint neutrals slightly toward your brand hue for cohesion.

Does this skill work for design review or auditing existing sites?▼

No, this skill is for creating new interfaces only. For design review or audits of existing work, use the web-design-guidelines or web-quality-audit skills instead, as stated in the skill description.

Which CSS properties are safe to animate for good performance?▼

Animate only transform and opacity, since other properties trigger layout recalculation. For height animations like accordions, transition grid-template-rows from 0fr to 1fr instead of animating height directly.

How do I handle dark mode correctly in CSS?▼

Dark mode is not inverted light mode. Use lighter surfaces instead of shadows for depth, never use pure black backgrounds, slightly desaturate accent colors, and redefine only semantic tokens while keeping primitive tokens unchanged.

Related Skills

Explore More Design & Creative Skills→
mklozmkloz

impeccable

Create production-grade frontend interfaces from design context and constraints.

Community
Advanced
javi2481javi2481

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and usability gaps.

Community
Intermediate
OthmanAdiOthmanAdi

gmira-a11y

Audit web application accessibility by measuring contrast, focus order, and semantic HTML roles.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate