skills.rest
trutoman
trutomanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate distinctive production-grade frontend interfaces with bold aesthetic direction.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend code generated by AI often looks generic, with overused fonts, cliched purple gradients, and cookie-cutter layouts. This Skill guides the creation of web interfaces with a committed, distinctive aesthetic direction so every page, component, or app feels intentionally designed. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual tone (brutalist, editorial, retro-futuristic, maximalist, refined minimal, etc.) before writing any code. - Design Craft Guidelines: Covers typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and predictable layouts. - 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, staggered load animations, and a cohesive visual identity rather than a default-looking template. ## Quick Start Ask the assistant to build a landing page, dashboard, or React component for your product and specify the mood or audience you want the design to target.

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 frontend designs look less generic?▼

Commit to a clear 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 avoid defaults like Inter, Roboto, and purple gradients on white.

What frameworks does this frontend design skill support?▼

It produces working code in HTML/CSS/JS, React, Vue, and similar stacks. For React projects it recommends the Motion library for animations, while plain HTML pages should prioritize CSS-only animation solutions.

How should animations be used in frontend design?▼

Focus on high-impact moments rather than scattered effects. One well-orchestrated page load with staggered reveals using animation-delay creates more delight than many small micro-interactions, supplemented by scroll-triggered and hover states.

Which fonts should be avoided in web UI design?▼

Avoid generic families like Arial, Inter, and Roboto, and do not converge on commonly repeated choices such as Space Grotesk. Instead select characterful, unexpected fonts and pair a distinctive display face with a refined body font.

When should a minimalist versus maximalist design approach be used?▼

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

Related Skills

Explore More Design & Creative Skills→
Pika-LabsPika-Labs
38

build-a-brand

Build a complete brand identity and 15-page brand guidelines PDF.

Official
Advanced
hoanghd218hoanghd218
7

hyperframes-registry

Install and wire HyperFrames registry blocks into host compositions.

Community
Intermediate
coreyonecoreyone
1

a11y-debugging

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

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

charts

Generate accessible responsive charts with shadcn/ui and recharts components.

Community
Intermediate