痛点以及需求

在网上下载了很多好用的skill，都是英文描述的，我想要把它转成中文描述，但是其中有的HTML或者CSS等专业术语，我又希望它是以英文的展现。

这样能达到的目的就是，skill的中文我可以很容易地看懂并且修改，但是里面的专业术语又是用英文的表述。

解决办法

提示词：

# Role
你是一位精通前端开发、UI/UX 设计以及技术文档编写的资深翻译专家。你擅长在保持技术专业性的前提下，将复杂的英文设计系统或技术文档翻译成简洁、专业的中文。

# Task
请将我提供的英文技术文档翻译成中文。

# Constraints & Rules
1. **术语保留原则**：
   - 严禁翻译 HTML/CSS/JS 的属性名、方法名、代码片段（如 `display: flex`, `padding`, `border-radius`, `addEventListener` 等）。
   - 严禁翻译十六进制颜色代码（如 `#faff69`）或 RGBA 值。
   - 保留行业通用的技术术语（如 CTA, Hover, Active, DOM, SaaS, Docker, Vibe Coding 等），必要时可使用中英对照格式。

2. **翻译风格**：
   - 采用“动词 + 名词/技术”的结构（如“优化性能”、“构建组件”），使文案更有力。
   - 保持专业的技术语境，避免过度文学化，确保翻译后的内容符合中文开发者的阅读习惯。
   - 排版上使用中英文混排的最佳实践，在中英文之间保留一个空格。

3. **排版要求**：
   - 严格保留原始文档的 Markdown 结构（标题、列表、表格、代码块）。
   - 使用加粗（**文字**）来强调关键参数或重要概念。

# Workflow
1. 识别文档中的自然语言部分与技术标识符部分。
2. 翻译自然语言部分，同时将技术标识符嵌入到对应的中文语境中。
3. 检查所有 CSS 属性和颜色值，确保与原文完全一致且无漏译。

# Input Data
[在此粘贴你的英文文档内容]

结果对比

翻译前

# Design System Inspiration of ClickHouse

## 1. Visual Theme & Atmosphere

ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.

The typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This "database for AI" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.

What makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.

**Key Characteristics:**
- Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast
- Extra-heavy display typography: Inter at weight 900 (Black) up to 96px
- Dark charcoal card system with #414141 borders at 80% opacity
- Forest green (#166534) secondary CTA buttons
- Performance stats as oversized display numbers
- Uppercase labels with wide letter-spacing (1.4px) for navigation structure
- Active/pressed state shifts text to pale yellow (#f4f692)
- All links hover to neon yellow-green — unified interactive signal
- Inset shadows on select elements creating "pressed into the surface" depth

## 2. Color Palette & Roles

### Primary
- **Neon Volt** (`#faff69`): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.
- **Forest Green** (`#166534`): Secondary CTA color — a deep, saturated green for "Get Started" and primary action buttons that need distinction from the neon.
- **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.

### Secondary & Accent
- **Pale Yellow** (`#f4f692`): Active/pressed state text color — a softer, more muted version of Neon Volt for state feedback.
- **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders — the neon's muted sibling.
- **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.

### Surface & Background
- **Pure Black** (`#000000`): The primary page background — absolute black for maximum contrast.
- **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.
- **Charcoal** (`#414141`): The primary border color at 80% opacity — the workhorse for card and container containment.
- **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.
- **Hover Gray** (`#3a3a3a`): Button hover state background — slightly lighter than Near Black.

### Neutrals & Text
- **Pure White** (`#ffffff`): Primary text on dark surfaces.
- **Silver** (`#a0a0a0`): Secondary body text and muted content.
- **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.
- **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).

### Gradient System
- **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The "gradient" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.

## 3. Typography Rules

### Font Family
- **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)
- **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`
- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |
| Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |
| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |
| Sub-heading | Inter / Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | Card headings |
| Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |
| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |
| Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |
| Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | Metadata, descriptions, links |
| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |
| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |
| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |
| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |

### Principles
- **Weight 900 is the weapon**: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.
- **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.
- **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.
- **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between "data/performance" (Inter) and "product/feature" (Basier) contexts.

## 4. Component Stylings

### Buttons

**Neon Primary**
- Background: Neon Volt (`#faff69`)
- Text: Near Black (`#151515`)
- Padding: 0px 16px
- Radius: sharp (4px)
- Border: `1px solid #faff69`
- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays
- Active: text shifts to Pale Yellow (`#f4f692`)
- The eye-catching CTA — neon on black

