How does it handle typography and color?

It intentionally avoids generic system fonts and 'cliché' AI color schemes, opting for distinctive font pairings and cohesive, high-contrast palettes that give projects a unique identity.

What frontend technologies does this skill support?

It generates production-ready code for standard web stacks including HTML/CSS/JS, React, Vue, and Angular, prioritizing modern CSS features and high-performance libraries.

Is the code generated by this skill production-grade?

Absolutely. It follows existing project patterns, matches the team's coding style, and ensures the project remains in a working, deployable state.

Does it support motion and animation?

Yes, the skill focuses on high-impact motion moments such as staggered reveals and scroll-triggered transitions to create a premium feel while maintaining performance.

Can this skill create designs without Figma or Adobe XD mockups?

Yes, this skill is specifically optimized to envision and execute high-quality UI/UX designs directly from functional requirements without needing external design files.

Frontend UI/UX Designer

Name: Frontend UI/UX Designer
Author: robertpelloni

byrobertpelloni

•

デザインツール

Crafts visually stunning, production-grade frontend interfaces with a designer's eye for aesthetics and interaction.

This skill empowers Claude to act as a designer-turned-developer, bridging the gap between code and high-end visual design. It focuses on creating emotionally engaging interfaces characterized by distinctive typography, bold color palettes, and sophisticated motion design, even in the absence of pre-existing mockups. By moving away from generic defaults and 'AI-slop' patterns, it ensures that every UI has a unique character—whether minimalist or maximalist—while maintaining production-grade code quality and pixel-perfect attention to detail.

主な機能

01Executes bold aesthetic directions from brutally minimal to maximalist chaos

02Adds visual depth through gradient meshes, noise textures, and layered transparencies

033 GitHub stars

04Creates high-impact motion sequences using CSS-only transitions or React Motion libraries

05Implements advanced typography pairings and custom CSS variable-based color systems

06Applies spatial composition techniques like asymmetry and grid-breaking layouts

ユースケース

01Refining a generic-looking dashboard into a premium, professional interface

02Developing a unique landing page or brand identity without existing design mockups

03Adding sophisticated micro-interactions and staggered entry animations to a web application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add robertpelloni/borg frontend-ui-ux

For use in Claude.ai and ChatGPT

Download Skill