getwebdesign.top Sample

## 设计思维

在编码之前，先理解上下文并确定一个大胆的美学方向：

- **目的**：这个界面解决什么问题？谁在用它？

- **风格**：选择一种极致的风格：极简主义、极繁主义、复古未来主义、有机/自然、奢华/精工、 playful/玩具感、杂志/编辑风格、粗粝/原始、装饰艺术/几何、柔和粉彩、工业/实用等等。有很多风格可以选择。你可以从中汲取灵感，但要确保你的设计真正与所选的美学方向一致。

- **约束**：技术要求（框架、性能、无障碍）。

- **差异化**：是什么让它令人难忘？人们会记住的那一件事是什么？

**关键**：选择一个清晰的概念方向并精准执行。大胆极繁主义和精致极简主义都可行——关键在于意图，而非强度。

## 美学默认设置

- 从构图开始，而不是从组件开始。
- 优先使用全出血 hero 图片或全画布视觉锚点。
- 让品牌或产品名称成为最突出的文字。
- 保持文案简洁，便于快速扫描。
- 在添加边框之前，先使用留白、对齐、缩放、裁剪和对比。
- 默认限制系统：不超过两种字体和一种强调色。

# getwebdesign.top 设计系统

## 视觉 DNA

赛博黑色 SaaS 美学，深邃的虚空黑与空灵的靛蓝辉光。玻璃态拟物（Glass morphism）通过半透明层叠面板与背景模糊主导界面，在近黑色画布上创造出深度。字体搭配几何精度（Inter）与编辑优雅（Georgia），形成高冲击力标题。系统运用富有表现力的动效，带有发光焦点状态和平滑的状态过渡，针对开发者工具和技术工作流进行优化。

## 工程 CSS 证据

### 字体排版

**标题：**
- **主字体：**
  - **Font Family:** `__Inter_f367f3`
  - **Font Family Stack:** `__Inter_f367f3, __Inter_Fallback_f367f3, Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", sans-serif`
  - **Font Size:** `18px`
  - **Font Weight:** `300`
  - **Line Height:** `28px`
  - **Letter Spacing:** `2.4px`
  - **Text Transform:** `uppercase`
- **展示变体（衬线）：**
  - `Georgia, "Times New Roman", serif | 72px | 300 | 72px` (h1)
  - `Georgia, "Times New Roman", serif | 60px | 300 | 60px` (h2)
- **无衬线变体：**
  - `__Inter_f367f3... | 16px | 400 | 24px`
  - `__Inter_f367f3... | 18px | 500 | 28px`
  - `__Inter_f367f3... | 12px | 600 | 16px`

**正文：**
- **主字体：**
  - **Font Family:** `__Inter_f367f3`
  - **Font Family Stack:** `__Inter_f367f3, __Inter_Fallback_f367f3, Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", sans-serif`
  - **Font Size:** `14px`
  - **Font Weight:** `400`
  - **Line Height:** `20px`
  - **Letter Spacing:** `2.4px`
  - **Text Transform:** `uppercase`
- **变体：**
  - `__Inter_f367f3... | 14px | 400 | 20px` (52 处)
  - `__Inter_f367f3... | 14px | 400 | 28px` (15 处)
  - `__Inter_f367f3... | 12px | 500 | 16px` (14 处)
  - `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | 14px | 400 | 20px` (7 处)

### 颜色

**模式：** 混合（深色主导）

**用法：**
- **背景：** `rgba(4, 8, 15, 0.78)`, `rgba(255, 255, 255, 0.04)`, `rgb(99, 102, 241)`, `rgb(0, 0, 0)`, `rgba(129, 140, 248, 0.1)`, `rgba(255, 255, 255, 0.05)`
- **主文本：** `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.45)`, `rgb(129, 140, 248)`, `rgb(199, 210, 254)`, `rgba(255, 255, 255, 0.55)`, `rgba(255, 255, 255, 0.6)`
- **次要文本：** `rgb(255, 255, 255)`, `rgb(129, 140, 248)`, `rgba(255, 255, 255, 0.45)`, `rgb(199, 210, 254)`
- **边框：** `rgba(255, 255, 255, 0.16)`, `rgba(255, 255, 255, 0.1)`, `rgba(255, 255, 255, 0.08)`, `rgb(129, 140, 248)`, `rgba(129, 140, 248, 0.25)`, `rgba(129, 140, 248, 0.3)`
- **强调色：** `rgba(255, 255, 255, 0.16)`, `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.45)`, `rgba(255, 255, 255, 0.04)`, `rgb(99, 102, 241)`
- **渐变：** `linear-gradient(to right, rgb(255, 255, 255), rgb(199, 210, 254), rgb(129, 140, 248))`

### 间距

**基础单位：** `4px`

**比例尺：** `2px`, `4px`, `6px`, `8px`, `10px`, `12px`, `16px`, `20px`, `24px`, `32px`, `48px`, `112px`, `309px`

**区块内边距：** `112px 0px`, `64px 0px 0px`

**间隙：** `2px`, `4px`, `6px`, `8px`, `10px`, `12px`, `24px`, `32px`

