skills.rest
nokonoko1203
nokonoko1203COMMUNITY
Explore all skills by this author →
Website𝕏@nokonoko_1203GitHub

design-principles

Enforce precise, minimal design systems for enterprise software and SaaS dashboards.

93|15|Updated Jul 17, 2025
Search Tags:#minimalism#design system#ux design#frontend development#ui design#pixel perfect
One-click install
npx skills add https://github.com/nokonoko1203/claude-code-settings --skill design-principles-nokonoko1203
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/nokonoko1203/claude-code-settings/tree/main/symlinks/codex/skills/design-principles
Command: npx skills add https://github.com/nokonoko1203/claude-code-settings --skill design-principles-nokonoko1203

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps enforce precise, minimal, and contextually appropriate design systems for UIs, ensuring a polished and professional look and feel.

Core Features & Use Cases

  • Design System Enforcement: Guides the creation of UIs adhering to specific design philosophies (e.g., Linear, Notion, Stripe).
  • Contextual Design Decisions: Prompts users to consider product context, user needs, and emotional jobs before coding.
  • Craft Principles: Provides detailed guidance on grids, spacing, typography, depth, and color usage.
  • Use Case: When building a new SaaS dashboard, use this Skill to ensure consistent spacing, typography, and a deliberate color palette that aligns with the product's intended user experience.

Quick Start

Apply the design-principles skill to ensure the new dashboard adheres to a precise, minimal design system.

Frequently Asked Questions about design-principles

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

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

A minimal design system is enforced by applying core craft principles like a 4px grid, symmetrical padding, consistent border radius, and deliberate color foundations to ensure a polished, professional look.

What design principles should I follow for pixel perfect UI design?▼

Pixel perfect UI design requires consistent card layouts, a defined depth strategy, contextual typography, and a 4px grid system to align frontend development with precise aesthetic standards.

Can I use this approach for enterprise software dark mode considerations?▼

Dark mode considerations are explicitly addressed for enterprise software, guiding contextual design decisions for navigation context, color foundations, and depth strategy in dark UI themes.

How do I make contextual design decisions before building a web application?▼

Contextual design decisions are made by evaluating product context, user needs, and emotional jobs before coding, ensuring the UI layout and typography align with the intended user experience.

What is the best way to establish color foundations and typography for a UI?▼

The best way to establish color foundations and typography is to enforce a specific design philosophy, such as Linear or Stripe, ensuring minimal and contextually appropriate depth and spacing across the application.

Related Skills

Explore More Design & Creative Skills→
zhengxuyuzhengxuyu

Problem Statement

Articulate user problems using an empathy-driven framework with persona and root causes.

Community
Basic
0xrohan100xrohan10

design-principles

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

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

design-system-context

Enforce theme-defined CSS variables for colors and border-radius in frontend components.

Community
Intermediate
hyperfinity-techhyperfinity-tech

design-principles

Enforce a minimalist design system for enterprise SaaS dashboards.

Official
Advanced