mcpField
I
interface-design

interface-design

github.com/dralgorhythmDesign & UI12983 installsUpdated 14w ago
Repository

About interface-design

A design skill for people creating interfaces, covering usability principles, common UI patterns, responsive layouts, and developer handoff details.

Key features

  1. 01Clarity, consistency, and feedback principles
  2. 02Navigation, form, and action patterns
  3. 03Responsive layout guidance
  4. 04Design handoff checklist

Use cases

  1. 01Planning navigation and form behavior
  2. 02Reviewing interface feedback and error states
  3. 03Preparing design specifications for development

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill interface-design

After installing, type/interface-designin Claude Code to confirm it loaded.

Bundled filesresources/design-framework.template.md

Details

From the project README

Interface Design

Design Principles

1. Clarity

Make the interface obvious. Users shouldn't have to guess.

2. Consistency

Same actions, same results. Maintain patterns throughout.

3. Feedback

Respond to every action. Show progress, confirm success, explain errors.

4. Efficiency

Minimize steps. Optimize common workflows.

5. Forgiveness

Allow undo. Confirm destructive actions. Recover gracefully.

UI Patterns

Navigation
  • Top Nav: Primary navigation, global actions
  • Side Nav: Section navigation, hierarchical content
  • Breadcrumbs: Show location in hierarchy
  • Tabs: Switch between related views
Forms
  • Label above input
  • Clear validation messages
  • Inline validation where helpful
  • Logical field grouping
  • Clear call-to-action
Feedback
  • Loading states
  • Success confirmations
  • Error messages
  • Empty states
  • Progress indicators
Actions
  • Primary action prominent
  • Secondary actions subtle
  • Destructive actions require confirmation
  • Disabled states clear

Layout Principles

Visual Hierarchy
  • Size indicates importance
  • Color draws attention
  • Spacing groups elements
  • Alignment creates order
Grid System
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
Responsive Design
  • Mobile-first approach
  • Breakpoints: 640px, 768px, 1024px, 1280px
  • Fluid typography
  • Flexible images

Design Specification

When handing off to development:

  • Color values (hex/RGB)
  • Typography (font, size, weight, line-height)
  • Spacing (margins, padding)
  • Component states (default, hover, active, disabled)
  • Responsive behavior
  • Animations/transitions

Resources

Comments

Markdown supported