00快速开始
- 打开 index.html，点任意一个设计方向（The Desk / Blueprint / Memo / Ledger）。
- 页面左下角有一颗 ● DEV 药丸；点它，或按 Shift+D，右侧滑出编辑面板。
- 在 颜色 / 字体 / 间距 三个标签里随意调整，页面实时变化。
- 想只改某一块？用面板顶部的 作用域 工具（见 按区块编辑）。
- 满意后点 ⧉ CSS 复制改动，或用 备份 保存/导出。
需要联网
字体通过 Google Fonts 加载，首次查看和切换字体预设时请保持联网；已设系统字体回退，离线也能看，只是字形会回退。
01打开 / 关闭面板
- 打开：点左下角 ● DEV 药丸，或按 Shift+D。
- 关闭：面板右上角 ×、底部「完成」、Esc，或再按一次 Shift+D。
- 直接进入：在网址后加
?dev 会自动打开面板。
所有改动会自动保存在浏览器本地（localStorage），刷新不丢；每个页面各存各的。
02颜色
- 预设配色：顶部一排色卡，每个方向都有专属搭配。点一下整体换色；原始 还原。
- 逐项调整：下面列出该方向所有颜色变量，每个都有取色器 + 十六进制输入框，实时生效。改过的变量名会变绿。
- 筛选：顶部搜索框输入
accent、bg 等可快速定位。
- 存为预设：调好后点 ＋ 存当前配色，命名后它会作为色卡出现，右上角 × 可删。
03字体
- 字体预设：一排字体搭配（如 Fraunces、Playfair、JetBrains…）。点一下即换整套；需要的 Google 字体会自动加载。
- 全局字号
--fs：一个滑杆等比缩放全站所有字号（标题也一起），这是真正的全局字号控制。
- 字体族：每个排版角色（标题、正文、等宽…）都能从下拉选字体或手输字体栈，右侧有实时预览。
- 载入系统字体：点 ⊕ 载入系统字体，授权后可把你电脑里安装的字体加进下拉框（见注意事项的浏览器要求）。
- 正文基线：字号 / 行高 / 字间距三个滑杆，作用于正文继承文本。
- 存为预设：＋ 存当前字体 把当前搭配（含
--fs）存成自己的字体预设。
04间距
- 页面缩放 Zoom：等比缩放整页（布局 + 文字），快速预览密度。
- 尺寸变量：如内容最大宽度
--maxw 等，用滑杆调整，每行可单独 reset。
05只改某一个区块
默认所有改动是全站的。想只改某个区块（比如只让「定价」区换配色），用面板顶部的作用域工具栏。
三种选中方式
- 下拉框：直接从列表选一个区块（
#pricing、.hero、footer…）。
- 🎯 点选：点它，再到页面上点想要的区块。
- ▦ 框选（推荐）：点它，页面会框出所有可编辑区块；鼠标划到哪，哪块就高亮，点一下即选中——最容易精确定位。
框选叠层的颜色含义
| 颜色 | 含义 |
|---|
| 灰色虚线 | 普通区块，未改动 |
| 绿色 | 鼠标正悬停的区块（划到哪高亮到哪） |
| 蓝色实线 | 当前正在编辑的区块 |
| 琥珀色 | 已经有改动的区块 |
- 选中某区块后，颜色/字体/间距/预设的所有操作都只作用于这一块（原理：给该区块单独写一层 CSS 变量）。
- 作用域下拉变琥珀色表示当前非全站；清除 (n) 撤掉这一块的全部改动。
- 切回 🌐 全站 Global 即恢复全站编辑。
典型流程
Shift+D → 点 ▦ → 鼠标划过页面找到目标（绿色高亮）→ 点它选中（变蓝）→ 在面板里改颜色/字体 → 只有这一块会变。
06撤销 / 重做
- 面板顶部 ↶ 撤销 / ↷ 重做 按钮。
- 快捷键：Ctrl+Z 撤销，Ctrl+Shift+Z（或 Ctrl+Y）重做（面板打开时）。
- 连续拖滑杆会合并成一步，撤销更顺手。
07预设（含自定义）
- 颜色页和字体页各有一排预设；每个方向都配了专属搭配。
- 存自己的：＋ 存当前配色 / ＋ 存当前字体 把当前状态存成一枚预设色卡，随时点用，× 删除。
- 配色预设只改颜色、字体预设只改字体，互不干扰；应用预设也可撤销。
08备份（保存 / 载入 / 导出文件）
面板底部的备份区，保存的是完整状态（颜色 + 字体 + 尺寸 + 缩放 + 区块改动）。
- 保存：输入名称 → 保存，存入浏览器。
- 载入 / 删除：从下拉选一个 → 载入 或 删除。
- 导出 .json：把当前主题下载成文件，可分享或长期保存。
- 导入 .json：把导出的文件读回来（载入也可撤销）。
09把改动变成正式代码
- 点顶部 ⧉ CSS，会把你的全部改动复制成一段 CSS——包含
:root{…} 全局变量、各区块的作用域块（如 #pricing{…}）、以及正文/缩放规则。
- 把它粘进对应 HTML 文件
<style> 里，改动就永久固化了。
上线前
删掉页面底部那一行 <script src="dev-mode.js"></script>，Dev Mode 面板与其所有样式就完全消失，其余不受影响。
重置全部：面板底部「重置全部」清空所有改动（含区块与备份状态之外的当前编辑），回到原始主题。
10注意事项
- 联网：字体走 Google Fonts，需联网；均有系统字体回退。
- 系统字体枚举：⊕ 载入系统字体 依赖浏览器的 Local Font Access API——目前仅 Chrome / Edge 支持，且会弹出授权。其它浏览器不支持时，可直接在「自定义」框手输已安装字体名，同样生效。
- 保存位置：改动与备份存在当前浏览器的 localStorage；换浏览器/设备不同步，用「导出 .json」搬运。
- 兼容：建议用最新版 Chrome / Edge / Firefox / Safari。
- 这是设计稿：页面中的 logo、二维码、案例数据等仍是占位/打码，上线前替换。