What grid system does it use?

It enforces a strict 4px grid system (4, 8, 12, 16, 24, 32px) to ensure every element is perfectly aligned and mathematically balanced.

Which design systems inspired this skill?

The skill is modeled after the refined aesthetics of high-end tech products including Linear, Notion, Stripe, and Vercel.

How does this skill improve UI generation?

It forces the AI to move beyond generic defaults by committing to a specific design personality and following strict mathematical rules for spacing, typography, and depth.

Does it support dark mode?

Yes, it includes specific instructions for dark mode that prioritize border emphasis and surface color shifts over traditional shadows for better clarity.

Enterprise Design Principles

Name: Enterprise Design Principles
Author: dashed

bydashed

•

Design Tools

Applies elite, intentional UI patterns and enterprise-grade design systems to frontend code generation.

About

This skill elevates AI-generated user interfaces from generic layouts to professional-grade products by enforcing strict design standards inspired by industry leaders like Stripe, Linear, and Vercel. It guides Claude to commit to specific design personalities—such as technical precision or sophisticated warmth—ensuring visual consistency through a 4px grid system, intentional typography hierarchies, and sophisticated depth strategies that make every component feel production-ready.

Key Features

Intentional depth strategies using layered shadows and border emphasis
Professional typography scales with specific weight and letter-spacing rules
Six distinct design personalities for specific use cases like Fintech or DevTools
5 GitHub stars
Optimized animation easing and custom icon integration with Phosphor Icons
Strict 4px grid system enforcement for consistent spacing and alignment

Use Cases

Building high-density dashboards for data analysis and enterprise monitoring
Creating polished, consumer-facing SaaS applications with a premium feel
Designing technical developer tools that require high information density and precision

About

Key Features

Intentional depth strategies using layered shadows and border emphasis
Professional typography scales with specific weight and letter-spacing rules
Six distinct design personalities for specific use cases like Fintech or DevTools
5 GitHub stars
Optimized animation easing and custom icon integration with Phosphor Icons
Strict 4px grid system enforcement for consistent spacing and alignment

Use Cases

Building high-density dashboards for data analysis and enterprise monitoring
Creating polished, consumer-facing SaaS applications with a premium feel
Designing technical developer tools that require high information density and precision