AgentSkillsCN

linear-design-patterns

借鉴 Linear 设计理念，打造键盘优先、高密度、深色主题为主的 Web 应用程序设计体系。适用于以下场景：(1) 构建全新设计系统或以 Linear 的美学风格为灵感的设计令牌；(2) 实现键盘优先的导航方式，搭配命令面板与 Vim 风格快捷键；(3) 设计以速度与信息密度为首要考量的管理工具、开发者工具，或 SaaS 用户界面；(4) 为面向专业领域或工程领域的应用选择合适的色彩系统、字体排版、动画效果，以及反馈模式；(5) 当用户提及 Linear、Linear 风格，或主动寻求简洁、极简、键盘优先的设计方案时使用。

SKILL.md
--- frontmatter
name: linear-design-patterns
description: Linear-inspired design system patterns for building keyboard-first, high-density, dark-first web applications. Use when (1) building a new design system or design tokens inspired by Linear's aesthetic, (2) implementing keyboard-first navigation with command palettes and vim-style shortcuts, (3) designing admin tools, developer tools, or SaaS UIs that prioritize speed and information density, (4) choosing color systems, typography, animation, or feedback patterns for professional/engineering-focused apps, (5) user mentions Linear, Linear-style, or asks for a clean/minimal/keyboard-first design approach.

Linear Design Patterns

Apply Linear's design philosophy to web applications. Covers color, typography, layout, keyboard interaction, animation, feedback, and visual polish.

Quick Decision Guide

DecisionLinear's Answer
Light or dark default?Dark-first
Color space?LCH (perceptually uniform)
How many theme variables?3: base, accent, contrast
Font?Inter + Inter Display for headings
Spacing base unit?4px
Animation duration?~200ms, ease-out
Confirm or undo?Undo (except irreversible)
Loading spinners?No — optimistic updates
Feedback location?Inline, next to the action
Keyboard support?Full app control, mouse optional
Command palette?Yes, Cmd+K, fuzzy search, context-aware
Navigation shortcuts?g then letter (vim-style)
Information density?High density, low clutter
Chrome/decoration?Minimal — content over chrome
Content surface shape?Sharp edges — no border-radius on data panels
Panel separation?1px border lines, not gaps or shadows
When to elevate?Only floating overlays (modals, dropdowns, popovers)

Core Principles

  1. •Keyboard-first, mouse-optional — every click action has a key equivalent
  2. •Dark-first — dark mode is default, light mode is the variant
  3. •Speed is a feature — 100ms interaction target, optimistic updates, no spinners
  4. •Color restraint — near-monochrome, color only for status/accent
  5. •High density, low clutter — pack information in through alignment, not cramming
  6. •Be gentle — everything comfortable, natural, expected, no surprises

Implementation

For full design system details covering color, typography, layout, navigation, interaction, animation, feedback, and visual polish patterns, see references/linear-design-system.md.

Key sections:

  • •A. Color & Theming — LCH color space, 3-variable themes, dark-first
  • •B. Typography — Inter family, hierarchy through weight/size only
  • •C. Layout & Navigation — inverted-L, list/detail split, collapsible sidebar
  • •D. Surface Architecture — flush tiled grids, sharp edges on data, border hierarchy, elevation only for overlays
  • •E. Information Density — in-place editing, contextual menus
  • •F. Interaction & Speed — optimistic updates, command palette, keyboard shortcuts
  • •G. Motion & Animation — 200ms, purposeful micro-interactions only
  • •H. Feedback — inline over toasts, undo over confirmation
  • •I. Visual Polish — tight alignment, subtle gradients, "be gentle"
  • •J. Progressive Disclosure — works out of the box, natural language filters, universal URLs