What makes this different from standard AI-generated code?

This skill specifically instructs Claude to avoid 'AI slop'—common patterns like Inter fonts or generic gradients—and instead focus on distinctive typography, intentional spacing, and bold aesthetic choices.

Which frontend frameworks are supported?

The skill can generate high-quality code for React, Vue, and vanilla HTML/CSS/JS, adapting its implementation to match the technical constraints of your project.

Does it include responsive design and accessibility?

Yes, while the focus is on high-end aesthetics, the skill emphasizes production-grade code which includes mobile responsiveness and professional spatial composition.

Can I use it to style existing components?

Absolutely. You can use this skill to beautify existing UI elements, apply new themes, or refactor generic components into polished, visually striking interfaces.

Frontend Design Architect

Name: Frontend Design Architect
Author: thanhtoan105

bythanhtoan105

•

デザインツール

Generates distinctive, production-grade frontend interfaces with high-quality aesthetics that avoid generic AI design patterns.

The Frontend Design skill transforms Claude into a sophisticated UI/UX engineer capable of producing bespoke, high-fidelity web interfaces. Rather than defaulting to common 'AI slop' aesthetics like overused system fonts and standard purple gradients, this skill applies intentional design thinking to create memorable websites, dashboards, and components. It guides the implementation of unique typography, bold spatial compositions, and advanced motion design across various frameworks like React and Vue, ensuring every interface has a clear, professional-grade aesthetic point-of-view ranging from brutalist minimalism to refined luxury.

主な機能

01Generates production-ready code for React, Vue, and vanilla HTML/CSS environments

021 GitHub stars

03Eliminates generic AI aesthetics by using unique typography and non-standard layouts

04Implements advanced motion design and micro-interactions for enhanced user delight

05Supports diverse design directions including Brutalist, Retro-futuristic, and Minimalist

06Utilizes sophisticated spatial composition techniques like grid-breaking and asymmetry

ユースケース

01Creating polished, interactive dashboards with unique data visualization styles

02Developing custom UI component libraries with a cohesive and brand-specific visual language

03Building a high-impact SaaS landing page that stands out from template-driven competitors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thanhtoan105/accounting_erp_chatbot frontend-design

For use in Claude.ai and ChatGPT

Download Skill