interface-design

Name: interface-design
Availability: InStock
Author: jbonfim

Design dashboard and admin panel interfaces grounded in user intent and domain concepts.

Updated May 15, 2026

Search Tags:#design systems #dashboard #interface design #typography hierarchy #color tokens #ux validation #ui craft

Ready to run

npx skills add https://github.com/JBonfim/skill-developer --skill interface-design-jbonfim

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/JBonfim/skill-developer/tree/main/.agents/skills/interface-design
Command: npx skills add https://github.com/JBonfim/skill-developer --skill interface-design-jbonfim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents generic, template-like UI output by forcing interface decisions to be driven by product intent, domain context, and explicit design tradeoffs rather than default styling patterns.

Core Features & Use Cases

Domain-first interface direction: Extracts product-world concepts, color vocabulary, and a unique “signature” element before proposing UI structure.
Systemic craft principles: Enforces subtle layering, hierarchy, typography, spacing, tokens, and interaction states to achieve professional polish.
Critique and validation workflow: Iteratively checks for craft gaps (swap test, squint test, signature test, token test) and refines toward a less default, more specific result.

Quick Start

Ask the AI to design an admin dashboard interface using your product’s domain vocabulary and a clear signature element, while applying subtle surface layering, a spacing system, and a strict typography hierarchy.

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

To design a dashboard interface that avoids generic templates, ground your layout decisions in product intent, domain context, and explicit design tradeoffs rather than default styling patterns. This forces intentional UI craft through domain-first direction and systemic principles.

What is a signature element in interface design and when do I need one?▼

A signature element in interface design is a unique visual or interactive component extracted from your product's domain vocabulary. You need one before proposing UI structure to ensure your admin panel or SaaS app feels intentionally crafted rather than default.

How do I apply color tokens and typography hierarchy to a SaaS admin panel?▼

To apply color tokens and typography hierarchy to a SaaS admin panel, define a strict visual system using subtle surface layering, spacing rules, and token validation. This ensures consistent UI craft across multiple pages and interaction states.

Does this interface design approach work for data-oriented screens and tools?▼

Yes, this interface design approach works for data-oriented screens and tools by applying critique workflows like the swap test and squint test. It iteratively checks for craft gaps and refines component-level layout decisions for professional polish.

What is the best way to validate UI craft and consistency across multiple dashboard states?▼

The best way to validate UI craft and consistency across multiple dashboard states is through a checklist-based critique workflow. This involves running swap, squint, signature, and token tests to identify gaps and refine toward a more specific result.