skills.rest
dashed
dashedCOMMUNITY
Explore all skills by this author →
Website𝕏@dasheddashedGitHub

design-principles

Enforces grid spacing, typography hierarchy, and accessible color for admin and product dashboards.

22|6|Updated Nov 22, 2025
Search Tags:#typography#design#UI#enterprise#spacing#design-systems
One-click install
npx skills add https://github.com/dashed/claude-marketplace --skill design-principles-dashed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/dashed/claude-marketplace/tree/main/plugins/design-principles
Command: npx skills add https://github.com/dashed/claude-marketplace --skill design-principles-dashed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI-generated user interfaces often lack polish and consistency, leading to fragmented experiences across products. This skill enforces a disciplined design language to deliver enterprise-grade interfaces.

Core Features & Use Cases

  • Unified visual language: Applies a strict 4px grid, symmetric padding, and a deliberate depth strategy to create cohesive interfaces.
  • Typography & color discipline: Defines a clear typographic hierarchy and accessible color usage for readability and meaning.
  • Use Case: When starting a new admin dashboard or SaaS dashboard, use these principles to ensure a polished, scalable design system.

Quick Start

Design an admin dashboard using the design-principles guidelines (4px grid, symmetrical padding, intentional depth, and typography hierarchy). Example prompt: "Create an analytics dashboard with a polished surface, accessible color contrast, and consistent spacing."

Frequently Asked Questions about design-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated UI designs look more professional for enterprise software?▼

Enterprise UI design requires a disciplined visual language using a 4px grid, symmetrical padding, and intentional depth rules. These principles ensure cohesive, scalable interfaces for admin panels and SaaS dashboards.

What is the best way to establish consistent spacing in an admin dashboard design system?▼

Consistent spacing in admin dashboards is achieved by applying a strict 4px grid and symmetrical padding. This creates a unified visual language and ensures accessible surfaces across enterprise software interfaces.

How does typography hierarchy improve the readability of SaaS dashboards?▼

Typography hierarchy improves dashboard readability by defining clear visual weight and structure for text. This discipline ensures accessible color semantics and a polished enterprise interface.

Can I use these enterprise design principles for non-dashboard UI components?▼

Yes, these enterprise design principles can be applied to non-dashboard UI components. While tailored for admin panels and dashboards, the underlying 4px grid and accessible color semantics can guide general interface consistency.

Why does my AI-generated interface lack visual polish and consistent depth?▼

AI-generated interfaces lack polish and consistent depth because they often miss a deliberate design strategy. Enforcing intentional depth rules, a 4px grid, and accessible color semantics corrects this fragmentation.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
hanamizukihanamizuki
127

taste-stitch

Translate design requirements into a DESIGN.md scaffold for Google Stitch.

Community
Advanced
arvindbattulaarvindbattula

design-typography

Audit font choices, hierarchy, and readability to produce consistent typography systems.

Community
Intermediate
abhay-ranaabhay-rana
2

design-principles

Enforce a 4px grid and typography hierarchy for enterprise UI design.

Community
Basic