Can I request specific design styles?

Yes, you can request specific themes such as minimal, maximalist, retro-futuristic, organic, luxury, or industrial to guide the visual output.

Is the generated code ready for production?

Absolutely. The skill focuses on clean, functional, and responsive code that meets production-grade standards for performance and accessibility.

What frameworks does the Frontend Design skill support?

It is capable of generating high-quality code for HTML/CSS/JS, React, Vue, and other modern frontend frameworks based on user requirements.

How does this skill avoid generic AI designs?

It specifically avoids overused system fonts and 'cliché' color palettes, instead enforcing bold aesthetic directions like editorial layouts or brutalist textures.

Does it include animations?

Yes, the skill prioritizes high-impact motion design, utilizing CSS transitions for lightweight needs and libraries like Framer Motion for React.

Frontend Design Architect

Name: Frontend Design Architect
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Generates distinctive, production-grade frontend interfaces and components with a focus on high-quality aesthetics and creative UI design.

This skill empowers Claude to transcend generic AI-generated layouts by implementing bold, intentional design directions across web projects. It guides the creation of polished interfaces—ranging from brutalist dashboards to refined luxury landing pages—with meticulous attention to unique typography, motion design, and spatial composition. By enforcing specific aesthetic commitments and avoiding common 'AI slop' patterns, it ensures that every generated component or application feels uniquely crafted, professional, and production-ready.

Key Features

01Custom aesthetic selection including Brutalist, Retro-futuristic, and Minimalist styles

020 GitHub stars

03Creative spatial layouts featuring grid-breaking and asymmetrical elements

04Advanced motion design using CSS animations and Motion libraries

05Production-grade code generation for React, Vue, and vanilla HTML/CSS

06Sophisticated typography pairing using distinctive, non-generic fonts

Use Cases

01Creating sophisticated dashboards that balance utility with high-end design

02Building high-conversion landing pages with unique visual branding

03Developing polished, animated React components for modern web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front frontend-design

For use in Claude.ai and ChatGPT

Download Skill