skills.rest
asarchami
asarchamiCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

1|2|Updated Nov 25, 2017
Search Tags:#typography#ui#html#frontend#css#web design#animations
One-click install
npx skills add https://github.com/asarchami/dotfiles --skill frontend-design-asarchami
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/asarchami/dotfiles/tree/main/dot_config/opencode/skills/ui_skills/frontend-design
Command: npx skills add https://github.com/asarchami/dotfiles --skill frontend-design-asarchami

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 distinctive, production-grade frontend code with a committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Framework: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, etc.) before writing any code. - Design Guidelines: Covers typography pairing, CSS variable color systems, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand and receive a complete HTML/CSS/JS page with a distinctive editorial layout, custom font pairing, staggered load animations, and grain-textured backgrounds rather than a generic template. ## Quick Start Ask the agent to build a landing page or web component with a specific aesthetic direction, such as a brutalist portfolio page with bold typography and scroll-triggered animations.

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. Use distinctive font pairings, dominant colors with sharp accents, and unexpected layouts instead of default fonts like Inter and predictable component patterns.

What makes a frontend design look production-grade?▼

Production-grade design combines functional working code with cohesive typography, CSS variable-based color systems, purposeful animations, and refined details. Every spacing, font, and interaction choice should serve a clear conceptual direction.

Which fonts should I avoid in web design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and system defaults, as well as commonly converged choices like Space Grotesk. Instead pair a distinctive display font with a refined body font that matches the project's aesthetic direction.

Does this approach work with CSS frameworks and animations?▼

Yes, the guidelines prioritize CSS-only transitions and animations for micro-interactions and page load sequences. Implementation complexity should match the aesthetic vision, from restrained minimalism to elaborate maximalist effects.

When should I use 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→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
Impertio-StudioImpertio-Studio
163

frappe-ops-website-deploy

Deploy static HTML/CSS assets as ERPNext/Frappe Web Pages via REST API.

Official
Advanced
coreyonecoreyone
1

a11y-debugging

Audit web pages for WCAG AA accessibility violations using Lighthouse and browser accessibility trees.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate