apply-guide

# 设计应用指南 如何将提取的设计令牌（Design Tokens）应用于不同的前端技术栈。 ## Tailwind CSS 项目 ### 1. 更新 tailwind.config.js / tailwind.config.ts js // tailwind.config.js module.exports = { theme: { extend: { colors: { bg: { page: '#0a0a0f', surface: '#13131a', elevated:'#1a1a2e', }, brand: { DEFAULT: '#7c3aed', hover: '#6d28d9', }, border: 'rgba(255,255,255,0.08)', text: { primary: '#ffffff', secondary: '#a0a0b8', muted: '#606080', } }, fontFamily: { sans: ['Inter', 'sans-serif'], }, borderRadius: { 'sm': '6px', 'md': '12px', 'lg': '20px', 'xl': '28px', }, boxShadow: { 'card': '0 4px 24px rgba(0,0,0,0.4)', 'glow': '0 0 24px rgba(124,58,237,0.3)', }, } } } ### 2. 更新 globals.css 以处理非 Tailwind 属性 css /* globals.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --gradient-hero: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%); --gradient-subtle: radial-gradient(ellipse at top, rgba(124,58,237,0.15), transparent); --blur-glass: blur(16px); --transition: all 0.2s ease; } body { background-color: #0a0a0f; color: #ffffff; font-family: 'Inter', sans-serif; } ### 3. 更新组件类 检查用户的主要组件，并将硬编码的颜色/间距类替换为新的令牌。重点关注： - `bg-*` → 新的背景令牌 - `text-*` → 新的文本令牌 - `border-*` → 新的边框令牌 - `rounded-*` → 新的圆角令牌 --- ## 普通 CSS / CSS Modules 项目 ### 1. 创建/更新设计令牌文件 css /* styles/tokens.css 或 styles/globals.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* 颜色 */ --color-bg-page: #0a0a0f; --color-bg-surface: #13131a; --color-bg-elevated: #1a1a2e; --color-text: #ffffff; --color-text-muted: #a0a0b8; --color-brand: #7c3aed; --color-brand-hover: #6d28d9; --color-border: rgba(255, 255, 255, 0.08); /* 排版 */ --font-sans: 'Inter', sans-serif; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px; /* 间距 */ -