infocard-darkblue-style

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

推荐结构：

1. Hero

   • kicker
   • title
   • 英文 tagline
   • 中文补充说明
   • pill row
   • gradient callout

2. Shell / Workbench

   • 左：workspace / project list
   • 中：tasks / terminal / editor / diff
   • 右：status / stats / donut / activity

3. Feature Row

   • 6–7 个图标化功能卡
   • 每个卡片一个 icon + 短标签

4. CTA

   • 渐变下载/开始按钮

5. Footer

   • 项目名、Stars、归属信息

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

• 深蓝背景 + 渐变光晕存在
• 面板有玻璃感、边框和层级
• 图标组件统一且可读
• hero / shell / feature row / CTA 结构完整
• 主要状态色以青蓝绿黄紫为主
• 390px 下无横向溢出
• 预览页与 _themes.yaml 命名一致

已验证 commit（可直接对照 live 渲染）：

• 03bd43f（2026-06-13）：baoyu-design，GitHub repo 信息卡，https://ccwq.github.io/infocard-pub/docs/20260613-baoyu-design.html — 桌面 + 移动端全 PASS

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 的桌面工作台产品”。如果内容变成纯文档、纯调查或纯知识卡，应改用更合适的主题。