skills.rest
seanreed1111
seanreed1111COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design

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

Updated Feb 2, 2026
Search Tags:#design system#visual design#frontend development#ui design#craftsmanship#ux/ui
One-click install
npx skills add https://github.com/seanreed1111/langgraph-blog-repo --skill design-seanreed1111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/seanreed1111/langgraph-blog-repo/tree/main/.claude/skills/design
Command: npx skills add https://github.com/seanreed1111/langgraph-blog-repo --skill design-seanreed1111

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a rigorous framework for designing user interfaces that are not only aesthetically pleasing but also highly functional and contextually appropriate, moving beyond generic defaults to create distinctive digital products.

Core Features & Use Cases

  • Design Direction: Guides the selection of a product's visual personality, color foundation, layout, and typography.
  • Core Craft Principles: Enforces a consistent 4px grid, symmetrical padding, defined border-radius systems, and strategic depth.
  • Use Case: When starting a new SaaS dashboard, use this Skill to define a "Precision & Density" design direction, select a cool color foundation, and implement a dense grid layout with sharp border radii for a professional, efficient feel.

Quick Start

Use the design skill to establish a 'Precision & Density' design direction for a new developer tool.

Frequently Asked Questions about design

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

FAQPage Schema
How do I design a UI grid system for data-heavy SaaS dashboards?▼

Establish visual design direction for SaaS products by defining a visual personality, color foundation, layout, and typography. This framework moves beyond generic defaults to create distinctive, high-quality user experiences.

What is the best way to apply depth and border-radius in frontend UI design?▼

Apply depth and border-radius in frontend UI design by using strategic depth strategies and a defined border-radius system. This creates a crafted, context-specific interface with intentional visual hierarchy.

Can I use this design framework for non-SaaS applications?▼

Use this framework for non-SaaS applications if they require precise, minimal design principles. While optimized for data-heavy SaaS interfaces, the core craftsmanship rules apply to any context-specific UI requiring intentional visual direction.

How do I start creating a Precision and Density design direction for a developer tool?▼

Start creating a Precision and Density design direction by selecting a cool color foundation and implementing a dense grid layout with sharp border radii. This achieves a professional, efficient feel for developer tools.

Why do my dashboard interfaces look generic and lack visual intentionality?▼

Dashboard interfaces look generic when they rely on default styling rather than intentional design. Establishing a rigorous framework with a 4px grid, defined typography, and strategic depth creates distinctive, crafted digital products.

Related Skills

Explore More Design & Creative Skills→
vobasevobase
59

bolder

Amplify visual impact of UI designs across typography, color, and motion.

Official
Intermediate
yoshihiko555yoshihiko555

design-principles

Enforce a 4px grid, typography hierarchy, and accessibility guidelines for enterprise dashboards.

Community
Intermediate
qqrusqqrus

ux-designer

Provide UX design guidelines for user research, wireframing, prototyping, and information architecture.

Community
Advanced
bflandevbflandev
1

component-inventory

Derive a reusable UI component library from a screen inventory.

Community
Intermediate