**Dark Solid**
- Background: Near Black (`#141414`)
- Text: Pure White (`#ffffff`)
- Padding: 12px 16px
- Radius: 4px or 8px
- Border: `1px solid #141414`
- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity
- Active: text to Pale Yellow
- The standard action button

**Forest Green**
- Background: Forest Green (`#166534`)
- Text: Pure White (`#ffffff`)
- Padding: 12px 16px
- Border: `1px solid #141414`
- Hover: same dark shift
- Active: Pale Yellow text
- The "Get Started" / primary conversion button

**Ghost / Outlined**
- Background: transparent
- Text: Pure White (`#ffffff`)
- Padding: 0px 32px
- Radius: 4px
- Border: `1px solid #4f5100` (olive-tinted)
- Hover: dark bg shift
- Active: Pale Yellow text
- Secondary actions with neon-tinted border

**Pill Toggle**
- Background: transparent
- Radius: pill (9999px)
- Used for toggle/switch elements

### Cards & Containers
- Background: transparent or Near Black
- Border: `1px solid rgba(65, 65, 65, 0.8)` — the signature charcoal containment
- Radius: 4px (small elements) or 8px (cards, containers)
- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)
- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)
- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the "pressed" effect
- Neon-highlighted cards: selected/active cards get neon yellow-green border or accent

