interface-design

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

1|2|Updated Nov 25, 2017
One-click install
npx skills add https://github.com/asarchami/dotfiles --skill interface-design-asarchami
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/asarchami/dotfiles/tree/main/dot_config/opencode/skills/ui_skills/interface-design
Command: npx skills add https://github.com/asarchami/dotfiles --skill interface-design-asarchami

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces for dashboards and apps tend to look generic because default patterns override deliberate design intent. This Skill enforces a structured design process that produces distinctive, product-specific interfaces instead of templated output. ## Core Features & Use Cases - Domain Exploration: Requires producing domain concepts, a color world, a signature element, and named defaults before proposing any design direction. - Craft Foundations: Provides concrete systems for surface elevation, border progression, token architecture, spacing scales, typography hierarchy, and dark mode handling. - Design Persistence: Saves established design decisions to .interface-design/system.md so future work stays consistent across sessions. - Use Case: When building a SaaS admin panel, the Skill forces explicit intent statements (who the user is, what they must accomplish, how it should feel) and runs swap, squint, signature, and token checks before presenting the result. ## Quick Start Ask the assistant to design a dashboard for your product and let it explore the domain, propose a direction, and build the interface with you.

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 generic?

Start with domain exploration: list concepts from the product's world, a color world drawn from that domain, one signature element, and the defaults you are rejecting. Then state intent for the user, task, and feel before writing any component code.

What is the difference between interface-design and frontend-design skills?

Interface-design covers dashboards, admin panels, SaaS apps, tools, and data interfaces. Marketing work such as landing pages and campaigns is explicitly out of scope and redirected to the frontend-design skill.

How do I keep design decisions consistent across sessions?

After completing work, save the direction, depth strategy, spacing base unit, and reusable component patterns to `.interface-design/system.md`. Future sessions read that file and check new work against the documented values.

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

No. The guidance recommends keeping the sidebar on the same background as the canvas with a subtle border for separation. Different colors fragment the visual space into disconnected regions.

What are the limitations of this design approach?

It is a prompt-based methodology with no executable scripts, so it depends on the model following the process. It also does not cover marketing pages, and it cannot enforce consistency unless system.md is saved and read.