ui-design

Provides practical UI/UX design principles for developers to build polished web interfaces and dashboards.

6|Updated Feb 4, 2026
One-click install
npx skills add https://github.com/futuregerald/futuregerald-claude-plugin --skill ui-design-futuregerald
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/futuregerald/futuregerald-claude-plugin/tree/main/skills/ui-design
Command: npx skills add https://github.com/futuregerald/futuregerald-claude-plugin --skill ui-design-futuregerald

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Practical UI design principles for developers and non-designers to create professional, usable interfaces without formal design training. Use when designing web interfaces, components, dashboards, landing pages, or any visual design work. Covers hierarchy, spacing, typography, color, depth, and polish; based on Refactoring UI methodology.

Core Features & Use Cases

  • Practical Guidelines: Visual hierarchy, spacing systems, color theory, typography, and depth to guide building polished interfaces.
  • Use Cases: For web interfaces, components, dashboards, landing pages, and other visual design work where consistency and polish matter.
  • Real-World Example: Given a new admin panel, apply the guidelines to establish a clear visual hierarchy and coherent typography system.

Quick Start

Apply the hierarchy, spacing, and typography guidelines to the header of a product dashboard.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I design a UI dashboard with clear visual hierarchy and spacing?

Design a UI dashboard with clear visual hierarchy and spacing by applying structured guidelines to establish depth, coherent typography, and consistent spacing systems. This enforces a structured approach to layout and visual polish for professional interfaces.

What are practical UI design fundamentals for developers without formal training?

Practical UI design fundamentals for developers include visual hierarchy, spacing systems, color theory, typography, and depth. These principles guide building polished, usable web interfaces and components without requiring formal design training.

How do I create a coherent color system and typography for web interfaces?

Create a coherent color system and typography for web interfaces by applying pragmatic design guidelines that enforce structured approaches to color theory and typography selection. This ensures consistency and visual polish across components.

Can I use these UI design guidelines for marketing sites and landing pages?

Yes, you can use these UI design guidelines for marketing sites and landing pages. The guidelines apply to web interfaces, components, dashboards, and any visual design work where consistency, hierarchy, and polish matter.

What is the best way to establish visual hierarchy in an admin panel?

The best way to establish visual hierarchy in an admin panel is to apply structured guidelines for layout, typography, and depth. This approach ensures clear visual structure and coherent typography systems for professional interfaces.

Why does my web interface lack visual polish despite having functional components?

Your web interface lacks visual polish because it misses a structured approach to hierarchy, spacing, typography, and color systems. Applying pragmatic design fundamentals enforces visual consistency and depth across components.