interface-design

Guides intent-driven design of dashboards, admin panels, and app interfaces with craft checks.

Updated Jun 2, 2026
One-click install
npx skills add https://github.com/AdrianRomo/MedLab-Chatbot --skill interface-design-adrianromo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/AdrianRomo/MedLab-Chatbot
Command: npx skills add https://github.com/AdrianRomo/MedLab-Chatbot --skill interface-design-adrianromo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces tend to fall back on generic dashboard templates, default fonts, and template-looking layouts. This Skill forces an intent-first design process so dashboards, admin panels, SaaS tools, and settings pages emerge from the product's actual domain instead of shared defaults. ## Core Features & Use Cases - Domain Exploration Protocol: Requires naming domain concepts, a color world, a signature element, and rejected defaults before proposing any design direction. - Craft Foundations: Provides concrete systems for surface elevation, border progression, text hierarchy, spacing scales, depth strategies, and token architecture. - Self-Critique Mandate: Includes swap, squint, signature, and token tests to catch generic output before showing the user, plus a persistent .interface-design/system.md pattern memory. - Use Case: When asked to build a lab management admin panel, the Skill first explores the laboratory domain (colors, vocabulary, signature elements), proposes a direction referencing that exploration, then builds components with consistent tokens and states. ## Quick Start Ask the assistant to design an admin dashboard for your product and let the interface-design skill guide the domain exploration and component build.

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?

Start with domain exploration before any visual work: name at least five domain concepts, five colors from the product's world, one signature element, and three defaults you reject. Then derive layout, tokens, and components from that intent rather than from a standard dashboard pattern.

What is the difference between interface design and marketing page design?

This Skill covers product interfaces such as dashboards, admin panels, tools, and settings pages where hierarchy, density, and states matter. Landing pages and marketing sites are explicitly out of scope and redirected to a frontend-design skill.

How should I structure CSS design tokens for an app?

Map every color to primitives: foreground text hierarchy with four levels, background surface elevation steps, a border progression from subtle to emphasis, plus brand and semantic colors. Name tokens after the product's world rather than generic names like gray-700.

Does this approach work for dark mode interfaces?

Yes. Dark mode guidance is included: rely more on borders than shadows for definition, slightly desaturate semantic colors, and keep the same elevation hierarchy with inverted lightness values.

When should I not use this interface design process?

Avoid it for marketing sites, landing pages, and campaign designs, which the Skill explicitly excludes. It is also heavier than needed for one-off throwaway prototypes where no design system consistency is required.