### 材质

**表面风格：** 玻璃 / 半透明

**圆角：** `9999px`（完整药丸形），`1px`（尖锐卡片）

**边框样式：**
- `0px solid rgba(255, 255, 255, 0.16)`
- `1px solid rgba(255, 255, 255, 0.08)`
- `1px solid rgba(255, 255, 255, 0.1)`
- `1px solid rgba(255, 255, 255, 0.16)`
- `1px solid rgba(129, 140, 248, 0.25)`
- `1px solid rgba(129, 140, 248, 0.3)`
- `1px solid rgba(129, 140, 248, 0.5)`

**阴影样式：**
- `rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.03) 0px 0px 60px 0px`
- `rgba(99, 102, 241, 0.32) 0px 0px 0px 1px, rgba(99, 102, 241, 0.28) 0px 0px 34px 0px`
- `rgba(99, 102, 241, 0.24) 0px 0px 28px 0px`
- `rgba(99, 102, 241, 0.25) 0px 0px 28px 0px`

**模糊：** `blur(4px)`, `blur(24px)`, `blur(40px)`

### 动效

**动效级别：** 富有表现力

**持续时间：** `0s`, `0.15s`, `0.3s`, `2s`

**缓动函数：**
- `ease`
- `cubic-bezier(0.4, 0, 0.2, 1)`
- `cubic-bezier(0.4, 0, 0.6, 1)`

**悬停模式：** `all`, `color, background-color, border-color, text-decoration-color, fill, stroke`

**滚动模式：** 1 个 sticky/fixed 元素，9 个 CSS grid 容器，97 个 flex 容器

### 组件示例

**按钮（22 处）：**
- **字体排版：** `16px / 24px` weight 400, `14px / 20px` weight 600, `14px / 20px` weight 500
- **内边距：** `12px 16px`, `16px 0px`, `10px 20px`, `0px 32px`
- **圆角：** `9999px`
- **颜色：** `rgb(255, 255, 255)`, `rgb(199, 210, 254)`
- **背景：** `rgba(255, 255, 255, 0.04)`, `rgb(99, 102, 241)`, `rgba(255, 255, 255, 0.05)`
- **边框：** `0px solid rgba(255, 255, 255, 0.16)`, `1px solid rgba(255, 255, 255, 0.16)`
- **阴影：** `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(99, 102, 241, 0.24) 0px 0px 28px 0px`
- **过渡：** `color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)`, `all 0.15s cubic-bezier(0.4, 0, 0.2, 1)`

**链接（26 处）：**
- **字体排版：** `14px / 20px` weight 400, `12px / 16px` weight 500, `14px / 20px` weight 600
- **内边距：** `8px 16px`, `0px 32px`, `0px 40px`, `8px 20px`
- **圆角：** `9999px`
- **颜色：** `rgba(255, 255, 255, 0.45)`, `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.55)`, `rgb(199, 210, 254)`
- **背景：** `rgb(99, 102, 241)`, `rgba(255, 255, 255, 0.04)`, `rgb(255, 255, 255)`
- **边框：** `0px solid rgba(255, 255, 255, 0.16)`, `1px solid rgba(255, 255, 255, 0.1)`, `1px solid rgba(129, 140, 248, 0.5)`
- **阴影：** `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(99, 102, 241, 0.32) 0px 0px 34px 0px`, `rgba(99, 102, 241, 0.25) 0px 0px 28px 0px`

**导航（1 处）：**
- **字体排版：** `16px / 24px`, weight 400
- **颜色：** `rgb(255, 255, 255)`
- **边框：** `0px solid rgba(255, 255, 255, 0.16)`

**区块（8 处）：**
- **字体排版：** `16px / 24px`, weight 400
- **内边距：** `112px 0px`, `64px 0px 0px`
- **颜色：** `rgb(255, 255, 255)`

**列表（25 处）：**
- **字体排版：** `14px / 20px`, weight 400
- **颜色：** `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.45)`

### 提取诊断

- 从 605 个总 DOM 元素中采样了 300 个可见元素。
- 置信度：高。
- 无提取警告。

**冲突说明：** 视觉截图表明正文文本使用 sentence case 以保证可读性，而工程 CSS 证据表明主正文样式使用 `text-transform: uppercase` 和 `2.4px` letter-spacing。实现时应将大写处理限定于导航和标签元素。

## AI 视觉分析

### 核心风格

深色模式开发者工具美学，带有"赛博黑色"气质。界面使用近黑色基底（`#000` 到 `rgba(4,8,15,0.78)`），配以高对比度白色字体和靛蓝强调辉光（`rgb(99,102,241)`）。视觉层级依赖于精致的大写间距（Inter 300）与大量衬线展示文本（Georgia 72px）之间的尺度对比。美学通过穿插等宽代码片段与精美的营销文案来传达技术精度。

### 纹理与氛围

