Does it support animations and transitions?

Absolutely. It integrates libraries like anime.js and advanced CSS animations to create high-impact motion design and delightful micro-interactions.

What frameworks can this skill work with?

It is framework-agnostic and can generate high-quality code for HTML/CSS/JS, React, Vue, and other modern frontend environments.

How does this skill avoid a 'generic AI' look?

The skill follows a strict design thinking process that avoids common system fonts and overused color palettes, instead selecting bold, intentional aesthetic directions like brutalism, luxury, or retro-futurism.

Can I provide a screenshot for Claude to replicate?

Yes. When you provide a screenshot, the skill uses a mandatory multimodal analysis workflow to extract hex codes, typography, and spacing before writing any code.

Frontend Design Expert

Name: Frontend Design Expert
Author: hotriluan

byhotriluan

0•

デザインツール

Creates distinctive, production-grade frontend interfaces with high design quality and custom aesthetic directions.

The Frontend Design skill transforms Claude into a high-end UI engineer capable of building sophisticated web interfaces that avoid generic 'AI slop' aesthetics. By leveraging multimodal AI to extract precise design guidelines from screenshots or employing a structured design-thinking process for original builds, it delivers polished, production-ready code. This skill prioritizes unique typography, bold spatial compositions, and advanced motion design to ensure every component and application is visually striking, accessible, and tailored to specific brand identities.

主な機能

01Sophisticated motion design integration using anime.js and CSS

02Production-grade implementation across major frameworks like React and Vue

03Multimodal design extraction for precise screenshot-to-code replication

04Anti-generic aesthetic engine that avoids overused fonts and layouts

05Automated visual asset generation and background removal

060 GitHub stars

ユースケース

01Replicating high-fidelity UI mockups from screenshots with exact brand accuracy

02Developing bold, unique landing pages with distinctive typography and layouts

03Enhancing existing components with creative textures, gradients, and micro-interactions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hotriluan/alkanacoating frontend-design

For use in Claude.ai and ChatGPT

Download Skill