| name | erupt-blueprint |
| description | Apply the Erupt Blueprint design language when building UI pages, landing pages, documentation pages, or any web interface for the Erupt ecosystem. Trigger this skill whenever the user says "erupt blueprint 风格", "用 erupt 设计语言", "blueprint grid 风格", or asks to design a page consistent with the Erupt website style. Also trigger when building any new page under the erupt-site project, even if the user doesn't explicitly name the style — the house style should always be applied. |
Erupt Blueprint Design Language
这是 Erupt 体系的统一视觉语言，灵感融合了 vite.dev 的工程制图网格与现代 SaaS 产品页的清晰节奏感。
一、设计哲学
精密工程美学（Precision Engineering Aesthetic）。
核心气质：精密、平面、可信赖、技术感。每一条线都是结构线，而非装饰。页面应给人的感觉是"一张印刷精良的技术规格书"，而非海报或消费品页面。
这套风格刻意拒绝流行的互联网装饰：无渐变背景、无大阴影、无毛玻璃、无过度圆角。它传达的是"由工程师为工程师打造的工具"的气质。
从 vite.dev 借鉴的核心理念：
- 用 1px 边框线取代空白间距来划分区域——网格的精密感来自线，不来自空气
- 章节节奏极度一致：点阵标题行 → 内容网格行，循环往复，形成强烈的"可测量感"
- 单像素精度思维：spacing 取 32px 而非 30px，字号取 10.5px 而非 11px，每个数值都有理由
二、色彩体系
只有一种品牌强调色，其余全为中性色。克制到极致。
| 角色 | 色值 | 使用场景 |
|---|
| 品牌橙红 | #FF5722 | 唯一强调色：悬停、激活、标注、eyebrow、角标、边界装饰 |
| 正文深黑 | #0A0A0F | 标题、正文；接近纯黑但略带蓝调，避免生硬 |
| 次级灰 | #6B7280 | 说明文字、副标题、辅助信息 |
| 分割线灰 | #E5E7EB | 所有边框、分割线，是页面结构的骨架色 |
| 页面底色 | #FFFFFF | 纯白，不使用任何背景灰 |
| 代码底色 | #0A0A0F | 深色代码区域，与白色页面形成页面内最强对比 |
| 点阵背景 | rgba(0,0,0,0.038) | 章节标题行的图纸格线，极淡，几乎感知不到 |
原则： 品牌橙红是整页视觉的唯一焦点，不允许出现第二种强调色与其竞争。代码块内的语法高亮（蓝/绿/黄/紫）是唯一例外，且仅限于代码区域内。
三、排版体系
两种字体承担所有文字工作，通过字体本身传递信息的"温度"。
- 无衬线（正文）：Inter → -apple-system → PingFang SC → system-ui
- 等宽（技术标注）：JetBrains Mono → SFMono-Regular → Consolas
| 层级 | 字号 | 字重 | 要点 |
|---|
| H1 | clamp(38px, 5vw, 62px) | 700 | 字距 -0.025em，紧凑有力 |
| H2 | clamp(26px, 3.5vw, 40px) | 600 | 章节标题，字距 -0.02em |
| H3 | 15px | 600 | 卡片/功能标题 |
| Body | 14.5px | 400 | 行高 1.65，次级灰色 |
| Eyebrow | 10.5px | 400 | 等宽大写，字距 0.16em，橙红色 |
| Ghost Number | 40px+ | 700 | 极低透明度（约 5%），步骤序号背景装饰 |
等宽字体使用原则： 所有"技术性"内容用等宽——eyebrow tag、代码、数字统计、版本号、API 路径、状态词。正文保持无衬线的阅读舒适性。两种字体的对比本身就是页面气质的核心。
四、布局原则
**有界网格（Bounded Grid）**是本风格的结构基础，直接来源于 vite.dev。
4.1 主容器：图纸图框
页面核心内容置于 1200px 居中容器，左右两侧有竖向边框，像图纸的侧边框线。
4.2 水平分区行
页面由若干水平行叠加，行间用底部 1px 边框分隔，行之间没有任何间距。紧密堆叠是精密感的来源之一。
行类型只有两种：
- 标题行：点阵背景 + 居中文字，传递"这是一个新章节"的信号
- 内容行：纯白背景 + 网格布局，承载实际内容
4.3 网格列
内容行内用 CSS Grid 分列（2/3/4/6 列），单元格之间用右边框 + 底边框作为唯一分割手段——没有 gap，没有 margin，只有线。
单元格 padding：32px（桌面端）→ 24px（移动端）。最后一列去掉右边框，最后一行去掉底边框。
4.4 章节节奏：vite.dev 的核心韵律
每个章节固定遵循这个节奏（来自 vite.dev 的严格一致性）：
[点阵标题行] ← eyebrow + H2 + 一句话说明，居中，dot-grid 背景
[内容行] ← reveal 动画，纯白背景，网格布局
这种节奏的一致性让用户在滚动时形成肌肉记忆，知道每个"深色背景"代表新主题的开始。
4.5 左右分栏
代码对比、功能说明等双列场景用 flex 分栏，中间 1px 竖线分隔，无圆角、无间隙、无投影。
五、装饰语言
装饰极度克制，全部来自结构本身，不添加非结构性装饰。
5.1 区域边界标注（Section Markers / .ticks）
在页面中间区段的章节边界处（不含页面顶部英雄区），在行的顶部边框左右两侧加入朝内的橙红色实心三角形，表达"此处是一个可测量区域的边界"。这是直接来自 vite.dev 的经典形式，是本风格最具辨识度的装饰之一。
实现方式： 在 .r 上追加 .ticks 类即可，伪元素自动生成左右箭头。
三种用法（来自 home.html 的真实模式）：
<div class="r g-bg ticks">...</div>
<div class="r g-bg ticks only-before">...</div>
<div class="ticks"></div>
使用规则：
- 每个
.r.g-bg（章节标题行）都加 .ticks，首个英雄行除外
- 页面最后一个标题行用
only-before（右侧不再有结构延伸）
.fr 结尾处放一个空 <div class="ticks"></div> 作为视觉收口- 纯内容行（
.r 无 .g-bg）不加 .ticks
5.3 步骤序号幽灵字（Ghost Step Numbers）
在"如何使用"类步骤区块中，每个单元格左上角或背景中放置极大的序号（"01"、"02"...），透明度约 5%，等宽字体，字号 40px+。
这是 vite.dev 步骤展示区的标志性元素，在不干扰阅读的前提下传递"这是第 N 步"的空间感。
5.4 出血线（Bleed Lines）
.bleed-lines 类：行的顶部和底部各一条 1px var(--c-border) 线，向两侧延伸至 100vw，突破 .fr 容器边界。与 .fr 的左右竖边框共同构成 井字形 视觉框架。
用途：需要强调某一行"跨越页面宽度"的结构感时使用，典型场景是全宽代码编辑器、全宽演示区块等。
使用方式：在 .r 上追加 bleed-lines 即可，无需额外 HTML：
<div class="r bleed-lines">...</div>
约束：谨慎使用，一屏内不超过一处，过多会破坏有界容器的封闭感。
5.5 点阵图纸背景
章节标题行专属。极淡的方格网格（24×24px），模拟方格纸。仅用于标题行，内容行保持纯白。
5.6 禁止的装饰
明确不使用：渐变色背景、大阴影、毛玻璃、背景插画、彩色卡片底色、彩色 Badge、任何 3D 效果。
六、组件规范
6.1 按钮
两种样式，均为描边风格（默认态无实心背景）：
- 普通描边：灰色细描边，深黑文字 → 悬停变橙红描边 + 橙红文字
- 橙红描边：橙红描边，橙红文字 → 悬停橙红实心填充，白色文字
尺寸克制：padding 9px/20px，字号 13px，无圆角或极小圆角（≤ 2px）。多按钮并排用 flex gap 排列。
6.2 卡片
卡片即网格单元格，没有独立圆角，没有阴影，边框即网格线。悬停时极淡橙红底色（rgba(255,87,34,0.018)）。
可点击卡片加 cursor: pointer。这是与"卡片组件"思路的根本区别——不是浮起的元素，是网格中的格子。
6.3 Eyebrow Tag（眉标签）
等宽字体，10.5px，字距 0.16em，全大写，橙红色，位于章节 H2 上方。是章节的"类型注释"。
示例：How it works · What You Get · AI Native · Comparison · Get Started
6.4 深色代码窗口
模拟 macOS 代码编辑器窗口：
- 标题栏：深灰
#2d2d2d，左侧交通灯（红/黄/绿三个 12px 圆点），中央居中文件名
- 代码区：
#0A0A0F 背景，等宽字体，行高 1.75
- 语法高亮语义色：注解橙红
#FF5722、关键词蓝 #60a5fa、字符串绿 #86efac、注释灰（斜体）、类型黄 #fbbf24、数字紫 #c084fc
6.5 Mini 代码块（浅色）
内嵌于白色区域的小型代码示例：rgba(0,0,0,0.025) 背景，#E5E7EB 边框，等宽 11px，行高 1.65。用于展示简短的 API 用法。
6.6 数字统计带（Stat Strip）
展示关键指标时横向平铺（4～6 列网格）：
- 上方：大数字（26px，700 字重，字距 -0.04em）
- 下方：等宽大写标签（10px，字距 0.1em，次级灰）
6.7 引言（Testimonial）
- 大引号
" — Georgia 字体，橙红色，opacity 0.35
- 引言正文 — 13.5px，行高 1.72，次级灰
- 底部署名区 — 1px 细线分隔，署名加粗，职位等宽小字
6.8 无限滚动 Marquee
Logo 展示轨道：
- 上下各一条 1px 边框线形成"轨道"
- 每个 chip 用右边框分隔，高度固定 64px
- Logo 默认 opacity 0.44，悬停 0.75
- 左右渐变遮罩（
linear-gradient）让内容淡出边缘
七、动效原则
动效只服务于信息层级，不做表演。
-
滚动揭示（Reveal）：内容行进入视口时 opacity: 0 + translateY(12px) → 完整显示，0.6s ease。用 IntersectionObserver（threshold 0.05，触发后立即 unobserve）。仅用于内容行，不用于标题行。
-
悬停微反馈：按钮颜色过渡 0.15s，卡片底色淡入 0.15s。极短，只是轻微的触觉确认。
不使用：入场序列、视差滚动、3D 变换、粒子效果。
八、响应式
| 断点 | 变化 |
|---|
| > 1000px | 标准布局，容器有左右边框 |
| ≤ 1000px | 去掉容器左右边框；四列→二列；左右分栏→上下堆叠 |
| ≤ 700px | 所有多列→单列；六列→两列；padding 缩至 24px |
九、输出规范
输出页面时须遵守：
- 骨架：有界容器 → 水平行 → 网格列 → 单元格，禁止无边框悬浮卡片
- 章节节奏：点阵标题行 + 内容行（reveal），严格交替
- 步骤区块：用幽灵序号装饰（5.3），不用普通数字列表
- 按钮：描边风格，默认无实心背景
- 区域边界标注（
.ticks）：每个 .r.g-bg 加 .ticks，首个英雄行除外；最后一个标题行加 only-before；.fr 末尾放空 <div class="ticks"></div> 收口
- reveal 脚本：页面底部附
IntersectionObserver 初始化代码
- 装饰上限：点阵背景 + 区域边界标注 + 出血线（
.bleed-lines，每屏最多一处），三者之外不引入新装饰
