skills.rest
ironkid90-s
ironkid90-sOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Generates distinctive production-grade frontend interfaces with cohesive aesthetic direction and polished code.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of frontend interfaces with a deliberate, distinctive aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, maximalist, etc.) before writing any code. - Production-Grade Implementation: Produces working HTML/CSS/JS, React, or Vue code with refined typography, motion, spatial composition, and visual detail. - Anti-Generic Guardrails: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched purple-gradient palettes, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, cohesive color system, staggered load animations, and an asymmetric layout tailored to the brand's tone. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component for your product and specify the mood or audience you want the design to target.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a landing page that doesn't look AI-generated?▼

Commit to a specific aesthetic direction before coding, choose distinctive display and body fonts instead of Inter or Roboto, and use a dominant color palette with sharp accents. Add one well-orchestrated page load animation with staggered reveals rather than scattered micro-interactions.

What makes frontend design look generic or like AI slop?▼

Generic designs rely on overused fonts like Inter, Roboto, and Arial, cliched purple gradients on white backgrounds, and predictable cookie-cutter layouts. Avoiding these defaults and making intentional, context-specific choices produces distinctive results.

Which fonts should I use for distinctive web design?▼

Pair a characterful display font with a refined body font, avoiding generic families like Arial, Inter, and Roboto. Vary choices across projects rather than converging on popular picks like Space Grotesk, so each design feels purpose-built for its context.

Does this approach work with React and Vue components?▼

Yes, the same design principles apply to HTML/CSS/JS, React, and Vue implementations. For React, use the Motion library for animations when available; for plain HTML, prioritize CSS-only animation solutions.

When should I choose minimalism over maximalism in web design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precise spacing, and refined typography. Match implementation complexity to the aesthetic vision.

Related Skills

Explore More Design & Creative Skills→
WeWake1WeWake1

frontend-design

Generate distinctive production-grade frontend interfaces with typography, color, motion, and interaction guidelines.

Community
Advanced
aditriokaaditrioka

verify-loop

Execute end-to-end tests on the nearyou-id app across Android and iOS.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
andrewle9510andrewle9510

fd-components

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

Community
Advanced