Desktop and enterprise application design patterns covering data-dense interfaces, dashboard design, complex workflow management, keyboard-first interaction, multi-window patterns, and professional tool design. Use when the user mentions: desktop app, dashboard design, enterprise UX, data table design, admin panel, complex workflow, professional tool, desktop application.
インストール
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Desktop and enterprise application design patterns covering data-dense interfaces, dashboard design, complex workflow management, keyboard-first interaction, multi-window patterns, and professional tool design. Use when the user mentions: desktop app, dashboard design, enterprise UX, data table design, admin panel, complex workflow, professional tool, desktop application.
Desktop App Design — Professional & Enterprise Excellence
Desktop Design Philosophy
Desktop applications serve users who invest hours of focused attention in professional workflows. Unlike mobile's brief, task-focused interactions, desktop design must optimize for sustained productivity, information density, and expert efficiency. The challenge is supporting both first-day learnability and thousandth-day mastery within the same interface.
Core Principles (Edward Tufte + Jony Ive)
Information density with clarity — show more data without increasing cognitive load (Tufte: "maximize data-ink ratio")
Invisible design — the interface should disappear, leaving only the work (Ive: "true simplicity is derived from so much more than just the absence of clutter")
Keyboard-first, mouse-enhanced — power users live on the keyboard; mouse interaction is the fallback
Progressive complexity — simple surface, deep capability accessible through exploration
Spatial memory — consistent layouts allow users to develop muscle memory over months of use
Dashboard Design
Dashboard Types
Operational Dashboards
Real-time monitoring with auto-refresh (5-30 second intervals)
Status-at-a-glance with clear normal/warning/critical states
Anomaly detection with visual emphasis on outliers
Minimize decoration — every pixel serves monitoring goals
Analytical Dashboards
Interactive exploration with filter, drill-down, and cross-filtering
Comparison-oriented: support time-range, segment, and baseline comparisons
Export and sharing capabilities for collaborative analysis
Allow users to create and save custom views
Strategic Dashboards
KPI-focused with trend indicators and goal tracking
Executive summary level — 5-7 key metrics maximum
Contextual benchmarks (vs. target, vs. last period, vs. industry)
Minimal interaction needed — the story should be immediately clear
Dashboard Layout Principles
F-pattern reading: Place the most critical metric top-left, summary row at top
Card-based layout: Each card is one complete thought — metric + context + trend
Position: Non-blocking toasts for confirmations, blocking modals for critical decisions
Persistence: Success toasts auto-dismiss (3-5s), errors persist until addressed
Grouping: Batch similar notifications to prevent notification fatigue
Empty States and Onboarding
First-run experience should guide users to first value moment
Empty states include illustration, explanation, and clear CTA to populate the view
Progressive onboarding: introduce features as they become relevant, not all at once
In-app guidance: highlight new features with subtle callouts, dismissible permanently
Cross-Referencing
For data visualization accessibility, reference accessibility-inclusive-design
For design token systems, reference design-systems-architecture
For interaction and transition design, reference interaction-motion-design
For UX evaluation, reference nng-ux-heuristics
v3.0 Cross-References
The v3.0 upgrade introduces comprehensive data visualization references, production component patterns, and design tool workflows that extend desktop application design capabilities.
Data Visualization Patterns — references/data-visualization-patterns.md
The new references/data-visualization-patterns.md reference expands significantly on the Data Visualization Best Practices section above. It covers: comprehensive chart type selection guides with decision trees (when to use bar vs. column, line vs. area, scatter vs. bubble, treemap vs. sunburst); accessible data visualization patterns including screen reader-compatible chart descriptions, sonification approaches, and tactile-friendly data encoding; and dashboard composition frameworks for arranging multiple visualizations into coherent analytical narratives. Includes real-world examples of dashboard redesigns with before/after performance metrics.
Production Component Patterns — component-patterns-code
The component-patterns-code skill provides production-ready React component patterns directly applicable to desktop application design. Includes data table components with full state matrices (loading, empty, error, paginated, filtered, sorted, bulk-selected), command palette implementations, master-detail layout components, resizable panel systems, and keyboard-navigable tree views. Each component cookbook entry includes TypeScript types, accessibility annotations, and Storybook configurations — bridging the gap between the design patterns in this skill and production code.
The figma-design-tool-workflows skill covers the Figma-to-code pipeline applicable to desktop design systems. Relevant capabilities include: Figma variable modes for light/dark/high-contrast theme switching; auto-layout configurations that map to CSS Grid and Flexbox; component property definitions that generate developer handoff specifications; and the MCP-powered design-to-code flywheel that enables continuous synchronization between Figma design system files and production component libraries. Particularly valuable for desktop apps with complex theming requirements and dense component libraries.
Key Sources
Tufte, E. (2001). "The Visual Display of Quantitative Information"
Cooper, A. (2014). "About Face: The Essentials of Interaction Design"
