skills.rest
haryelramalho
haryelramalhoCOMMUNITY
Explore all skills by this author →
Website𝕏@haryel_devGitHub

interface-design

Design distinctive interface systems for dashboards, admin panels, and SaaS apps.

Updated May 28, 2026
Search Tags:#ui#design systems#dashboard#product design#interface design#ux#craft
One-click install
npx skills add https://github.com/haryelramalho/skills --skill interface-design-haryelramalho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/haryelramalho/skills/tree/main/skills/curated/interface-design
Command: npx skills add https://github.com/haryelramalho/skills --skill interface-design-haryelramalho

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents generic, template-like interface output by forcing intent-first design. It helps you build dashboards, admin panels, SaaS apps, tools, and settings pages that feel specific to the product, the user, and the domain.

Core Features & Use Cases

  • Intent-first exploration: Defines who the human is, what they need to do, and how the interface should feel before any UI is built.
  • Domain-driven direction: Extracts concepts, color worlds, and a signature element from the product’s real-world context so the design feels native.
  • Craft systems and validation: Guides token architecture, subtle layering, spacing, typography, states, and dark mode with craft checks to avoid defaults.
  • Use cases: Designing an analytics dashboard, reworking an admin panel, shaping a SaaS settings screen, or critiquing an existing product UI for stronger hierarchy and presence.

Quick Start

Use the interface-design skill to design a dashboard for your product by defining the specific human, the task they must accomplish, the desired feel, the domain vocabulary, and a signature element before building.

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 dashboard that doesn't look like a generic template?▼

To design a dashboard that avoids generic templates, use intent-first analysis to define the specific user, extract domain vocabulary, build a product-specific color world, and introduce a unique signature element before styling components.

What is intent-first interface design and when should I use it?▼

Intent-first interface design defines who the human is, what they need to do, and how the interface should feel before any UI is built. Use it for dashboards, admin panels, SaaS apps, and settings screens requiring a non-generic presentation.

How do I build a design system for a SaaS app with proper tokens and states?▼

Build a SaaS app design system by establishing token architecture, subtle layering, spacing, typography, and dark mode. Validate your components against state principles to ensure visual hierarchy and avoid default styling.

Can I critique an existing admin panel UI to improve hierarchy and presence?▼

Yes, you can critique an existing admin panel UI by validating it against layering, spacing, typography, token, and state principles. This process strengthens visual hierarchy and product presence without starting from scratch.

What's the best way to plan layout and visual direction for product design?▼

The best way to plan layout and visual direction is through domain-driven extraction, pulling concepts, color worlds, and a signature element directly from the product’s real-world context so the interface feels native and specific.

Why does my SaaS settings screen feel generic and lack product identity?▼

Your SaaS settings screen feels generic because it lacks a unique signature element and domain-driven direction. Forcing intent-first analysis and extracting a product-specific color world ensures the UI feels native to the user's context.

Related Skills

Explore More Design & Creative Skills→
codesour-designcodesour-design

layers-conceptual-model

Model product objects, relationships, states, and vocabulary before interface design.

Community
Advanced
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate
cortezalbertocortezalberto

interface-design

Design consistent layout, typography, and navigation patterns for dashboards and admin panels.

Community
Advanced
kmshihab7878kmshihab7878
6

interface-design

Generate tailored interface design directions with tokenized design systems and validation checks.

Community
Advanced