Does it handle responsive design and accessibility?

Yes, the skill incorporates technical constraints including performance, responsiveness, and accessibility into its design-thinking process.

Can I specify a particular aesthetic style?

Absolutely; you can request specific tones such as Brutalist, Minimalist, Luxury, Retro-futuristic, or Editorial to guide the visual output.

How does this skill differ from standard AI-generated code?

It explicitly avoids common AI design tropes like generic font pairings and predictable layouts, focusing instead on intentional, high-end design thinking and unique aesthetics.

Which frameworks are supported by this skill?

It is versatile and can generate code for React, Vue, and vanilla HTML/CSS, often integrating motion libraries like Framer Motion for high-impact interactions.

High-Fidelity Frontend Designer

Name: High-Fidelity Frontend Designer
Author: mashharuki

bymashharuki

0•

デザインツール

Generates distinctive, production-grade frontend interfaces with a focus on high-end typography, creative layouts, and sophisticated animations.

This skill empowers developers to break away from generic AI-generated aesthetics by implementing bold, intentional design choices across web components, landing pages, and dashboards. It emphasizes a design-thinking approach, guiding Claude to select specific stylistic directions—ranging from brutalist to luxury—while ensuring the resulting code is functional, accessible, and visually memorable. By focusing on intricate details like typography pairing, motion design, and non-traditional grid layouts, it bridges the gap between raw code and professional UI/UX design, making it ideal for creating standout web experiences.

主な機能

01Advanced CSS and Motion library animations for delightful micro-interactions.

02Expert typography pairing and sophisticated color palette generation.

03Avoids generic AI aesthetics by applying intentional, high-end design styles.

04Creative spatial compositions including asymmetrical layouts and grid-breaking elements.

05Deep visual detailing using noise textures, gradients, and custom overlays.

060 GitHub stars

ユースケース

01Styling a React-based dashboard with a specific 'Industrial' or 'Cyberpunk' aesthetic.

02Creating standout UI components for a portfolio or a high-end brand site.

03Building a landing page that needs a unique, premium editorial feel.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mashharuki/vibekanban-gitworktree-sample frontend-design

For use in Claude.ai and ChatGPT

主な機能

01Advanced CSS and Motion library animations for delightful micro-interactions.

02Expert typography pairing and sophisticated color palette generation.

03Avoids generic AI aesthetics by applying intentional, high-end design styles.

04Creative spatial compositions including asymmetrical layouts and grid-breaking elements.

05Deep visual detailing using noise textures, gradients, and custom overlays.

060 GitHub stars

ユースケース

01Styling a React-based dashboard with a specific 'Industrial' or 'Cyberpunk' aesthetic.

02Creating standout UI components for a portfolio or a high-end brand site.

03Building a landing page that needs a unique, premium editorial feel.