skills.rest
DCueto
DCuetoCOMMUNITY
Explore all skills by this author →
𝕏@dcuetomeGitHub

frontend-design

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

Updated Apr 1, 2026
Search Tags:#typography#ui#React#landing page#frontend#css#web design
One-click install
npx skills add https://github.com/DCueto/zen-track --skill frontend-design-dcueto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/DCueto/zen-track/tree/main/ZenTrackApp/.agents/skills/frontend-design
Command: npx skills add https://github.com/DCueto/zen-track --skill frontend-design-dcueto

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 committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, luxury, etc.) based on purpose, audience, and constraints before writing code. - Design Quality Guidelines: Applies concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Safeguards: Explicitly avoids overused font families, cliched color schemes, and predictable component patterns so each design feels context-specific. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS page with a distinctive display font, warm editorial palette, staggered load animations, and grain-textured backgrounds rather than a default-looking template. ## Quick Start Use the frontend-design skill to build a landing page for my product with a bold, memorable 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 clear aesthetic direction before coding, then execute it with distinctive font pairings, a cohesive color theme using CSS variables, and intentional motion. Avoid generic fonts like Inter and Arial, purple-gradient cliches, and predictable layouts.

What makes a good frontend design for websites and dashboards?▼

Strong frontend design combines characterful typography, dominant colors with sharp accents, well-orchestrated animations like staggered page-load reveals, and unexpected spatial composition such as asymmetry or overlap. Backgrounds should add atmosphere through textures, gradients, or grain overlays.

Does this skill work with React and Vue components?▼

Yes, the skill supports HTML/CSS/JS, React, Vue, and other frameworks. For React it recommends the Motion library for animations, while plain HTML implementations should prioritize CSS-only animation solutions.

Which fonts should I avoid in web UI design?▼

Avoid overused generic families like Inter, Roboto, Arial, and default system fonts, which signal cookie-cutter AI output. Instead pair a distinctive display font with a refined body font, and vary choices across projects rather than converging on popular picks.

When should I use minimalist versus maximalist web design?▼

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

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
NixdorferNixdorfer
3

项目指南技能（示例）

Provide project guidelines for architecture, code patterns, testing, and deployment workflows.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate