Visual Design Foundations

作者 wshobson46891e7e60da無授權條款收錄於 2026年10月8日更新於 2026年10月8日

Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.

僅含說明Design & Creative
AI 產生的概覽

指導排版、色彩、間距與圖示設計，協助建立一致且無障礙的視覺設計系統。

功能
提供視覺設計基礎的參考指引：模組化字級階層、行高規則、8 點間距系統、語意化色彩權杖、WCAG 對比度要求、深色模式主題，以及圖示尺寸規範。內容包含 CSS、Tailwind 設定與對比度計算函式的範例，並附上最佳實務與常見問題。產出的是設計指引與權杖範例，而非檔案或指令碼。
適用情境
適用於建立設計權杖、撰寫或調整樣式指南、挑選與搭配字體、建立無障礙配色方案、設計圖示系統，或檢視設計的視覺一致性與層次。
執行需求
不需要指令碼或工具，僅為說明與參考文件。範例涉及 CSS、Tailwind 以及 TypeScript/React 寫法，但無需安裝或執行任何項目。

Visual Design Foundations

Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.

When to Use This Skill

  • Establishing design tokens for a new project
  • Creating or refining a spacing and sizing system
  • Selecting and pairing typefaces
  • Building accessible color palettes
  • Designing icon systems and visual assets
  • Improving visual hierarchy and readability
  • Auditing designs for visual consistency
  • Implementing dark mode or theming

Core Systems

1. Typography Scale

Modular Scale (ratio-based sizing):

css
:root {  --font-size-xs: 0.75rem; /* 12px */  --font-size-sm: 0.875rem; /* 14px */  --font-size-base: 1rem; /* 16px */  --font-size-lg: 1.125rem; /* 18px */  --font-size-xl: 1.25rem; /* 20px */  --font-size-2xl: 1.5rem; /* 24px */  --font-size-3xl: 1.875rem; /* 30px */  --font-size-4xl: 2.25rem; /* 36px */  --font-size-5xl: 3rem; /* 48px */}

Line Height Guidelines:

Text TypeLine Height
Headings1.1 - 1.3
Body text1.5 - 1.7
UI labels1.2 - 1.4

2. Spacing System

8-point grid (industry standard):

css
:root {  --space-1: 0.25rem; /* 4px */  --space-2: 0.5rem; /* 8px */  --space-3: 0.75rem; /* 12px */  --space-4: 1rem; /* 16px */  --space-5: 1.25rem; /* 20px */  --space-6: 1.5rem; /* 24px */  --space-8: 2rem; /* 32px */  --space-10: 2.5rem; /* 40px */  --space-12: 3rem; /* 48px */  --space-16: 4rem; /* 64px */}

3. Color System

Semantic color tokens:

css
:root {  /* Brand */  --color-primary: #2563eb;  --color-primary-hover: #1d4ed8;  --color-primary-active: #1e40af;
  /* Semantic */  --color-success: #16a34a;  --color-warning: #ca8a04;  --color-error: #dc2626;  --color-info: #0891b2;
  /* Neutral */  --color-gray-50: #f9fafb;  --color-gray-100: #f3f4f6;  --color-gray-200: #e5e7eb;  --color-gray-300: #d1d5db;  --color-gray-400: #9ca3af;  --color-gray-500: #6b7280;  --color-gray-600: #4b5563;  --color-gray-700: #374151;  --color-gray-800: #1f2937;  --color-gray-900: #111827;}

Quick Start: Design Tokens in Tailwind

js
// tailwind.config.jsmodule.exports = {  theme: {    extend: {      fontFamily: {        sans: ["Inter", "system-ui", "sans-serif"],        mono: ["JetBrains Mono", "monospace"],      },      fontSize: {        xs: ["0.75rem", { lineHeight: "1rem" }],        sm: ["0.875rem", { lineHeight: "1.25rem" }],        base: ["1rem", { lineHeight: "1.5rem" }],        lg: ["1.125rem", { lineHeight: "1.75rem" }],        xl: ["1.25rem", { lineHeight: "1.75rem" }],        "2xl": ["1.5rem", { lineHeight: "2rem" }],      },      colors: {        brand: {          50: "#eff6ff",          500: "#3b82f6",          600: "#2563eb",          700: "#1d4ed8",        },      },      spacing: {        // Extends default with custom values        18: "4.5rem",        88: "22rem",      },    },  },};

Typography Best Practices

Font Pairing

Safe combinations:

  • Heading: Inter / Body: Inter (single family)
  • Heading: Playfair Display / Body: Source Sans Pro (contrast)
  • Heading: Space Grotesk / Body: IBM Plex Sans (geometric)

Responsive Typography

css
/* Fluid typography using clamp() */h1 {  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);  line-height: 1.1;}
p {  font-size: clamp(1rem, 2vw + 0.5rem, 1.125rem);  line-height: 1.6;  max-width: 65ch; /* Optimal reading width */}

Font Loading

css
/* Prevent layout shift */@font-face {  font-family: "Inter";  src: url("/fonts/Inter.woff2") format("woff2");  font-display: swap;  font-weight: 400 700;}

Color Theory

Contrast Requirements (WCAG)

ElementMinimum Ratio
Body text4.5:1 (AA)
Large text (18px+)3:1 (AA)
UI components3:1 (AA)
Enhanced7:1 (AAA)

Dark Mode Strategy

css
:root {  --bg-primary: #ffffff;  --bg-secondary: #f9fafb;  --text-primary: #111827;  --text-secondary: #6b7280;  --border: #e5e7eb;}
[data-theme="dark"] {  --bg-primary: #111827;  --bg-secondary: #1f2937;  --text-primary: #f9fafb;  --text-secondary: #9ca3af;  --border: #374151;}

Color Accessibility

tsx
// Check contrast programmaticallyfunction getContrastRatio(foreground: string, background: string): number {  const getLuminance = (hex: string) => {    const rgb = hexToRgb(hex);    const [r, g, b] = rgb.map((c) => {      c = c / 255;      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);    });    return 0.2126 * r + 0.7152 * g + 0.0722 * b;  };
  const l1 = getLuminance(foreground);  const l2 = getLuminance(background);  const lighter = Math.max(l1, l2);  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);}

Spacing Guidelines

Component Spacing

Card padding:      16-24px (--space-4 to --space-6)Section gap:       32-64px (--space-8 to --space-16)Form field gap:    16-24px (--space-4 to --space-6)Button padding:    8-16px vertical, 16-24px horizontalIcon-text gap:     8px (--space-2)

Visual Rhythm

css
/* Consistent vertical rhythm */.prose > * + * {  margin-top: var(--space-4);}
.prose > h2 + * {  margin-top: var(--space-2);}
.prose > * + h2 {  margin-top: var(--space-8);}

Iconography

Icon Sizing System

css
:root {  --icon-xs: 12px;  --icon-sm: 16px;  --icon-md: 20px;  --icon-lg: 24px;  --icon-xl: 32px;}

Icon Component

tsx
interface IconProps {  name: string;  size?: "xs" | "sm" | "md" | "lg" | "xl";  className?: string;}
const sizeMap = {  xs: 12,  sm: 16,  md: 20,  lg: 24,  xl: 32,};
export function Icon({ name, size = "md", className }: IconProps) {  return (    <svg      width={sizeMap[size]}      height={sizeMap[size]}      className={cn("inline-block flex-shrink-0", className)}      aria-hidden="true"    >      <use href={`/icons.svg#${name}`} />    </svg>  );}

Best Practices

  1. Establish Constraints: Limit choices to maintain consistency
  2. Document Decisions: Create a living style guide
  3. Test Accessibility: Verify contrast, sizing, touch targets
  4. Use Semantic Tokens: Name by purpose, not appearance
  5. Design Mobile-First: Start with constraints, add complexity
  6. Maintain Vertical Rhythm: Consistent spacing creates harmony
  7. Limit Font Weights: 2-3 weights per family is sufficient

Common Issues

  • Inconsistent Spacing: Not using a defined scale
  • Poor Contrast: Failing WCAG requirements
  • Font Overload: Too many families or weights
  • Magic Numbers: Arbitrary values instead of tokens
  • Missing States: Forgetting hover, focus, disabled
  • No Dark Mode Plan: Retrofitting is harder than planning

來源與署名

來源：wshobson/agents位於plugins/ui-design/skills/visual-design-foundations提交46891e7

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 wshobson/agents 的技能

Uv Package Manager

wshobson

關於使用 uv Python 套件管理器管理相依性、虛擬環境與專案工作流程的參考指南。

Software Development2026年10月8日

Web Component Design

wshobson

指導在 React、Vue 和 Svelte 中建構可重複使用的 UI 元件，涵蓋組合模式、CSS-in-JS 選擇與元件 API 設計。

Software Development2026年10月8日

Python Type Safety

wshobson

指導 Python 型別註解、泛型、協定以及 mypy/pyright 嚴格型別檢查。

Software Development2026年10月8日

Responsive Design

wshobson

指導使用容器查詢、流體排版、CSS Grid 與斷點策略實作響應式網頁版面。

Software Development2026年10月8日

Python Resource Management

wshobson

指導 Python 開發者使用情境管理器、清理模式與串流處理來確定性地管理資源。

Software Development2026年10月8日

React Native Design

wshobson

指導 React Native 樣式、React Navigation 導覽與 Reanimated 3 動畫，用於跨平台行動應用開發。

Software Development2026年10月8日

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative180K3 天前更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative180K3 天前更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative180K3 天前更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative180K3 天前更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative180K3 天前更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新