interface-design

Define design tokens and component patterns for cohesive dashboards and admin panels.

1|1|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/rodrigobranas/formacao_ia_arq_t1_4 --skill interface-design-rodrigobranas
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/rodrigobranas/formacao_ia_arq_t1_4/tree/main/mastra-rag/.agents/skills/interface-design
Command: npx skills add https://github.com/rodrigobranas/formacao_ia_arq_t1_4 --skill interface-design-rodrigobranas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design teams and product squads often deliver dashboards, admin panels, and interactive tools that feel generic or inconsistent. This skill provides a framework to craft cohesive interfaces with deliberate typography, spacing, surface elevation, and token-driven design.

Core Features & Use Cases

  • Establish a shared design language for dashboards, admin panels, SaaS apps, and internal tools.
  • Define surface elevation, border, typography, and color tokens to ensure consistent UX across screens.
  • Provide practical references, critiques, and validation workflows to maintain craft over time.

Quick Start

Describe your target interface and apply the craft principles to converge on a signature UI structure and token system.

Frequently Asked Questions about interface-design

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

FAQPage Schema
How do I create a consistent design system for dashboards and SaaS apps?

To create a consistent design system for dashboards, define surface elevation tokens, typography hierarchy, color tokens, and spacing scales. This establishes a shared design language that ensures visual consistency and coherent UX across admin panels and interactive tools.

What are surface elevation tokens and when do I need them for interface design?

Surface elevation tokens are design system variables that define shadow and depth levels for UI components. You need them for interface design when building dashboards or admin panels to maintain consistent visual hierarchy and spatial relationships across different screens.

How do I set up a typography hierarchy and spacing scale for an admin panel?

Setting up typography hierarchy and spacing scales for an admin panel involves defining token-driven values for font sizes, weights, and consistent spacing intervals. This framework guides UI engineers to craft cohesive interfaces with deliberate visual structure.

Can I use this approach to maintain visual consistency across internal tools?

Yes, you can maintain visual consistency across internal tools by applying reusable component patterns and token-driven design. This approach specifies requirements for color tokens and surface elevation to sustain a cohesive system across configuration panels and workflow tools.

What is the best way to critique and validate UI craft over time?

The best way to validate UI craft over time is to apply practical reference workflows and critiques against your established token system. This ensures your dashboards and SaaS apps retain deliberate typography, spacing, and visual consistency throughout future iterations.

Why does my dashboard interface feel generic and inconsistent?

Your dashboard interface feels generic and inconsistent when it lacks a deliberate framework for typography, spacing, surface elevation, and color tokens. Establishing these token-driven design elements provides the structure needed to craft cohesive interfaces rather than default layouts.