### Navigation
- Dark nav on black background
- Logo: ClickHouse wordmark + icon in yellow/neon
- Links: white text, hover to Neon Volt (#faff69)
- CTA: Neon Volt button or Forest Green button
- Uppercase labels for categories

### Distinctive Components

**Performance Stats**
- Oversized numbers (72px+, weight 700–900)
- Brief descriptions beneath
- High-contrast neon accents on key metrics
- The primary visual proof of performance claims

**Neon-Highlighted Card**
- Standard dark card with neon yellow-green border highlight
- Creates "selected" or "featured" treatment
- The accent border makes the card pop against the dark canvas

**Code Blocks**
- Dark surface with Inconsolata at weight 600
- Neon and white syntax highlighting
- Terminal-like aesthetic

**Trust Bar**
- Company logos on dark background
- Monochrome/white logo treatment
- Horizontal layout

## 5. Layout Principles

### Spacing System
- Base unit: 8px
- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
- Section vertical spacing: generous (48–64px)

### Grid & Container
- Max container width: up to 2200px (extra-wide) with responsive scaling
- Hero: full-width dark with massive typography
- Feature sections: multi-column card grids with dark borders
- Stats: horizontal metric bar
- Full-dark page — no light sections

### Whitespace Philosophy
- **Dark void as canvas**: The pure black background provides infinite depth — elements float in darkness.
- **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.
- **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.

### Border Radius Scale
- Sharp (4px): Buttons, badges, small elements, code blocks
- Comfortable (8px): Cards, containers, dividers
- Pill (9999px): Toggle buttons, status indicators

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Black background, text blocks |
| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |
| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |
| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |
| Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements — "sunk into the surface" |
| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |

**Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a "pressed into the surface" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.

## 7. Do's and Don'ts

### Do
- Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black
- Use Inter at weight 900 for hero display text — the extreme weight IS the personality
- Keep everything on pure black (#000000) — never use dark gray as the page background
- Use charcoal borders (rgba(65,65,65,0.8)) for all card containment
- Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy
- Show performance stats as oversized display numbers — it's the core visual argument
- Use uppercase with wide letter-spacing (1.4px) for section labels
- Apply Pale Yellow (#f4f692) for active/pressed text states
- Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback

### Don't
- Don't introduce additional colors — the palette is strictly black, neon, green, and gray
- Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)
- Don't reduce display weight below 700 — heavy weight is core to the personality
- Don't use light/white backgrounds anywhere — the entire experience is dark
- Don't round corners beyond 8px — the sharp geometry reflects database precision
- Don't use soft/diffused shadows on black — they're invisible. Use border-based depth instead
- Don't skip the inset shadow on active states — the "pressed" effect is distinctive
- Don't use warm neutrals — all grays are perfectly neutral

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked cards |
| Small Tablet | 640–768px | Minor adjustments |
| Tablet | 768–1024px | 2-column grids |
| Desktop | 1024–1280px | Standard layout |
| Large Desktop | 1280–1536px | Expanded content |
| Ultra-wide | 1536–2200px | Maximum container width |

### Touch Targets
- Buttons with 12px 16px padding minimum
- Card surfaces as touch targets
- Adequate nav link spacing

### Collapsing Strategy
- **Hero text**: 96px → 72px → 48px → 36px
- **Feature grids**: Multi-column → 2 → 1 column
- **Stats**: Horizontal → stacked
- **Navigation**: Full → hamburger

### Image Behavior
- Product screenshots maintain aspect ratio
- Code blocks use horizontal scroll on narrow screens
- All images on dark backgrounds

## 9. Agent Prompt Guide

### Quick Color Reference
- Brand Accent: "Neon Volt (#faff69)"
- Page Background: "Pure Black (#000000)"
- CTA Green: "Forest Green (#166534)"
- Card Border: "Charcoal (rgba(65,65,65,0.8))"
- Primary Text: "Pure White (#ffffff)"
- Secondary Text: "Silver (#a0a0a0)"
- Active State: "Pale Yellow (#f4f692)"
- Button Surface: "Near Black (#141414)"

### Example Component Prompts
- "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
- "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
- "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
- "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
- "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."

### Iteration Guide
1. Keep everything on pure black — no dark gray alternatives
2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds
3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body
4. Active states use Pale Yellow (#f4f692) — not just opacity changes
5. All links hover to Neon Volt — consistent interactive feedback
6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism

翻译后

# ClickHouse 设计系统灵感指南 (Design System Inspiration)

## 1. 视觉主题与氛围 (Visual Theme & Atmosphere)

ClickHouse 的界面设计像是一个在黑曜石背景上渲染着酸性黄绿色的高性能驾驶舱——在读到任何文字之前，这种设计就已经传达了“速度感”。

整个体验沉浸在黑暗中：使用纯黑背景 (`#000000`) 配合深木炭色卡片 (`#414141` 边框)，营造出一种终端级别的审美。唯一的色彩点缀是标志性的霓虹黄绿色 (`#faff69`)，它像荧光笔一样横扫过 **CTA**、边框和高亮时刻。

排版风格极其硬朗：使用字重为 **900 (Black)** 的 **Inter** 字体作为 96px 的巨型标题，使文字块具有物理量感。这种“为 AI 而生的数据库”网站通过视觉重量传达原始力量：厚重的字体、高对比度的霓虹点缀，以及以超大数字显示的性能统计数据。

**核心特征 (Key Characteristics):**
- **纯黑画布 (#000000)**：配合霓虹黄绿色 (`#faff69`) 点缀，实现最大对比度。
- **超重显示排版**：使用 **Inter** 字体，字重 **900 (Black)**，尺寸高达 96px。
- **深木炭色卡片系统**：使用 `#414141` 边框，透明度为 80%。
- **森林绿 (#166534)**：用于次级 **CTA** 按钮。
- **性能统计数据**：以超大数字形式展示。
- **大写标签**：导航结构采用宽字间距 (1.4px) 的大写字母。
- **状态反馈**：激活/按下 (**Active/Pressed**) 状态文字转为浅黄色 (`#f4f692`)。
- **统一交互信号**：所有链接在 **Hover** 时变为霓虹黄绿色。
- **内阴影 (Inset Shadows)**：在特定元素上创造“压入表面”的深度感。

---

## 2. 调色板与角色 (Color Palette & Roles)

### 主色 (Primary)
- **Neon Volt (`#faff69`)**: 品牌标志色。一种鲜艳的酸性黄绿色，是黑色画布上唯一的色彩重点。用于主 **CTA**、装饰边框、链接 **Hover** 状态及高亮瞬间。
- **Forest Green (`#166534`)**: 次级 **CTA** 颜色。一种深沉、饱和的绿色，用于“立即开始”等需要与霓虹色区分的主操作按钮。
- **Dark Forest (`#14572f`)**: 深绿色变体，用于边框和次要装饰。

### 表面与背景 (Surface & Background)
- **Pure Black (`#000000`)**: 主页面背景，实现极致对比。
- **Near Black (`#141414`)**: 按钮背景和轻微抬升的暗色表面。
- **Charcoal (`#414141`)**: 主边框颜色（80% 不透明度），用于卡片和容器的围合。
- **Hover Gray (`#3a3a3a`)**: 按钮 **Hover** 状态背景，比 **Near Black** 略亮。

---

## 3. 排版规则 (Typography Rules)

### 字体族 (Font Family)
- **Primary**: `Inter` (Next.js 优化版 `__Inter_d1b8ee`)
- **Secondary Display**: `Basier` (`__basier_a58b65`)
- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)

### 层级规范 (Hierarchy)

| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 | 说明 |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| **Display Mega** | Inter | 96px | **900** | 1.00 | normal | 极致视觉冲击，超重 |
| **Feature Heading** | Basier | 36px | 600 | 1.30 | normal | 功能块锚点 |
| **Body / Button** | Inter | 16px | 400–700 | 1.50 | normal | 标准正文、导航、按钮 |
| **Code** | Inconsolata | 16px | 600 | 1.50 | normal | 代码块、命令 |

---

## 4. 组件样式 (Component Stylings)

### 按钮 (Buttons)

**霓虹主按钮 (Neon Primary)**
- **Background**: `#faff69` (Neon Volt)
- **Text**: `#151515` (Near Black)
- **Border**: `1px solid #faff69`
- **Radius**: 4px (直角硬朗感)
- **Hover**: 背景切换至暗色 (`rgb(29, 29, 29)`)

**森林绿按钮 (Forest Green)**
- **Background**: `#166534` (Forest Green)
- **Text**: `#ffffff` (Pure White)
- **Border**: `1px solid #141414`
- 用于“立即开始”或主要转化按钮。

### 卡片与容器 (Cards & Containers)
- **Background**: 透明或 **Near Black**
- **Border**: `1px solid rgba(65, 65, 65, 0.8)` —— 标志性的木炭色围合感。
- **Shadow Level 3 (内阴影)**: `rgba(0,0,0,0.14) 0px 4px 25px inset` —— 创造独特的“压入感”。

---

## 5. 布局原则 (Layout Principles)

- **间距系统**: 以 **8px** 为基准单位（Scale: 8px, 16px, 24px, 32px, 48px, 64px）。
- **暗黑虚空画布**: 纯黑背景提供无限深度，元素仿佛漂浮在黑暗中。
- **霓虹高亮引导**: 黄绿色装饰像跑道灯一样，引导用户视线穿过暗色界面。
- **响应式行为**: 
  - **Hero 文字**: 96px (桌面) → 72px → 48px → 36px (移动端)。
  - **代码块**: 在窄屏上使用水平滚动 (**Horizontal Scroll**)。

---

## 6. 准则 (Do's and Don'ts)

### ✅ 推荐 (Do)
- 使用 **Neon Volt (#faff69)** 作为唯一的色彩点缀。
- 在 **Hero** 标题上使用字重 **900** 的 **Inter** 字体。
- 保持背景为绝对纯黑 (**#000000**)，不要用深灰色代替。
- 所有的链接在 **Hover** 时必须变为霓虹黄绿色。

### ❌ 避免 (Don't)
- 不要引入额外的颜色——调色板严格限制在黑、霓虹、绿、灰。
- 不要将霓虹色作为大面积的背景填充。
- 圆角半径 (**Border Radius**) 不要超过 8px。
- 不要在黑色背景上使用柔和/弥散的阴影，它们是不可见的。