skills.rest
Ishaq74
Ishaq74COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, reusing the same fonts, purple gradients, and predictable layouts. This Skill guides the creation of frontend code with a committed, distinctive aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Framework: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Quality Guidelines: Enforces distinctive typography pairing, cohesive CSS-variable color themes, orchestrated animations, asymmetric layouts, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly bans overused fonts (Inter, Roboto, Arial), cliched gradients, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand and receive a complete HTML/CSS page with a unique editorial layout, characterful font pairing, staggered load animations, and grain-textured backgrounds rather than a template-looking result. ## 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 specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Pair a distinctive display font with a refined body font, use dominant colors with sharp accents, and add atmospheric details like grain overlays or gradient meshes instead of defaulting to Inter and purple gradients.

How to create a landing page with HTML and CSS that stands out?▼

Define the purpose, audience, and tone first, then implement asymmetric layouts, unexpected font pairings, and one well-orchestrated page load with staggered reveals. Avoid cookie-cutter component patterns and evenly-distributed timid color palettes.

What fonts should I avoid in web design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and default system fonts, which signal template-like design. Choose characterful, unexpected typefaces and pair a distinctive display font with a refined body font for visual hierarchy.

Does this skill work with React or only plain HTML/CSS?▼

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

When should I use minimalism versus maximalism in interface design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precise spacing, refined typography, and subtle details. The key is matching implementation complexity to the chosen 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
lightninglabslightninglabs
57

aperture

Protect backend services with a Lightning-powered L402 reverse proxy requiring payment.

Official
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
renpayerorenpayero

tailwind-design-system

Centralize design tokens and components for consistent Tailwind-based UI development.

Community
Advanced