How does this skill avoid 'generic AI' aesthetics?

It explicitly avoids overused fonts like Inter or Arial and cliché color schemes, instead opting for bold typography, unique spatial layouts, and intentional design directions like maximalism or brutalism.

Which frontend frameworks are supported?

The skill can generate production-grade code for vanilla HTML/CSS/JS, React, Vue, and other modern frontend frameworks based on your project constraints.

Does it include animations and motion design?

Absolutely. It prioritizes high-impact motion, including CSS-only transitions, scroll-triggered reveals, and Framer Motion interactions for React components.

Can I use this for minimalist projects?

Yes. While it encourages bold choices, it excels at refined minimalism by focusing on precision, generous negative space, and subtle, high-quality details.

What kind of visual details can it add?

It can implement complex visual layers like gradient meshes, noise textures, geometric patterns, layered transparencies, and custom cursor effects.

Frontend Design Specialist

Name: Frontend Design Specialist
Author: akiojin

byakiojin

•

Herramientas de Diseño

Creates distinctive, production-grade frontend interfaces that avoid generic AI aesthetics through bold design choices and meticulous technical execution.

This skill transforms Claude into a sophisticated design engineer capable of building memorable, high-fidelity web interfaces. By moving beyond cookie-cutter AI templates, it focuses on unique typography, intentional spatial layouts, and custom motion effects to deliver production-ready code with a clear aesthetic point-of-view. It is ideal for developers who need to build components or applications that stand out with professional-grade polish and creative flair, ensuring every output feels bespoke rather than generated.

Características Principales

01Distinctive Typography: Pairs characterful fonts to elevate visual identity above generic system defaults.

02Production-Grade Implementation: Generates functional, refined code for React, Vue, or vanilla HTML/CSS.

031 GitHub stars

04Advanced Motion Design: Implements high-impact CSS animations and orchestrated micro-interactions.

05Aesthetic Direction Selection: Commits to bold themes like brutalist, luxury, or retro-futuristic.

06Creative Spatial Composition: Utilizes grid-breaking layouts, asymmetry, and intentional negative space.

Casos de Uso

01Prototyping distinctive UI systems for brand-heavy applications or digital magazines.

02Building a unique landing page that breaks away from standard SaaS templates.

03Creating highly interactive components with custom motion signatures and textures.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add akiojin/llm-router frontend-design

For use in Claude.ai and ChatGPT

Download Skill