infocard-tool-cli-pattern

name	infocard-tool-cli-pattern
description	redswiss 风格工具/CLI 类信息卡的标准版式组合与元数据规范。触发条件：用户要求创建工具、CLI、开源项目的 redswiss 风格信息卡，或要求"基于 README 写信息卡"且目标有 GitHub Stars / CLI 命令 / Agent 支持等特征。模板位于 `~/infocard-pub/theme/redswiss.html`。
category	content
tags	["infocard","redswiss","tool","CLI","GitHub","Agent","pattern"]

infocard-tool-cli-pattern · 工具/CLI 类 redswiss 信息卡标准模式

触发条件

用户要求创建以下类型的信息卡时，优先使用本模式：

• 开源工具 / CLI 应用（如 md2wechat、tangram、ollama 等）
• GitHub 仓库图鉴
• Agent 集成类工具（Claude Code、Codex、OpenClaw 集成）
• 多命令对比表类内容

redswiss 视觉锚点：红色斜切 hero + 纯红黑无蓝 + category-dot 色点

标准版式组合（工具卡）

组件	类名	用途	必选
顶栏 hero	.topbar + .topbar-hero + .topbar-meta	Stars + License + 关键指标	✅
一句话概述	.overview + .overview-sentence	核心定位 ≤50 字，红色粗体	✅
DEMO GIF	.demo-gif + img	展示 CLI 实际运行效果	推荐
统计条	.stats + .stat	关键指标（Stars、主题数、模块数等）	✅
功能网格	.grid-2 + .card + .lead + .card h4 + .card p	4 个核心功能（2×2 布局）	推荐
对比表	table（黑头 + 斑马行）	免费 vs 专业、vs 对比等维度	视内容
工作流图	.flow + .flow-item + .flow-arrow	Agent 调用流程可视化	视内容
CLI 网格	.cli-grid + .cli-card + .cmd + .desc	列出命令或 discovery 端点	视内容
命令表	table	常用命令参考	视内容
安装块	pre（黑底浅色字）	快速安装命令	推荐

顶栏结构模板

<header class="topbar">
  <div class="topbar-hero">
    <div class="kicker">CLI · AGENT READY · GOLANG</div>  <!-- 技术栈标签 -->
    <h1 class="demo-title">项目名</h1>
    <p class="sub-line">核心定位一句话</p>
    <div class="tagline">关键词 · 关键词 · 关键词</div>
  </div>
  <div class="topbar-meta">
    <div class="meta-row-high">
      <div class="meta-pill-lg">3,198<span class="sub">Stars</span></div>
      <div class="meta-pill-lg">Source<span class="sub">Available
    
    
      48主题
      43模块
      Go1.26.1+
    
  

meta-row-high 通常放：Stars + 协议 / Forks + 语言
meta-row-low 通常放：关键能力指标 / 版本 / 来源实验室

核心组件 CSS

DEMO GIF

.demo-gif{border:2px solid var(--line);box-shadow:var(--shadow);margin-bottom:14px;background:#fff}
.demo-gif img{width:100%;height:auto}

素材路径：~/infocard-pub/assets/img/<slug>/<name>.gif

功能网格（2×2）

<div class="grid-2">
  <div class="card">
    <div class="lead">小标签</div>
    <h4>功能标题</h4>
    <p>功能描述文字</p>
  </div>
  <!-- 重复 4 个 card -->
</div>

CLI 网格（4 列命令卡）

<div class="cli-grid">
  <div class="cli-card">
    <span class="cmd">capabilities --json</span>
    <span class="desc">命令用途描述</span>
  </div>
  <!-- 重复 -->
</div>

.cli-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cli-card .cmd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;font-weight:800;color:var(--ink);display:block;margin-bottom:4px}
.cli-card .desc{font-size:11px;color:#555;line-height:1.4}

工作流图

<div class="flow">
  <div class="flow-item red">Step1</div>
  <div class="flow-arrow">→</div>
  <div class="flow-item">Step2</div>
  <div class="flow-arrow">→</div>
  <div class="flow-item">Step3</div>
</div>

安装命令块

<div style="background:#0a0a0a;color:#d4d0c8;border:2px solid var(--line);padding:12px 14px;overflow-x:auto">
  <pre style="margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.72">npm install -g @geekjourneyx/md2wechat
md2wechat config init</pre>
</div>

移动端响应

@media(max-width:720px){
  .cli-grid{grid-template-columns:repeat(2,minmax(0,1fr))}  /* 4列→2列 */
  .topbar{grid-template-columns:1fr}
  .topbar-meta{border-left:none;border-top:3px solid var(--line)}
}

元数据提取优先级

当项目有 manifest.json 或结构化元数据文件时，优先使用：

{
  "name": "md2wechat-skill",
  "version": "1.0.0",
  "source": "https://github.com/...",
  "description": "...",
  "core_features": ["...", "..."],
  "agent_commands": ["...", "..."],
  "common_commands": ["...", "..."],
  "api_modes": { "free_ai": {...}, "pro_api": {...} },
  "supported_agents": ["Claude Code"  ...

相比手工从 README 提取，结构化元数据字段更全更快。

meta.yaml 格式规范

---
title: "项目名"
description: "简短描述"
date: "YYYY-MM-DD HH:MM:SS"
updated: "YYYY-MM-DD HH:MM:SS"
category: "效率工具"
style: "redswiss"
tags:
  - "CLI"
  - "Agent"
source:
  url: "https://github.com/..."
  stars: 3198
  license: "Source Available"
  language: "Go"
---

❌ 常见错误：YAMLError expected a single document

根因：文件末尾有尾随的 ---。

quick_install:
  - "npm install ..."
  - "md2wechat config init"
---   ← 这行必须删除，YAML 只允许一个文档

输出文件命名

~/infocard-pub/docs/YYYYMMDD-<slug>.html
~/infocard-pub/docs/YYYYMMDD-<slug>.html.meta.yaml
~/infocard-pub/assets/img/<slug>/          # 素材目录

与 redswiss-style 的关系

本 skill 是 infocard-redswiss-style 的工具/CLI 子模式。redswiss-style 是 class-level umbrella，定义了完整 CSS 变量、组件库和坑点。本 skill 补充工具卡特有的组件组合逻辑。

redswiss-style 关键坑点（本 skill 使用时需注意）：

• 发布前用 390px viewport 验证 DOM computed font-size，最小字号 ≥ 11.2px
• 不得在 card/panel 背景使用蓝色（--blue 只用于 badge pill）
• meta.yaml 必须有 updated 字段，否则 CI verify 会失败
• meta.yaml 格式必须用 wall-clock 时间（YYYY-MM-DD HH:MM:SS），不接受 ISO 8601

参考

• ~/infocard-pub/theme/redswiss.html — redswiss 模板完整源码
• ~/infocard-pub/docs/20260711-md2wechat-skill.html — 本模式的具体实现参考
• references/redswiss-rebuild-verification-20260616.md — 发布级 DOM 审查规范（390px、min font ≥11.2px、--blue token check）
• references/awesome-design-md-redswiss-pattern.md — VoltAgent 卡片版式创新
• references/md2wechat-skill-case.md — 本次 md2wechat-skill 卡的完整字段参考