How does it avoid generic AI aesthetics?

For new projects, it applies specific design philosophy principles regarding color theory, spatial composition, and motion design rather than relying on default templates.

Does this skill work with existing projects?

Yes, it includes a mandatory design language analysis phase to ensure new components match your existing layout, typography, and theme system.

Can it help with building design systems?

Absolutely. It can help build new design systems from scratch or strictly enforce the rules of an established one during feature implementation.

Which frameworks are supported?

The skill is optimized for modern web technologies including React, Vue, Next.js, Tailwind CSS, and standard HTML/CSS.

Frontend Design & UI Architecture

Name: Frontend Design & UI Architecture
Author: JNLei

byJNLei

•

设计工具

Creates distinctive, production-grade frontend interfaces with a focus on aesthetic quality and architectural consistency.

This skill empowers Claude to act as a senior frontend architect, capable of either building bold, high-end visual designs from scratch or strictly adhering to existing design systems. By leveraging dual workflows—one for greenfield projects focused on typography and spatial composition, and another for existing codebases focused on pattern analysis and thematic consistency—it ensures that every UI modification or new feature feels intentional and production-ready across frameworks like React, Vue, and Next.js.

主要功能

01Design language analysis for existing codebases to ensure pattern consistency

02Advanced aesthetic principles including motion design and typography hierarchy

03Automated scanning of layout patterns, spacing, and theme systems

046 GitHub stars

05Structured 3-phase checklist for implementation in established projects

06Compatibility with modern frameworks like Next.js, React, Vue, and Tailwind CSS

使用场景

01Adding new pages or components to an enterprise application while maintaining visual parity

02Starting a new project with a unique, non-generic AI aesthetic and custom design tokens

03Refactoring existing UI to improve accessibility, spatial layout, and motion design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jnlei/claude-tools frontend-development

For use in Claude.ai and ChatGPT

主要功能

01Design language analysis for existing codebases to ensure pattern consistency

02Advanced aesthetic principles including motion design and typography hierarchy

03Automated scanning of layout patterns, spacing, and theme systems

046 GitHub stars

05Structured 3-phase checklist for implementation in established projects

06Compatibility with modern frameworks like Next.js, React, Vue, and Tailwind CSS

使用场景

01Adding new pages or components to an enterprise application while maintaining visual parity

02Starting a new project with a unique, non-generic AI aesthetic and custom design tokens

03Refactoring existing UI to improve accessibility, spatial layout, and motion design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jnlei/claude-tools frontend-development

For use in Claude.ai and ChatGPT