What frameworks does this skill support?

It generates production-grade code for HTML/CSS/JS, React, Vue, and other modern frameworks, including support for motion libraries and CSS variables.

Is the code generated by this skill production-ready?

Yes, the skill focuses on delivering functional, clean, and performant code that meets high professional standards for both aesthetics and technical implementation.

How does this skill avoid generic AI-generated looks?

The skill is specifically programmed to avoid common 'AI slop' patterns, such as overused font families (Inter/Roboto) and cliché purple-on-white gradients, instead choosing bold, intentional aesthetic directions.

Can I request specific design styles like Brutalism or Minimalism?

Absolutely. The skill thrives on specific aesthetic directions; you can prompt it for styles ranging from maximalist chaos and retro-futurism to refined luxury and industrial aesthetics.

Frontend Design Specialist

Name: Frontend Design Specialist
Author: akiojin

byakiojin

•

デザインツール

Generates high-fidelity, production-grade frontend interfaces that prioritize unique aesthetics over generic AI-generated patterns.

The Frontend Design skill empowers Claude to move beyond 'AI slop' by applying professional design thinking to web development tasks. It focuses on creating memorable, distinctive user interfaces by leveraging bold typography, sophisticated color palettes, and advanced motion design. Whether you are building a brutalist landing page or a refined luxury application, this skill ensures that the generated code is not only functional but also visually striking and professionally polished, adhering to specific aesthetic themes like retro-futurism or minimalist precision to ensure your project stands out.

主な機能

01Aesthetic Direction: Commits to specific design tones like brutalist, luxury, or retro-futuristic to avoid generic looks.

02Motion & Micro-interactions: Implements high-impact CSS and Motion library animations for staggered reveals and interactive states.

03Visual Texturing: Adds depth through gradient meshes, noise overlays, grain textures, and decorative borders.

042 GitHub stars

05Spatial Innovation: Utilizes unexpected layouts, grid-breaking elements, and intentional asymmetry for visual interest.

06Advanced Typography: Selects unique, characterful font pairings instead of standard system fonts like Inter or Arial.

ユースケース

01Building high-converting landing pages for creative agencies or startups that require a distinctive brand identity.

02Developing unique component libraries with cohesive, non-standard visual systems and interactive elements.

03Prototyping editorial-style web applications that require sophisticated spatial composition and advanced typography.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add akiojin/llmlb frontend-design

For use in Claude.ai and ChatGPT

Download Skill