Does the skill handle animations and transitions?

Yes, it specializes in motion design, using CSS-only solutions for simplicity or libraries like anime.js for more complex, high-impact interactions.

Can I request specific design styles like Brutalism or Minimalism?

Absolutely. You can specify a tone such as brutally minimal, maximalist, retro-futuristic, or industrial, and the skill will execute a cohesive design based on that direction.

Which frontend frameworks are supported by this skill?

The skill can generate high-quality code for HTML/CSS/JS, React, Vue, and other modern frameworks, tailoring the complexity to the chosen aesthetic vision.

How does this skill avoid generic AI-generated aesthetics?

It is specifically programmed to avoid overused fonts like Inter or Arial and cliché color schemes, instead opting for bold, intentional design directions and unique typographic choices.

Frontend Design

Name: Frontend Design
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

디자인 도구

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

This skill empowers developers to build unique web components and applications that break away from generic, AI-generated design patterns. By committing to bold aesthetic directions—ranging from brutalist to luxury refined—the skill focuses on meticulous typography, sophisticated motion design, and creative spatial compositions. It provides production-ready code for React, Vue, or vanilla HTML/CSS, ensuring that every interface is not only functional but also visually unforgettable and meticulously refined to avoid common AI-driven design tropes.

주요 기능

01Implements diverse aesthetic themes including retro-futuristic, minimalist, and maximalist styles.

020 GitHub stars

03Utilizes advanced typography pairings and custom CSS variable-based color systems.

04Generates production-grade code for components, landing pages, and complex web applications.

05Creates non-standard spatial layouts including grid-breaking elements and asymmetrical flows.

06Integrates high-impact motion design and micro-interactions using CSS and anime.js.

사용 사례

01Developing custom UI component libraries with sophisticated animations and distinct character.

02Rapidly prototyping creative web interfaces that prioritize high-quality design and user experience.

03Building high-end brand landing pages that require a unique, non-generic visual identity.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/openclaw frontend-design

For use in Claude.ai and ChatGPT

주요 기능

01Implements diverse aesthetic themes including retro-futuristic, minimalist, and maximalist styles.

020 GitHub stars

03Utilizes advanced typography pairings and custom CSS variable-based color systems.

04Generates production-grade code for components, landing pages, and complex web applications.

05Creates non-standard spatial layouts including grid-breaking elements and asymmetrical flows.

06Integrates high-impact motion design and micro-interactions using CSS and anime.js.

사용 사례

01Developing custom UI component libraries with sophisticated animations and distinct character.

02Rapidly prototyping creative web interfaces that prioritize high-quality design and user experience.

03Building high-end brand landing pages that require a unique, non-generic visual identity.