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

Ready to run

npx skills add https://github.com/rubensrpj/mustard --skill design-principles-rubensrpj

💬 Prompt for ChatGPT / Claude Chat▼

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.