forked from carrydela/Rs_blog_front
217 lines
7.5 KiB
Markdown
217 lines
7.5 KiB
Markdown
这是为您定制的 **《极简主义博客前端设计规范 v1.0 (The Minimalist Tech Spec)》**。
|
||
|
||
这份文档不仅是开发指南，更是视觉准则。它将指导您如何使用 Tailwind CSS 构建一个冷峻、理性且充满科技感的 AI 博客。
|
||
|
||
---
|
||
|
||
# 📐 前端设计规范 (Frontend Design System)
|
||
|
||
**项目名称**: Minimalist AI Blog
|
||
**核心理念**: 内容即界面 (Content is Interface)
|
||
**视觉风格**: 瑞士国际主义 (Swiss Style) + 科技极简 (Tech Utilitarianism)
|
||
|
||
---
|
||
|
||
## 1. 基础系统 (Foundations)
|
||
|
||
### 1.1 色彩体系 (Color Palette)
|
||
|
||
我们摒弃所有非功能性的色彩。界面只存在黑、白、灰。唯一的色彩将来自**文章配图**和**代码高亮**。
|
||
|
||
| 语义名称 | Tailwind 类名 | Hex 值 | 用途 |
|
||
| --- | --- | --- | --- |
|
||
| **Canvas** | `bg-white` | `#ffffff` | 页面背景，卡片背景 |
|
||
| **Ink** | `text-black` | `#000000` | 标题，主要按钮，强强调 |
|
||
| **Graphite** | `text-neutral-800` | `#262626` | 正文阅读色 (纯黑阅读易疲劳) |
|
||
| **Ash** | `text-neutral-500` | `#737373` | 辅助信息，日期，元数据 |
|
||
| **Vapor** | `bg-neutral-50` | `#fafafa` | 极淡背景 (代码块，引用) |
|
||
| **Line** | `border-neutral-200` | `#e5e5e5` | 结构分割线 (极少使用) |
|
||
| **Error** | `text-red-600` | `#dc2626` | 错误状态 (仅用于表单反馈) |
|
||
|
||
### 1.2 排版系统 (Typography)
|
||
|
||
全站强制使用 **Inter**。通过字重 (Weight) 和字间距 (Tracking) 的极端对比来建立层级，而非依赖颜色。
|
||
|
||
* **字体栈**: `font-sans` -> `Inter, system-ui, sans-serif`
|
||
* **字重策略**:
|
||
* **标题**: `font-bold` (700) 或 `font-medium` (500)
|
||
* **正文**: `font-normal` (400)
|
||
* **元数据**: `font-medium` (500) + 全大写
|
||
|
||
|
||
|
||
| 样式名称 | 大小 (Size) | 行高 (Leading) | 字间距 (Tracking) | Tailwind 组合 |
|
||
| --- | --- | --- | --- | --- |
|
||
| **Display** | 72px (6xl) | 1.1 | -0.04em | `text-6xl font-bold tracking-tighter leading-tight` |
|
||
| **Heading 1** | 48px (5xl) | 1.2 | -0.03em | `text-5xl font-bold tracking-tight leading-tight` |
|
||
| **Heading 2** | 30px (3xl) | 1.3 | -0.02em | `text-3xl font-semibold tracking-tight` |
|
||
| **Body** | 18px (lg) | 1.8 | -0.01em | `text-lg font-normal leading-relaxed text-neutral-800` |
|
||
| **Caption** | 12px (xs) | 1.5 | 0.05em | `text-xs font-medium tracking-wide uppercase text-neutral-500` |
|
||
|
||
### 1.3 网格与间距 (Grid & Spacing)
|
||
|
||
* **容器**: 最大宽度 `max-w-screen-xl` (1280px)。
|
||
* **网格**: 12 列网格，列间距 `gap-8` (32px)。
|
||
* **呼吸感**: 垂直方向的留白必须奢侈。
|
||
* **Section Spacing**: `py-24` (96px) 或 `py-32` (128px)。
|
||
* **Component Spacing**: `mb-12` (48px)。
|
||
|
||
|
||
|
||
---
|
||
|
||
## 2. 组件规范 (Components)
|
||
|
||
### 2.1 图片处理 (Imagery)
|
||
|
||
图片是极简页面中唯一的“重”元素。
|
||
|
||
* **形状**: **严格直角** (No Border Radius)。
|
||
* **比例**: 统一使用 `aspect-video` (16:9) 或 `aspect-[3/2]`。
|
||
* **边框**: 无边框。图片直接与背景接触。
|
||
* **蒙版**: 默认原图。Hover 时可叠加 5% 的黑色遮罩 (`bg-black/5`) 以增加质感。
|
||
|
||
```html
|
||
<figure class="relative w-full aspect-video overflow-hidden bg-neutral-100">
|
||
<img src="..." class="object-cover w-full h-full" alt="Tech" />
|
||
</figure>
|
||
|
||
```
|
||
|
||
### 2.2 按钮与交互 (Buttons & Interactions)
|
||
|
||
拒绝实体色块按钮。使用 **“幽灵按钮” (Ghost Button)** 或 **“文本链接”**。
|
||
|
||
* **Primary Button**: 黑框，白底，黑字。Hover 变黑底白字。
|
||
* `border border-black px-6 py-3 text-sm font-medium hover:bg-black hover:text-white transition-colors duration-300`
|
||
|
||
|
||
* **Text Link**: 纯文字，底部有一条 1px 的黑线。Hover 时线消失或变粗。
|
||
* `border-b border-black pb-0.5 hover:border-transparent transition-colors`
|
||
|
||
|
||
* **Input Field**: 无背景，仅保留底部边框。
|
||
* `w-full border-b border-neutral-200 py-3 bg-transparent focus:border-black focus:outline-none transition-colors`
|
||
|
||
|
||
|
||
### 2.3 代码块 (Code Blocks)
|
||
|
||
作为技术博客的核心，代码块必须干净。
|
||
|
||
* **Theme**: 推荐 GitHub Light 或类似的高对比度浅色主题。
|
||
* **容器**: 浅灰色背景 `#fafafa`，无边框，直角。
|
||
* **字体**: JetBrains Mono 或 Fira Code。
|
||
|
||
---
|
||
|
||
## 3. Tailwind 配置文件 (Configuration)
|
||
|
||
请将以下代码直接覆盖您的 `tailwind.config.js`。
|
||
|
||
```javascript
|
||
/** @type {import('tailwindcss').Config} */
|
||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||
|
||
module.exports = {
|
||
content: [
|
||
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
||
],
|
||
theme: {
|
||
extend: {
|
||
// 1. 字体系统：强制 Inter
|
||
fontFamily: {
|
||
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
||
mono: ['JetBrains Mono', 'Fira Code', ...defaultTheme.fontFamily.mono],
|
||
},
|
||
// 2. 扩展间距：为了极致的留白
|
||
spacing: {
|
||
'18': '4.5rem', // 72px
|
||
'24': '6rem', // 96px
|
||
'32': '8rem', // 128px
|
||
},
|
||
// 3. 极简色板
|
||
colors: {
|
||
neutral: {
|
||
50: '#fafafa',
|
||
100: '#f5f5f5',
|
||
200: '#e5e5e5', // 边框
|
||
300: '#d4d4d4',
|
||
400: '#a3a3a3',
|
||
500: '#737373', // 辅助文字
|
||
600: '#525252',
|
||
700: '#404040',
|
||
800: '#262626', // 正文
|
||
900: '#171717',
|
||
950: '#0a0a0a', // 接近纯黑
|
||
}
|
||
},
|
||
// 4. 排版微调
|
||
letterSpacing: {
|
||
tighter: '-0.04em',
|
||
tight: '-0.02em',
|
||
normal: '-0.01em',
|
||
wide: '0.02em',
|
||
widest: '0.08em', // 用于全大写标签
|
||
},
|
||
lineHeight: {
|
||
relaxed: '1.8', // 黄金阅读行高
|
||
}
|
||
},
|
||
},
|
||
plugins: [
|
||
require('@tailwindcss/typography'), // 必须安装: npm install -D @tailwindcss/typography
|
||
],
|
||
}
|
||
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 典型页面布局示例 (Layout Mockup)
|
||
|
||
### 首页文章列表 (The "Grid" List)
|
||
|
||
这是一个结合了 **Inter 字体** 和 **锐利图片** 的列表项设计。
|
||
|
||
```html
|
||
<article class="group grid grid-cols-12 gap-6 md:gap-12 mb-24 cursor-pointer">
|
||
|
||
<div class="col-span-12 md:col-span-5 relative">
|
||
<div class="aspect-[3/2] w-full overflow-hidden bg-neutral-100">
|
||
<img
|
||
src="/api/placeholder/800/600"
|
||
alt="AI Neural Network"
|
||
class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105 group-hover:opacity-90"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-span-12 md:col-span-7 flex flex-col justify-center">
|
||
|
||
<div class="flex items-center space-x-3 mb-6">
|
||
<span class="text-xs font-bold tracking-widest text-black uppercase border border-black px-2 py-1">
|
||
Algorithm
|
||
</span>
|
||
<span class="text-xs font-medium tracking-wide text-neutral-400 uppercase">
|
||
Oct 24, 2026
|
||
</span>
|
||
</div>
|
||
|
||
<h2 class="text-3xl md:text-5xl font-bold tracking-tighter text-black mb-6 leading-[1.1] group-hover:underline decoration-1 underline-offset-8">
|
||
Optimizing Transformer Attention Mechanisms
|
||
</h2>
|
||
|
||
<p class="text-lg text-neutral-600 leading-relaxed mb-8 md:w-10/12 line-clamp-3">
|
||
Deep dive into the architecture of FlashAttention-2. We explore how memory hierarchy awareness can significantly speed up training for large language models.
|
||
</p>
|
||
|
||
<div class="flex items-center text-sm font-semibold text-black group-hover:translate-x-2 transition-transform duration-300">
|
||
Read Analysis <span class="ml-2">→</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
```
|
||
|
||
**下一步**：如果您确认这份风格文档（尤其是对字体 Inter、图片直角处理、黑白灰配色）满意，我将为您生成第二部分：**前后端对接集成文档**。 |