skills.rest
qbstabletampa-creator
qbstabletampa-creatorCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

Updated May 28, 2026
Search Tags:#typography#ui#React#landing page#frontend#css#web design
One-click install
npx skills add https://github.com/qbstabletampa-creator/firmware-foundation-studios --skill frontend-design-qbstabletampa-creator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/qbstabletampa-creator/firmware-foundation-studios/tree/main/archive/apps/manna-catch/.agents/skills/frontend-design
Command: npx skills add https://github.com/qbstabletampa-creator/firmware-foundation-studios --skill frontend-design-qbstabletampa-creator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, 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: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, luxury, etc.) before writing any code. - Design Guidelines: Applies concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations matched in complexity to the design vision. - Use Case: Ask for a landing page for a coffee brand and receive a polished, memorable page with characterful fonts, scroll-triggered reveals, and a cohesive theme rather than a generic template. ## Quick Start Ask the AI to build a landing page, dashboard, or React component for your product with a distinctive visual style.

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 Arial, purple gradients, and predictable component patterns.

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

Generic design comes from overused font families (Inter, Roboto, Arial), cliched color schemes like purple gradients on white, predictable layouts, and cookie-cutter patterns lacking context-specific character. Intentional, differentiated choices fix this.

Which fonts should I use for distinctive web design?▼

Choose unexpected, characterful fonts rather than common defaults. Pair a distinctive display font for headlines with a refined body font, and vary choices across projects instead of converging on popular options like Space Grotesk.

Does this approach work with React and Vue components?▼

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

How should animations be used in frontend interfaces?▼

Focus on high-impact moments like one well-orchestrated page load with staggered reveals using animation-delay, plus scroll-triggering and surprising hover states. Match animation complexity to the aesthetic vision rather than scattering micro-interactions.

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
CapatainaCapataina
1

check-integrity

Audit the Cernio SQLite database for schema integrity and grade staleness.

Community
Advanced
PostalocityPostalocity
1

ckm:ui-styling

Integrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.

Official
Advanced