skills.rest
zagarlucas
zagarlucasCOMMUNITY
Explore all skills by this author →
GitHub

interface-design

Provides UI design and style guidance for dashboards, including layout and accessibility considerations.

Updated Jan 27, 2026
Search Tags:#typography#consistency#dashboard#interface#color-tokens#craft#surface-elevation
One-click install
npx skills add https://github.com/zagarlucas/zagarlucas.github.io --skill interface-design-zagarlucas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/zagarlucas/zagarlucas.github.io/tree/main/.agents/skills/interface-design
Command: npx skills add https://github.com/zagarlucas/zagarlucas.github.io --skill interface-design-zagarlucas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps teams craft consistent, craft-driven interfaces for dashboards and admin tools by centering user intent, structural hierarchy, and design craft over generic templates.

Core Features & Use Cases

  • Intent-first design guidance for dashboards, admin panels, SaaS apps, and data interfaces.
  • Subtle layering and surface elevation to establish hierarchy without visual noise.
  • Token architecture for color, typography, borders, and accessibility states to maintain consistency.
  • Reusable patterns for navigation, layouts, and components across product features.
  • Use Case: design a data-rich admin dashboard with multi-panel layout, responsive sidebar, and focused primary actions.

Quick Start

Draft a domain-focused interface design plan for a new dashboard, emphasizing intent-first decisions, subtle layering, and a single signature interaction.

Frequently Asked Questions about interface-design

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

FAQPage Schema
How do I design a consistent dashboard interface without relying on generic templates?▼

To design a consistent dashboard interface without generic templates, codify intent-driven guidelines for surface elevation, typography hierarchy, spacing, and color tokens to establish structural hierarchy and reusable interaction patterns.

What's the best way to establish visual hierarchy in a data-rich admin panel?▼

The best way to establish visual hierarchy in a data-rich admin panel is using subtle layering and surface elevation techniques to create depth and structure without introducing unnecessary visual noise.

How do I set up color tokens for SaaS dashboard accessibility states?▼

Set up color tokens for SaaS dashboard accessibility by defining a token architecture that systematically covers colors, typography, borders, and accessibility states to maintain consistent visuals across all product features.

Can I use these interface design guidelines for multi-panel layouts and responsive sidebars?▼

Yes, you can apply these interface design guidelines to multi-panel layouts and responsive sidebars. They provide reusable patterns for navigation, layouts, and components specifically suited for SaaS dashboards and admin tools.

When should I not use intent-first design for my data interface?▼

You should not use intent-first design for your data interface when your project requires rapid deployment of standard templates over craft-driven consistency, or when structural hierarchy and surface elevation are not priority concerns.

Related Skills

Explore More Design & Creative Skills→
dtsongdtsong
1

intake-skill

Transform natural language project descriptions into structured engagement briefs.

Community
Advanced
HemanthTennetiHemanthTenneti

normalize

Normalize frontend UI components to match design system standards and tokens.

Community
Intermediate
alongor666alongor666
1

vue-component-dev

Develop Vue 3 components with Pinia stores and ECharts charts.

Community
Intermediate
MikisbellMikisbell

interface-design

Design context-aligned interfaces for dashboards, admin panels, and SaaS tools.

Community
Intermediate