skills.rest
elcokiin
elcokiinCOMMUNITY
Explore all skills by this author →
Website𝕏@elcokiinGitHub

frontend-design

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

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

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 frontend code with a deliberate, distinctive aesthetic direction so every interface feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, maximalist, etc.) before writing any code. - Design System Guidance: Covers typography pairing, CSS variable-based color themes, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and cookie-cutter 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, cohesive palette, staggered load animations, and a memorable layout. ## 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 websites look less generic?▼

Commit to a clear aesthetic direction before coding, choose distinctive display fonts instead of Inter or Roboto, and use dominant colors with sharp accents rather than timid palettes. Add atmosphere through gradient meshes, noise textures, or grain overlays instead of flat solid backgrounds.

How to add animations to a frontend page?▼

Prioritize CSS-only animations for plain HTML, and use the Motion library for React projects. Focus on one well-orchestrated page load with staggered reveals via animation-delay, plus scroll-triggered effects and surprising hover states.

What frameworks does this frontend design skill support?▼

It produces working code in HTML/CSS/JS, React, Vue, or similar frameworks depending on the request. The design guidance on typography, color, motion, and layout applies regardless of the chosen stack.

Which fonts should I avoid in web design?▼

Avoid overused generic families like Inter, Roboto, Arial, and default system fonts, which signal templated AI output. Instead pair a distinctive, characterful display font with a refined body font to elevate the interface.

When should I use minimalism versus maximalism in UI 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. The key is matching implementation complexity to the aesthetic vision.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
evolving-machines-labevolving-machines-lab
76

shadcn-webapp-design

Standardizes creation of web interfaces using shadcn/ui, Tailwind CSS and Framer Motion for Next.js apps and dashboards.

Official
Advanced