Does this skill support dark mode design?

Yes, it includes specific logic for surface elevation in dark mode, where higher elevation layers are rendered with subtle lightness increases to maintain depth and hierarchy.

What makes this different from standard AI-generated CSS?

This skill explicitly rejects 'default' choices like standard fonts or generic card shadows, forcing a discovery process that creates a unique 'Signature Element' and 'Color World' tailored to your specific product domain.

When should I use the Interface Design Patterns skill?

Invoke this skill whenever you are building web components, defining visual styling, or designing layouts where visual distinctiveness and hierarchy are priorities.

What is the 'Required Discovery Process'?

It is a mandatory 4-step framework involving Domain Exploration, Color World building, Signature Element definition, and Default Replacement to ensure the UI feels native to its purpose rather than like a generic template.

Interface Design Patterns

Name: Interface Design Patterns
Author: deepeshBodh

bydeepeshBodh

•

デザインツール

Architects intentional, distinctive user interfaces using a systematic discovery process and rigorous design standards to avoid generic styling.

The Interface Design Patterns skill transforms Claude into a sophisticated UI/UX architect by enforcing a strict discovery-first methodology. It prevents generic, 'template-style' outputs by requiring deep domain exploration, native color palette construction, and the identification of unique signature elements before any code is written. By implementing professional surface elevation, token architecture, and consistent depth strategies, it ensures that web components and applications possess high-end visual hierarchy and brand-specific character rather than relying on common, overused design defaults.

主な機能

01Four-step systematic UI discovery process (Domain, Color, Signature, Default Replacement)

0219 GitHub stars

03Advanced typography hierarchy and rule-based spacing systems

04Intent-based design specifications focused on specific user personas and actions

05Rigid surface and token architecture for consistent, scalable styling

06Built-in validation checks including the 'Squint Test' for visual hierarchy

ユースケース

01Building a custom design system for a complex web application or dashboard

02Establishing distinctive dark mode and light mode themes with proper elevation

03Crafting unique frontend components that break away from standard UI frameworks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add deepeshbodh/human-in-loop patterns-interface-design

For use in Claude.ai and ChatGPT

Download Skill