入门教程：5 分钟做出第一套主题Getting Started: Your First Theme in 5 Minutes

本教程带你走完最小闭环：选主色 → 生成配色体系 → 预览确认 → 导出使用。全程无需安装（在线版即可）。This walkthrough covers the minimal loop: pick a primary → generate the color system → preview → export. No installation needed — the web app is enough.

第 1 步：选一个主色Step 1: Pick a Primary

在主色候选库（44 个候选）中点击任意主色卡，或直接在操作台的拾色器中输入品牌色 HEX（如 #0047AB）。选择后系统自动套用预设副色并生成完整色阶（50–900 十档）。Click any card in the primary candidates library (44 curated colors), or type your brand HEX (e.g. #0047AB) into the console picker. The preset secondary is applied automatically and the full 50–900 scale is generated.

没有明确主色？试试桌面端的"网址取色探索"：输入目标网址，由真实渲染页面分析出推荐主副色与置信度。No primary in mind? On the desktop build, try URL Color Exploration: enter a URL and it analyzes a real render for recommended primaries/secondaries with confidence scores.

第 2 步：生成配色体系Step 2: Generate the Color System

在按配色关系模式生成面板中：In the Generate by Relation Mode panel:

宝典选色：从 24 种情感 × 10 种形态的配色组合中直接挑选（点击色条卡套用到主体色）；Baodian pick: browse combos across 24 moods × 10 classic forms (click a bar card to apply it to the body color);
规则补色：选择互补/类比/三次色等十种经典设计规则，一键"补副色 / 补第三色"；Rule fill: choose from ten classic designs (complement, analogous, triadic…) and fill the secondary / third in one click;
辅助色：主体色之外的独立强调色槽位（手动添加或按规则生成），用于数据强调、状态语义等。Auxiliary colors: independent accent slots outside the body color (manual or rule-generated) for data emphasis and status semantics.

第 3 步：预览确认Step 3: Preview

右侧预览区实时联动：PC 版企业后台（仪表盘/列表/表单/详情/分析/设置六页，可切换左右、上下、混合三种结构与明暗模式）与小程序示例（五页）。所有颜色、字号、间距、渐变随操作台即时变化。The preview panes update live: a full enterprise admin (dashboard/list/form/detail/analytics/settings, three layouts, dark & light) plus mini-program pages (five). Every color, font size, spacing and gradient follows the console instantly.

第 4 步：导出使用Step 4: Export

在主题 Token 导出面板选择目标：Pick a target in the Token Export panel:

目标Target	产物Output
CSS 变量CSS variables	`--hia-primary-*` 等全套变量与运行时快照，直接引入项目样式。full variable sheet plus a runtime snapshot — import straight into your styles.
JSON TokenJSON tokens	结构化色阶/渐变/字体/间距令牌，供设计系统消费。structured color/gradient/typography/spacing tokens for design systems.
WordPressWordPress	`theme.json` + 子主题骨架，可打包启用。a child-theme skeleton, ready to zip and activate.
TailwindTailwind	完整 `tailwind.config` 色族映射。a complete `tailwind.config` color-family mapping.

第 5 步：保存与分享Step 5: Save & Share

点击"生成并导入主题库"保存为主题预设；在主题库管理中可搜索、分类、导出主题包（JSON），或生成分享链接——对方打开链接即还原整套主题。远程预设源支持从 URL 订阅团队配色方案。Save with "Generate & import to library"; manage presets in the Theme Library (search, filter, export JSON packs), or generate a share link — opening the URL restores the whole theme. Remote preset sources let your team subscribe via URL.

桌面版增强：网址取色探索（真实渲染 + SSRF 双重防护）为 Electron / Tauri 端专属，见使用手册。Desktop extra: URL Color Exploration (real render + dual-layer SSRF protection) is Electron / Tauri only — see the manual.

下一步 → Next → 使用手册Manual