| name | infocard-darkblue-style |
| description | 深蓝渐变 / 玻璃面板 / 图标化工作台的信息卡风格。用于把 Agent IDE、桌面工作台、并行任务管理、开发者工具类内容做成深色高对比、带渐变光晕和图标组件的展示型 infocard。 |
| version | 1.0.0 |
| author | Hermes Agent |
| license | MIT |
| metadata | {"hermes":{"tags":["infocard","style","dark-blue","gradient","glassmorphism","icons","ide","workbench"],"related_skills":["any2card","infocard-style-man-skill","infocard-pub-publisher"]}} |
infocard-darkblue-style
Overview
infocard-darkblue-style 是一种面向 Agent-first IDE / 桌面工作台 / 开发者产品 的深蓝渐变风格。
它的视觉锚点不是纸感、瑞士黑头或手册骨架，而是：
- 深蓝黑底 + 冷色渐变光晕
- 玻璃感面板与发光边缘
- 任务、工作区、终端、编辑器、统计等模块化卡片
- 颜色更像产品宣传页而不是纯文档页
- 图标化表达，强调“工作台感”
Use Cases
适合
- Agent IDE、AI 编程工作台、桌面应用宣传页
- 并行任务、终端、编辑器、Git、状态看板
- 开发者工具、生产力工具、控制台类信息卡
- GitHub repo 里带“终端状态总览 / dashboard / monitor / workbench”这类语义时，优先把 hero 图作为屏幕化界面锚点，标题保持产品姿态，不退化成纯工具清单；若 README / 用户截图能直接证明工作台形态，优先保留并本地化为 hero 视觉。
不适合
- 纸感手作风、Q 风、暖色编辑风
- 黑头调查拆解风
- 红黑瑞士工具图鉴风
- 需要大量暖纸留白或报刊式排版的内容
触发词
- 深蓝 / dark blue
- 渐变光晕
- 玻璃面板
- 工作台 / workbench
- IDE / agent IDE
- 图标化卡片
- 终端 + 编辑器 + 任务看板
- 教学项目 / teaching / educational / 小而可读 / teaching project（coding agent 类仓库）
- harness / teaching agent / 极简 agent / smol agent / minimal agent
Design DNA
- 情绪：冷静、现代、偏未来感
- 结构：多面板并列，像产品界面而不是单页文章
- 视觉锚点：渐变条、浮层面板、图标圆角按钮、发光进度条
- 色彩策略：深底承载，青蓝为主，绿色/黄色/紫色做状态和装饰
- 内容组织：hero + shell + status + feature row + CTA
- 核心感受：这是一个“Agent 工作台”，不是普通网页海报
Color Tokens
推荐使用以下 token：
:root {
--bg: #0c1020;
--bg-2: #11162a;
--panel: #171c2b;
--panel-2: #0f1424;
--ink: #eef4ff;
--muted: #a8b7df;
--line: rgba(255,255,255,.12);
--cyan: #58c3ff;
--blue: #4a78ff;
--green: #2db36a;
--yellow: #f4c84c;
--purple: #8459ff;
--soft: #eef4ff;
}
Token 用途
--bg / --bg-2：页面背景、深层底色--panel / --panel-2：玻璃面板、卡片底--ink：主文字--muted：说明文字、路径、辅助信息--line：边框、分隔线--cyan / --blue：主强调、链接、进度条起点--green：运行中 / 成功 / 活跃状态--yellow：警告、提醒、计数点--purple：下载按钮、主 CTA、渐变尾色
Typography
建议字号层级：
- Hero title：
clamp(34px, 7vw, 86px)，weight 950
- Hero subtitle：
clamp(15px, 2vw, 20px)
- Chinese subline：
clamp(13px, 1.6vw, 16px)
- Panel title：
13px–14px，weight 900，略增字距
- Body：
12px–13.8px
- Stat / label / path：
10.5px–12px
- 最小字号底线：
11px
Layout Skeleton
推荐结构：
-
Hero
- kicker
- title
- 英文 tagline
- 中文补充说明
- pill row
- gradient callout
-
Shell / Workbench
- 左：workspace / project list
- 中：tasks / terminal / editor / diff
- 右：status / stats / donut / activity
-
Feature Row
- 6–7 个图标化功能卡
- 每个卡片一个 icon + 短标签
-
CTA
-
Footer
Component Rules
Gradient bars
- 可以使用蓝 → 紫、青 → 绿、黄 → 紫等渐变
- 渐变应该是“分区感”与“能量感”，不是彩虹海报
- 允许出现在 hero 背景、进度条、CTA、强调边缘
Glass panels
- 卡片背景偏深，边框半透明
- 阴影要柔，不要做成厚重黑影
- 面板之间要有明显层级，但不能太空
Icons
- 优先使用 SVG / 线性图标 / 简洁几何图标
- 圆形或圆角方形底座都可
- 图标颜色建议白色、青色或按状态染色
- 避免把 emoji 当成主图标；emoji 只适合草稿，不适合正式预览页
Status chips
- 用于显示任务状态、工作区、标签、能力点
- 形态应统一：圆角、细边框、低饱和填充
CTA button
- 主按钮使用蓝紫渐变或青紫渐变
- 保持高可见度，但不要抢过 hero title
Mobile Rules
- 720px 以下优先单列化 shell
- feature row 从 6/7 列降为 2 列或 1 列
- CTA 按钮在移动端改为全宽
- 保留渐变和图标，不要把深色背景改成浅色
- 标题可缩小，但不能丢掉强烈的夜间产品感
- 390px 下必须避免横向溢出，卡片内部 padding 要统一
Anti-patterns
- 不要把它做成 hardblue / redswiss 的红黑瑞士风
- 不要加暖纸纹理、纸边、贴纸感、手作感
- 不要把渐变变成大面积霓虹噪点
- 不要使用过多鲜艳纯色，尤其是大面积红色
- 不要用杂乱 icon 拼贴取代统一视觉系统
- 不要让面板看起来像普通博客卡片
Acceptance Checklist
已验证 commit（可直接对照 live 渲染）：
Naming / Aliases
- 英文名：
infocard-darkblue-style
- 中文名：深蓝渐变风 / 深蓝工作台风
- 常用别名：darkblue、agent workbench、dark blue gradient
- 主题 slug：
darkblue
- 对应预览页：
theme/darkblue.html
Routing: When to Choose darkblue vs hardblue
darkblue 和 hardblue 都可用于 GitHub 仓库技术分享，但边界不在于"工具 vs 框架"，而在于内容的结构复杂度：
| 特征 | 选 darkblue | 选 hardblue |
|---|
| 多阶段工作流（3+ phases） | ✅ 5-phase loop，循环闭环 | 勉强 |
| 平台支持矩阵（6+ platforms） | ✅ 平台支持度进度条 | ✅ |
| 上下文/状态管理体系 | ✅ STATE.md, .planning/, cache 设计 | ❌ |
| 单一工具 / CLI / 命令行 | ❌ 易显得过重 | ✅ 直接 |
| 2–4 个核心能力 pillars + stats | ✅ 也适合 | ✅ 也适合 |
| Agent 元框架 / context engineering | ✅ 工作台感强 | ❌ |
| 中间件 / 基础设施代理 | ✅ | ✅ |
| AI 模型 / 开源项目（技术原理展示） | ✅ Hero + 数字徽章 + R-SWA SVG 原理图 + Feature Card + Data Wall + Audience Grid + Sources 完整结构 | ❌ |
| Agent 数据网关 / MCP 服务 | ✅ Agent 应用层 + 多平台 + 计费说明 | ❌ |
| 开发者工具 + 平台覆盖矩阵 | ✅ 多能力导航 + 状态面板 | ❌ |
| Coding Agent 教学项目 | ✅ 三层架构图 + 教学定位差异表 + 事件流解耦叙事 | ❌ |
AgentKey 案例（2026-07-09）：AgentKey（chainbase-labs）是一个 MCP gateway，面向 Claude Code / Codex / Cursor 等 agent 提供网页搜索 + 社媒 + 链上数据的统一接口，典型结构是 Hero → Shell（能力导航 + 平台覆盖 + 计费状态） → Install → Not-混淆 → 存疑 → Feature Row → Footer。这类卡的写作要点见 references/agentkey-content-pattern.md。
实测案例（2026-06-12）：
open-gsd/gsd-core（meta-prompting + context engineering + 5-phase loop + 12 platforms）→ darkblue ✅borhen68/TokenTamer（AST compression + cache-first design + 5 clients + 8 languages）→ darkblue ✅chainbase-labs/Agentkey（MCP gateway + 10+ platforms + credits 计费）→ darkblue ✅- 两者的共同特征：多阶段、多平台、状态管理 → 工作台 metaphor 强，选 darkblue
| 特征 | 选 darkblue | 选 hardblue |
|---|
| 多阶段工作流（3+ phases） | ✅ 5-phase loop，循环闭环 | 勉强 |
| 平台支持矩阵（6+ platforms） | ✅ 平台支持度进度条 | ✅ |
| 上下文/状态管理体系 | ✅ STATE.md, .planning/, cache 设计 | ❌ |
| 单一工具 / CLI / 命令行 | ❌ 易显得过重 | ✅ 直接 |
| 2–4 个核心能力 pillars + stats | ✅ 也适合 | ✅ 也适合 |
| Agent 元框架 / context engineering | ✅ 工作台感强 | ❌ |
| 中间件 / 基础设施代理 | ✅ | ✅ |
实测案例（2026-06-12）：
open-gsd/gsd-core（meta-prompting + context engineering + 5-phase loop + 12 platforms）→ darkblue ✅borhen68/TokenTamer（AST compression + cache-first design + 5 clients + 8 languages）→ darkblue ✅- 两者的共同特征：多阶段、多平台、状态管理 → 工作台 metaphor 强，选 darkblue
References
references/nezha-source-and-creation-log.md — 视觉来源（ Nezha 产品图提取的 token/layer）、主题创建完整链路、已知限制references/darkblue-css-only-visual-approach.md — 纯 CSS 视觉元素工作流：orb / strip / SVG icon / glass panel / bar-row / phase strip 的精确 CSS 片段，无需外部图片即可构建完整的 darkblue 信息卡。经验来自 gsd-core + tokentamer (2026-06-12) 全程无图实践。references/github-repo-darkblue-workflow.md — GitHub 仓库 → Darkblue 信息卡完整工作流：delegate_task 调研 + read_file theme/darkblue.html 模板 + 写作结构 + 验证。经验来自 baoyu-design (2026-06-13)。references/session-notebooklm-py-darkblue-fit.md — 这类“自动化控制层 / 研究引擎 / CLI+MCP+REST”仓库卡也可归入 darkblue，而不必局限于 IDE 产品宣传页。references/fireworks-tech-graph-darkblue-workflow.md — GitHub repo 信息卡工作流（process file 缺失时回退到 README.md）+ GitHub raw CDN 图片 + onerror fallback 占位图模式 + Loop Engineering 流程图 CSS 片段 + Structured SVG Validator / Visual Review Gate 内容提取。references/terminal-statusline-repo-darkblue-pattern.md — Claude Code / coding-agent statusline、终端状态看板、Powerlevel10k-style UI 仓库的信息卡结构；包含零 token 本地观测层叙事、AI-interview installer flow、本地化截图与移动端字号验收坑点。references/coding-agent-teaching-project-pattern.md — Coding Agent 教学项目（huggingface/tau 类）写作模式：识别信号、三层架构图 CSS 写法、教学差异对比表核心逻辑、核心一句模板。references/ai-model-card-darkblue-pattern.md — AI 模型/开源项目信息卡（非 IDE 产品类）darkblue 写法：Hero + 数据徽章 + R-SWA 原理 SVG 图 + Feature Card + Data Wall + Audience Grid + Sources 完整结构。来源：20260722-unlimited-ocr-rswa (Unlimited OCR) 全流程。references/darkblue-theme-classes.md（在 infocard-creation-preview-standards 中）— darkblue 主题 CSS class 速查，含调色板、hero/card/pill/grid 布局、SVG 简图规范。
Notes
这个风格最适合表达“Agent-first IDE / 类 Nezha 的桌面工作台产品”。如果内容变成纯文档、纯调查或纯知识卡，应改用更合适的主题。
