skills.rest
sayonari
sayonariCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

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

Updated Aug 5, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/sayonari/claude-skills --skill frontend-design-sayonari
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/sayonari/claude-skills/tree/main/frontend-design
Command: npx skills add https://github.com/sayonari/claude-skills --skill frontend-design-sayonari

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often fall into generic aesthetics with overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Selection: Commits to a bold design concept (brutalist, editorial, retro-futuristic, maximalist, refined minimal, etc.) before writing any code. - Design Quality Guidelines: Enforces distinctive typography pairing, cohesive CSS-variable color themes, orchestrated animations, asymmetric spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly bans overused fonts (Inter, Roboto, Arial), cliched color schemes, and converging on common choices across generations. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS page with a characterful display font, staggered load animations, grain textures, and a layout tailored to that brand rather than a generic template. ## Quick Start Build a landing page for a specialty coffee brand with a bold editorial aesthetic using the frontend-design skill.

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 web designs look less generic?▼

Commit to a specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Use distinctive font pairings instead of Inter or Roboto, dominant colors with sharp accents, and asymmetric layouts with intentional motion rather than default templates.

How to build a landing page with React or HTML and CSS?▼

Define the purpose, audience, and tone first, then implement working code in HTML/CSS/JS or React. Prioritize one well-orchestrated page load with staggered reveals, CSS-only animations where possible, and the Motion library for React when available.

What fonts should I avoid in web UI design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and default system fonts, which signal generic AI output. Pair a distinctive display font with a refined body font, and vary choices across projects instead of converging on popular options like Space Grotesk.

Does this approach work for both minimalist and maximalist design?▼

Yes, both directions work when executed with intentionality. Maximalist designs need elaborate animations and effects, while minimalist designs need restraint, precise spacing, and refined typography. The key is matching implementation complexity to the aesthetic vision.

Why do AI-generated websites all look the same?▼

They default to cliched patterns like purple gradients on white backgrounds, predictable component layouts, and the same popular font families. Avoiding this requires explicit differentiation decisions and context-specific creative choices for each project.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
thkim2015thkim2015

moai-platform-deployment

Deploy and host applications on Vercel, Railway, and Convex platforms.

Community
Advanced
iamasters-academyiamasters-academy
20

tool-output-verifier

Validate text outputs for brand consistency, readability, length, and factual accuracy.

Official
Advanced
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced