skills.rest
rubensrpj
rubensrpjCOMMUNITY
Explore all skills by this author →
Website𝕏@rubensrpjGitHub

design-principles

A new-generation Chinese text-to-image AI model capable of rendering legible text, achieving high-resolution output, and performing well in human-subjective comparisons.

Updated Feb 5, 2026
Search Tags:#UI/UX#minimalism#design system#interface design#design principles#craftsmanship
One-click install
npx skills add https://github.com/rubensrpj/mustard --skill design-principles-rubensrpj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/rubensrpj/mustard/tree/main/templates/skills/design-principles
Command: npx skills add https://github.com/rubensrpj/mustard --skill design-principles-rubensrpj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually cohesive, precise, and aesthetically pleasing user interfaces by providing a structured design system and enforcing core craft principles.

Core Features & Use Cases

  • Design System Enforcement: Guides the creation of UIs with a consistent 4px grid, symmetrical padding, and defined border-radius scales.
  • Contextual Design Direction: Helps choose appropriate design personalities, color foundations, and layout approaches based on product context and user needs.
  • Use Case: When building a new SaaS dashboard, use this Skill to define a "Precision & Density" design direction, establish a cool color foundation, and ensure all spacing and typography adhere to the 4px grid for a professional, minimalist look.

Quick Start

Apply the design-principles skill to establish a "Precision & Density" design direction for a new admin interface.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I create a minimal design system for a SaaS dashboard?▼

To create a minimal design system for a SaaS dashboard, enforce a precise 4px grid, use symmetrical padding, consistent border-radius, and deliberate depth strategies. This ensures visually cohesive, professional interfaces with intentional personality.

What design principles ensure pixel-perfect UI craftsmanship?▼

Pixel-perfect UI craftsmanship requires adhering to core design principles like a strict 4px grid, symmetrical padding, defined border-radius scales, and deliberate depth strategies to achieve visually cohesive and aesthetically pleasing interfaces.

Can I use this design system approach for admin interfaces?▼

Yes, you can use this design system approach for admin interfaces. It enforces a precise, minimal design system inspired by leading SaaS products, guiding layout approaches, color foundations, and typography specifically for dashboards and web applications.

How do I choose a color foundation and layout for my web application?▼

Choose a color foundation and layout by defining a contextual design direction based on your product context and user needs. This approach guides you in selecting appropriate design personalities and layout approaches for crafted, context-driven user interfaces.

What is the best way to maintain spacing consistency in interface design?▼

The best way to maintain spacing consistency in interface design is mandating adherence to a 4px grid with symmetrical padding. This structured design system approach prevents misalignment and ensures a cohesive aesthetic across all UI components.

Why does my UI design lack intentional personality and cohesion?▼

Your UI design lacks intentional personality and cohesion if it does not enforce a structured design system. Establishing core craft principles like a 4px grid, consistent border-radius, and deliberate depth strategies addresses this need for crafted, context-driven user interfaces.

Related Skills

Explore More Design & Creative Skills→
0xrohan100xrohan10

design-principles

Enforce a minimalist UI design system with a 4px grid and defined depth strategy.

Community
Intermediate
seanreed1111seanreed1111

design

Define 4px grid, padding, border-radius, and depth for SaaS dashboards.

Community
Intermediate
sudatsudat

design-principles

Enforce 4px grid, symmetrical padding, and consistent border-radius in UI design.

Community
Intermediate
MixTapeSoftwareMixTapeSoftware
3

design-principles

Enforce a 4px grid design system for enterprise software interfaces.

Official
Intermediate