Can this skill help with animations?

Yes, it specializes in high-impact motion design using CSS-only solutions for simple effects and the anime.js library for complex, orchestrated reveals and micro-interactions.

How does the Frontend Design skill handle screenshot inputs?

It follows a mandatory workflow: first, it uses multimodal analysis to extract hex codes, typography, and spacing into a design guideline document; only then does it implement the code to ensure visual accuracy.

How does it avoid 'generic AI' looking designs?

The skill intentionally avoids common system fonts and predictable layouts. It encourages 'bold aesthetic directions' and uses distinctive typography and spatial compositions to ensure every interface feels custom-designed.

Does it require specific files in the repository?

Yes, it utilizes specific reference modules for design extraction, asset generation, and technical optimization located within the skill's reference directory.

What frameworks does this skill support?

It is framework-agnostic and can generate production-grade code for React, Vue, or standard HTML/CSS/JS depending on your project's technical constraints.

Frontend Design Pro

Name: Frontend Design Pro
Author: CongDon1207

byCongDon1207

•

デザインツール

Creates distinctive, production-grade frontend interfaces by applying advanced design thinking and multimodal extraction to avoid generic AI aesthetics.

概要

The Frontend Design skill transforms Claude into a sophisticated UI/UX engineer capable of building high-fidelity web components and applications. It bridges the gap between raw code and polished design by implementing a mandatory 'Design Thinking' workflow. When provided with screenshots, it uses multimodal analysis to extract precise color palettes, typography, and layout patterns; when building from scratch, it avoids 'AI slop' by committing to bold, intentional aesthetic directions like brutalism, minimalism, or retro-futurism. This skill is essential for developers who need code that isn't just functional, but visually unforgettable and production-ready.

主な機能

Creative 'Design Thinking' workflow for unique, non-generic UI aesthetics
Sophisticated motion design integration using anime.js and advanced CSS
Automated documentation of design guidelines and extracted styles
Custom asset generation and background removal for high-impact visuals
1 GitHub stars
Multimodal design extraction for replicating screenshots with high precision

ユースケース

Upgrading existing components with advanced textures, gradients, and micro-interactions
Building unique landing pages that require distinctive typography and non-standard layouts
Converting high-fidelity UI designs or screenshots into functional, pixel-perfect code

概要

主な機能

Creative 'Design Thinking' workflow for unique, non-generic UI aesthetics
Sophisticated motion design integration using anime.js and advanced CSS
Automated documentation of design guidelines and extracted styles
Custom asset generation and background removal for high-impact visuals
1 GitHub stars
Multimodal design extraction for replicating screenshots with high precision

ユースケース

Upgrading existing components with advanced textures, gradients, and micro-interactions
Building unique landing pages that require distinctive typography and non-standard layouts
Converting high-fidelity UI designs or screenshots into functional, pixel-perfect code