interface-design

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

Updated May 16, 2026
One-click install
npx skills add https://github.com/michalo1334/ScenarioImpactDSL --skill interface-design-michalo1334
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/michalo1334/ScenarioImpactDSL/tree/main/.opencode/skills/interface-design
Command: npx skills add https://github.com/michalo1334/ScenarioImpactDSL --skill interface-design-michalo1334

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces tend to look generic because default patterns override deliberate design decisions. This Skill enforces an intent-first workflow for building dashboards, admin panels, SaaS apps, and data tools so every layout, color, token, and typography choice is deliberate rather than templated. ## Core Features & Use Cases - Domain Exploration Framework: Requires producing domain concepts, a color world, a signature element, and named defaults before proposing any design direction. - Craft Foundations: Defines surface elevation systems, border progression, spacing scales, token architecture, typography hierarchy, and depth strategies for professional interfaces. - Critique and Persistence: Provides post-build critique checks (swap test, squint test, signature test, token test) and saves reusable patterns to .interface-design/system.md for consistency across sessions. - Use Case: When asked to build an analytics dashboard, the Skill first explores the product's domain, rejects generic sidebar-plus-cards defaults, proposes a direction tied to the product's world, then builds and self-critiques the result before presenting it. ## Quick Start Ask the assistant to design a settings page for your app using the interface-design skill and have it state its domain exploration and intent before writing any code.

Frequently Asked Questions about interface-design

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

FAQPage Schema
How do I make AI-generated dashboards look less generic?▼

Start with domain exploration before any visual work: list product-domain concepts, a color world drawn from that domain, one signature element, and the defaults you are rejecting. Then verify every token, typeface, and layout choice traces back to a stated intent rather than a common template.

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

Interface design covers dashboards, admin panels, apps, and tools where users complete tasks repeatedly. Marketing design covers landing pages and campaigns optimized for first impressions. This Skill handles only the interface side and redirects marketing requests elsewhere.

How should I structure CSS design tokens for a dashboard?▼

Map every color to primitives: foreground, background, border, brand, and semantic. Build four text levels, a border progression from subtle to strong, and a numbered surface elevation scale where each level differs by only a few percentage points of lightness.

Should sidebars use a different background color than the main content?▼

No. Use the same background as the canvas with a subtle low-opacity border for separation. Different background colors fragment the interface into separate visual worlds, while a quiet border keeps the sidebar feeling like part of the same product.

Why do AI-generated interfaces all look the same?▼

Defaults disguise themselves as structural decisions: typography, navigation, and data display get treated as scaffolding rather than design. When intent lives only in prose while code generation pulls from common patterns, the shared defaults win and outputs converge.

When should I not use this interface design skill?▼

Do not use it for landing pages, marketing sites, or campaign design, which it explicitly redirects elsewhere. It is also unnecessary for quick throwaway prototypes where deliberate craft and token systems add no value.