多层玻璃态拟物创造维度深度。主表面使用 `backdrop-filter: blur(24px)` 与 `rgba(4,8,15,0.78)` 背景。微妙的网格叠加（48px 间隔的 `linear-gradient` 图案）提供技术纹理而不造成视觉噪音。空灵的辉光从主按钮发出，使用 `box-shadow: 0 0 28px rgba(99,102,241,0.24)`。氛围平衡了不透明度级别：前景元素 78% 不透明度，边框 8-16% 白色，文本从 45% 到 100% 白色以表示深度层级。

### 布局与构图

居中单栏叙事流，具有最大内容宽度限制。粘性导航在滚动时保持上下文。充裕的垂直区块内边距（`112px`）在内容群之间创造呼吸空间。三列定价网格使用 flexbox 均等分布。非对称双列布局用于功能展示（图片左，内容右）。交互式演示容器具有内部标签系统（Linear/Vercel/Stripe），带有玻璃面板处理。

### 交互方向

富有表现力的动效语言优先平滑而非速度。微交互使用 `0.15s` 过渡与 `cubic-bezier(0.4, 0, 0.2, 1)` 缓动。按钮悬停状态触发靛蓝辉光增强和微妙的亮度偏移（`brightness(1.1)`）。焦点状态使用靛蓝着色的 `ring` 阴影。手风琴组件在 `0.2s ease-out` 内动画化高度变化。切换开关交互（在定价月/年中可见）使用 transform 平移与弹性缓动。

## 设计系统规则

### 应当

- 对导航标签、眉题文本和 CTA 应用 `text-transform: uppercase` 与 `2.4px` letter-spacing。
- 对所有按钮和交互药丸使用 `border-radius: 9999px`，以保持柔和、现代的美学。
- 为卡片表面实现玻璃面板处理：`background: rgba(4,8,15,0.78)` 配合 `backdrop-filter: blur(24px)` 和 `border: 1px solid rgba(255,255,255,0.08)`。
- 对主操作按钮和激活状态应用靛蓝辉光阴影（`0 0 28px rgba(99,102,241,0.24)`）。
- 对 H1 和 H2 展示文本使用 Georgia serif 字体栈，以在 Inter UI 元素之间创造编辑对比。
- 对所有交互状态变化保持最少 `0.15s` 的过渡持续时间。

### 不应当

- 对内容卡片使用纯色不透明背景（`rgb(0,0,0)`）；始终优先使用半透明玻璃层以保持深度。
- 在没有备用纯色背景的情况下移除 `backdrop-filter` 支持，因为玻璃态拟物是品牌识别的核心。
- 对标题使用低于 300 的 `font-weight`，因为细权重对于优雅、技术美学至关重要。
- 对主按钮应用尖锐的（`0px` 或 `1px`）border-radius；仅保留用于大型内容面板和代码块。
- 对次要文本使用纯白色（`rgb(255,255,255)`）；改用 `rgba(255,255,255,0.45)` 或 `rgba(255,255,255,0.6)`。

### 实现备注

- **CSS 变量：** 系统依赖 `:root` 变量，包括 `--background: #000`, `--card: rgba(6,10,18,.78)`, `--primary: #4f46e5`, `--border: hsla(0,0%,100%,.16)`, 和 `--muted: hsla(0,0%,100%,.08)`。
- **字体加载：** Inter 通过 Next.js 字体优化（`__Inter_f367f3`）加载，带有 Arial 回退指标。Georgia 用于展示标题，无需加载网络字体（系统衬线栈）。
- **玻璃面板类：** `.glass-panel` 组合了 `border-radius: 1px`, `border: 1px solid rgba(255,255,255,0.08)`, `background: rgba(4,8,15,0.78)`, 和 `box-shadow: rgba(255,255,255,0.03) 0px 0px 0px 1px inset, rgba(255,255,255,0.03) 0px 0px 60px 0px`。
- **动效无障碍：** 当检测到用户偏好时，通过禁用 `2s` 脉冲动画和 `0.3s` transform 过渡来尊重 `prefers-reduced-motion`。
- **网格背景：** 使用 `linear-gradient(rgba(255,255,255,0.043) 1px, transparent 0px)` 配合 `background-size: 48px 48px` 实现微妙网格，并在边缘用 `linear-gradient` 淡出遮罩。

# 核心原则

1. 坚决拒绝（负面约束）：

- 禁止在白色背景上使用紫色/蓝色渐变
- 禁止使用常见字体（Inter, Roboto, Arial, system-ui）
- 禁止使用可预测的 hero-CTA-功能-评价模板
- 禁止使用常见的几何形状或抽象斑点
- 禁止使用看起来像图库图片或陈词滥调的视觉效果

## 性能优化

- 确保页面快速加载，避免不必要的大型资源
- 使用现代图片格式（WebP）和适当的压缩
- 对长页面内容实现懒加载技术

**重要提示**：实现复杂度应与美学愿景相匹配。极繁主义设计需要复杂的代码以及大量的动画和效果。极简或精致的设计需要克制、精确，并关注间距、字体排版和微妙细节。优雅来自于对愿景的完美诠释。记住：Claude 拥有非凡的创造力。不要拘束，充分展示 Claude 在摆脱传统思维、完全沉浸于独特愿景后所能创造的真正作品。