What design styles does this skill emulate?

It is inspired by the clean, high-performance, and high-quality UI/UX found in 'S-tier' SaaS platforms like Stripe, Airbnb, and Linear.

Does this skill provide actual CSS code?

It provides the structural guidelines, tokens, and checklists that help Claude generate high-quality CSS and UI components tailored to your framework.

Does it support modern CSS frameworks like Tailwind?

Yes, it recommends utility-first architectures like Tailwind CSS as a primary method for implementing its design tokens.

Is accessibility included in these principles?

Yes, the skill enforces WCAG AA+ standards, including color contrast, keyboard navigability, and screen reader compatibility.

Can I use this for specific modules like Admin Panels?

Absolutely. It contains specific design tactics for data tables, configuration panels, and multimedia moderation modules.

SaaS Design Principles & UI Patterns

Name: SaaS Design Principles & UI Patterns
Author: nmhjklnm

bynmhjklnm

•

Design Tools

Applies high-end design principles and S-tier SaaS patterns to create polished, production-grade user interfaces.

This skill equips Claude with a comprehensive framework for building and reviewing modern SaaS dashboards and interfaces inspired by industry leaders like Stripe, Airbnb, and Linear. It provides structured guidance on design tokens, typography, layout hierarchy, and interaction design, ensuring that frontend implementations are not only functional but also aesthetically refined, accessible (WCAG AA+), and performance-optimized. Whether you are building complex data tables, media moderation panels, or configuration dashboards, this skill ensures a consistent and premium user experience.

Key Features

01Comprehensive design system checklists for tokens, typography, and spacing

02Accessibility-first patterns following WCAG AA+ standards

03Performance-focused interaction design and purposeful micro-animations

04Domain-specific guidance for complex SaaS modules like data tables and media moderation

05Strategic CSS architecture recommendations for Tailwind, BEM, or CSS-in-JS

061 GitHub stars

Use Cases

01Developing a cohesive design system from scratch using standardized design tokens

02Reviewing existing frontend code to identify UI inconsistencies and usability gaps

03Designing a responsive SaaS dashboard with complex data visualization and navigation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nmhjklnm/suiying-marketplace design-principles

For use in Claude.ai and ChatGPT

Download Skill