skills.rest
quangtuyennguyen
quangtuyennguyenCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

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 distinctive, production-grade frontend code with a clear aesthetic point of view instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Setting: Commits to a bold design direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Guidelines: Provides concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and textured backgrounds. - Anti-Generic Constraints: 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 HTML/CSS or React implementation with a distinctive display font, orchestrated page-load animations, and a cohesive visual identity rather than a generic template. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component with a distinctive visual design for your product.

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, pair a distinctive display font with a refined body font, and use dominant colors with sharp accents. Avoid generic fonts like Inter and Roboto, purple-gradient cliches, and predictable layouts.

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

Generic design comes from overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes like purple gradients on white, predictable layouts, and cookie-cutter components lacking context-specific character.

Which frameworks does this frontend design approach support?▼

It supports plain HTML/CSS/JS as well as React and Vue. For React projects, it recommends the Motion library for animations, while HTML implementations should prioritize CSS-only animation solutions.

How should animations be used in web interface design?▼

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, using CSS-only solutions for HTML and Motion for React.

When should I choose minimalism versus 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, precision, and careful attention to spacing, typography, and subtle details.

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
encoredevencoredev
26

encore-frontend

Generate a typed TypeScript client for React/Next.js frontends from Encore.ts APIs.

Official
Intermediate
cromesdkcromesdk

angular-storybook-setup

Install and configure Storybook with addons for Angular 20 Tailwind CSS applications.

Official
Advanced
EngineerWithAIEngineerWithAI
4

tailwind-design-system

Build scalable Tailwind CSS design systems with CVA variants and Radix UI primitives.

Official
Intermediate