skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

interface-design

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

Updated Jul 29, 2026
Search Tags:#typography#design system#color palette#dashboard#design tokens#interface design#ui craft
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill interface-design-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-design
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/interface-design
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill interface-design-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces tend to look generic because defaults take over when design intent is not explicit. This Skill forces deliberate decisions about typography, color, surfaces, spacing, and hierarchy so dashboards, admin panels, and SaaS tools feel purpose-built rather than templated. ## Core Features & Use Cases - Domain Exploration Workflow: Requires producing domain concepts, a color world, a signature element, and named defaults before proposing any design direction. - Craft Foundations: Defines token architecture, surface elevation, border progression, spacing scales, depth strategies, and typography hierarchy for consistent interfaces. - Persistent Design Memory: Saves reusable patterns to .interface-design/system.md and validates future work against it, with commands like /interface-design:audit and /interface-design:critique. - Use Case: When building a bakery management dashboard, the Skill guides you to derive warm palette tokens, a signature element, and a coherent elevation system instead of emitting a generic sidebar-plus-cards template. ## Quick Start Ask the assistant to design a dashboard for your product and let the interface-design skill drive the domain exploration and direction proposal.

Frequently Asked Questions about interface-design

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

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

State explicit intent before coding: who the user is, what they must accomplish, and how it should feel. Then explore the product domain for concepts, colors, and a signature element, and reject named defaults so every choice traces back to that intent.

What is the difference between interface design and landing page design?▼

Interface design covers dashboards, admin panels, SaaS apps, and tools where users complete tasks repeatedly. Landing pages and marketing sites are a separate concern and should be redirected to a frontend-design skill focused on campaigns and marketing.

How should I structure CSS design tokens for a web app?▼

Map every color to primitives: foreground, background, border, brand, and semantic. Build four text levels, a border progression from subtle to strong, dedicated control tokens, and a numbered surface elevation scale with only small lightness jumps between levels.

Should a sidebar 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 part of the app.

When should I not use this interface design approach?▼

Avoid it for marketing sites, landing pages, and campaign pages, which the Skill explicitly excludes. It is also unnecessary for quick throwaway prototypes where no persistent design system or craft evaluation is needed.

Related Skills

Explore More Design & Creative Skills→
timothyshentimothyshen

user-researcher

Conduct user interviews, usability testing, and synthesize insights into personas.

Community
Intermediate
yolo-labs-hqyolo-labs-hq

frontend-design

Generate production-ready frontend components and pages with HTML/CSS/JS.

Official
Advanced
scsm-unrestrictscsm-unrestrict
1

a11y-responsive

Implements and audits accessibility, responsive layouts, and cross-browser compatibility for web interfaces.

Community
Intermediate
cericocerico

creative-design

Define typography, color, motion, and spacing for landing page UI.

Community
Basic