Can I use this for specific frameworks like React or Vue?

Yes, the skill is framework-agnostic and provides high-quality code for React, Vue, or vanilla HTML/CSS and PHP.

Can I specify a particular design style?

Yes, you can request specific tones like brutalist, luxury, minimalist, or retro-futuristic, and the skill will execute that vision with precision.

Does it include support for web animations?

Absolutely, it prioritizes CSS-only solutions or specialized libraries like anime.js for high-impact motion design and staggered reveals.

Is the generated code ready for production?

Yes, it focuses on production-grade code that balances visual excellence with technical performance, responsiveness, and accessibility.

How does this skill differ from standard Claude output?

It is specifically tuned to avoid common AI design tropes like the Inter font or purple gradients, favoring bold, intentional design choices and high-quality typography.

Frontend Design Pro

Name: Frontend Design Pro
Author: piotroq

bypiotroq

0•

设计工具

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

The Frontend Design skill transforms Claude into a high-end UI/UX engineer capable of producing memorable, production-ready interfaces. It moves beyond standard component patterns by applying deliberate design thinking—focusing on unique typography, sophisticated motion design via libraries like anime.js, and unconventional spatial compositions. This skill is ideal for developers who need to build web applications that stand out with a specific aesthetic point-of-view, ranging from brutalist and raw to luxury and refined, ensuring every line of code serves a cohesive visual direction.

主要功能

01Utilizes sophisticated typography pairing and non-traditional grid layouts for visual impact.

02Eliminates 'AI slop' by avoiding generic font families like Inter or Roboto and cliché color schemes.

03Generates production-grade, accessible code across frameworks like React, Vue, and vanilla PHP/HTML.

040 GitHub stars

05Implements advanced motion design and micro-interactions using CSS and anime.js.

06Applies deep aesthetic intentionality to backgrounds, textures, and spatial composition.

使用场景

01Creating high-conversion landing pages that require sophisticated animations and premium visual details.

02Refactoring static HTML templates into dynamic, high-end PHP or framework-based web applications.

03Building unique UI component libraries that require a specific brand identity or artistic direction.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add piotroq/adwokat-trzebnica-html-to-php-com frontend-design

For use in Claude.ai and ChatGPT

主要功能

01Utilizes sophisticated typography pairing and non-traditional grid layouts for visual impact.

02Eliminates 'AI slop' by avoiding generic font families like Inter or Roboto and cliché color schemes.

03Generates production-grade, accessible code across frameworks like React, Vue, and vanilla PHP/HTML.

040 GitHub stars

05Implements advanced motion design and micro-interactions using CSS and anime.js.

06Applies deep aesthetic intentionality to backgrounds, textures, and spatial composition.

使用场景

01Creating high-conversion landing pages that require sophisticated animations and premium visual details.

02Refactoring static HTML templates into dynamic, high-end PHP or framework-based web applications.

03Building unique UI component libraries that require a specific brand identity or artistic direction.