メニュー
手绘便签 / 白板草图风信息卡主题。适合把复杂工作流、并行调度、方法论与策略拆成像手绘草图一样直观的知识图。可允许使用第三方手绘风前端框架（如 rough.js / hand-drawn SVG 工具链）来增强线条抖动与草稿感，但主题约束必须由本 skill 统一定义。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/ccwq/infocard-pub --skill infocard-handline-styleコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
| name | infocard-handline-style |
| description | 手绘便签 / 白板草图风信息卡主题。适合把复杂工作流、并行调度、方法论与策略拆成像手绘草图一样直观的知识图。可允许使用第三方手绘风前端框架（如 rough.js / hand-drawn SVG 工具链）来增强线条抖动与草稿感，但主题约束必须由本 skill 统一定义。 |
| version | 1.0.0 |
| author | Hermes Agent |
| license | MIT |
| metadata | {"hermes":{"tags":["infocard","style","hand-drawn","sketch","workflow","theme","svg"],"related_skills":["any2card","infocard-style-man-skill","infocard-pub-publisher"]}} |
infocard-handline-style 是一套“手绘草图 / 白板便签 / 纸上讲解”风格的信息卡主题。
它不是极简科技风，也不是严肃技术手册风，而是用“手写笔触 + 草图框线 + 便签 + 流程箭头 + 中心隐喻图”把复杂概念讲得像在白板前边画边解释。
这套主题最适合：
这套主题优先吸收三类图像母题：
:root {
--bg: #f5efe6;
--paper: #fbf6ee;
--ink: #2d2926;
--muted: #6b6258;
--line: #2f2a27;
--accent: #e67e22;
--accent-dark: #d35400;
--note: #fff3df;
--note-line: #b57a43;
}
--bg: 整体纸张底色--paper: 卡片/便签浅底--ink: 主文字与主轮廓--muted: 辅助说明--line: 框线、箭头、分隔线--accent: 箭头、标题强调、重点标注--accent-dark: 更强的橙色高亮--note: sticky note 背景--note-line: 便签边缘与贴纸辅助线--ink 的柔化深墨版本（接近 #3a342e ~ #4a433b），避免纯黑大段文字压得太硬；只有标题、关键短标签、极短结论才用最深墨色。--line；次级分组线、虚线、批注连接线应降到更浅、更暖的墨褐色，不要整页所有线都同一黑度。#2c2723（深墨褐），禁止使用 #d0c8be、#c0b8a8 等浅色作为 topbar 底边、footer 边框、section 分隔线等任何结构性线条；浅色边框在米纸底上无法形成视觉锚点，必须替换为深墨褐。#171513 或 #181614#2d2926 或 #2c2723#5a5248 ~ #6b6258#1e5cb5（非浅蓝）#c99d78 ~ #b07b51#111111（纯黑背景）#2c2723（不淡、不灰）#d0c8be 这类浅色；在纸张底上必须足够深才能成为视觉锚点。默认骨架：
hero/title
subtitle/underline
central metaphor block
supporting workflow diagram
side note / sticky note
sections or callout blocks
footer/source note
save button
系列主线、观点类文章、适合分享的阅读顺序resize 再判断 overflow；见 references/rough-box-mobile-regeneration.md允许使用第三方手绘风前端框架。对 infocard-handline-style 来说，wired-elements 和 rough 系列不是"点缀"，而是这类主题的核心视觉语言。
wired-elementshandline 风格中的 tag / chip 标签（如 .tag-chip）必须遵守以下规则：
rough-box 类，只靠 JS SVG 抖动路径生成手绘外边框border: 1.5px solid #... 这类 CSS border 属性会与 rough-box SVG 边框叠加，形成内外双层边框（内 solid + 外 sketchy），视觉上错误且冗余.tag-chip { background: ...; color: ...; ... } — 只保留背景色、文字颜色、圆角，不加 border.tag-chip.blue、.tag-chip.orange 等）：继承 .tag-chip 基类，不单独声明 borderrough-box 的容器（尤其 footer、label、summary band、quote band）都不要再叠加 border / outline / box-shadow 充当第二层框；要么用 rough-box，要么用 CSS border，不能两者并存这是 handline 风格实现时最重要的设计原则：装饰性元素（边框、线条、容器）手绘抖动，文字保持干净印刷体。
错误做法 ❌：
feTurbulence + feDisplacementMap 滤镜：作用于整块内容，包括文字笔画，文字会被抖歪模糊正确做法 ✅：
±roughness*2 随机偏移）验证方法：截图后放大看文字边缘——若有锯齿/模糊感，说明文字被滤镜波及，需切回纯 JS SVG 方案。
在受限网络环境（如某些服务器环境）中，unpkg.com、cdn.jsdelivr.net 等 CDN 会被阻塞，导致 wired-elements 和 rough.js 无法加载。
因此，必须优先使用纯 JS SVG 抖动路径方案，它不依赖任何外部 CDN，100% 可靠：
// 纯 JS SVG 手绘边框生成器（已验证 PASS，2026-06-12）
function jitter(v, amt) { return v + (Math.random() - 0.5) * amt; }
function applyHandDrawnBorder(el, r) {
r = r || 3;
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%'); svg.setAttribute('height', '100%');
svg.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;overflow:visible';
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var w = el.offsetWidth, h = el.offsetHeight;
var r2 = r * 2;
var d = 'M ' + jitter(0, r2) + ' ' + jitter(0, r2);
d += ' L ' + jitter(w, r2) + ' ' + jitter(0, r2);
d += ' L ' + jitter(w, r2) + + (h, r2);
d += + (, r2) + + (h, r2);
d += ;
path.(, d);
path.(, );
path.(, );
path.(, );
path.(, );
path.(, );
svg.(path);
el.. = ;
el.(svg, el.);
}
.().(applyHandDrawnBorder);
SVG 抖动算法核心：每条边分 4 段，每段端点加 ±roughness*2 的随机偏移，strokeLinecap round，产生手绘抖动感。
wired-elements shadow DOM 问题：即使 CDN 正常加载，wired-card 的 shadow DOM 在复杂页面嵌套结构中 shadow innerHTML 可能为空（SVG 未正确挂载），且 shadow DOM 内的 SVG 会被子元素背景覆盖。纯 JS SVG 生成器对 DOM 结构无依赖，更可靠。
方案优先级：
⚠️ 关键坑：CSS SVG filter 会抖动整块内容，包括文字
filter: url(#rough) 作用于 .rough-box 时，feTurbulence + feDisplacementMap 会把文字笔画也抖歪，造成阅读障碍<path> 边框线条，filter 方案必须废弃验证方法：截图后检查边框线条是否明显不规则/有抖动；若边框是完美直线则方案失效。
当 handline 主题用于 workflow 图 / 产品流程图 / 白板说明图 / infographic 时，必须采用下面的层级：
wired-elements 的卡片 / 标签语言
原则：handline 的风格辨识度，必须同时来自 rough 的骨架笔触和 wired 的边框卡片 / label 语言。
theme/*.html 只是示例实现，不能反过来绑架 style skill；skill 才是主规范，preview 只是样张color-scheme: lightwired-elements 在 handline 里是主视觉骨架之一，不是只给按钮用的轻量点缀wired-card，并配合 label / badge 形成“手绘卡片群”card-in-card-in-card 的组件展板感wired-card / wired-button 的存在是为了获得抖动边框、手绘轮廓和手工感，不是为了把文字颜色交给组件默认值references/handline-text-clean-borders-sketchy.md：核心渲染规则——Text-Clean / Borders-Sketchy 原则、纯 JS SVG 抖动路径算法（含代码）、tag/chip 双层边框 Bug 修复、验证方法、已验证参数、commit 记录，以及三次回归笔记（CSS filter 抖歪文字、tag 双层边框、浅色边框消失）。references/handline-double-border-and-utc8-publish-time.md：本次回炉笔记——rough-box 不能叠 CSS border、footer 也算二次边框风险、发布时间必须用 UTC+8 壁钟时间references/handline-tech-blog-sharing-pattern.md：技术博客 Recent Articles / archive 页面如何转成 handline 阅读地图（系列主线、主题雷达、分享格式、条目字段）references/handline-wired-full-surface-rebuild.md：full-wired 边框语言重建记录（含 wired shadow DOM CSS 覆盖问题）references/handline-visual-review-rounds.md：会话级视觉校调记录（多轮预览→评判→修订循环）references/handline-wired-editorial-rebuild.md：wired-elements + editorial skeleton 重建主题预览页的方法references/handline-screenshot-verify.md：发布后截图验收的标准流程（CDP 截图 + VLM 视觉验证 + 边框颜色检查命令）infocard-handline-stylehandlinetheme/handline.html 是 handline 风格的 live 真相源，不是临时 demotheme/handline.html，不能只在 skill 文档里"有规则"但 live 页不应用/tmp/handline-skill-r*.html 这类文件只是验证样本，不是风格部署目标theme/handline.html本次会话中：skill 通过三轮预览→评判→修订循环不断变强，但所有修订都写进了 /tmp/ 的临时文件，theme/handline.html 持续保持"文字极浅、字号极小"的失败状态，直到用户截图报告"严重不可读"才被强制修复。
正确流程：
skill 修订 → 同步改动到 theme/handline.html → commit → push → 截图验收公网页
以下数值经 VLM 视觉审查确认为 390px mobile PASS。不要把正文改得更浅、更小：
| 元素 | 字号底线 | 颜色底线 | 说明 |
|---|---|---|---|
| 顶部元信息 | ≥12px | ≥#2a4f9e | 深蓝不可用浅蓝 |
| 标签 chip | ≥11.5px | ≥#4a4238 | 底色浅时字必须够深 |
| 对比框正文（深色底） | ≥12px | ≥#c8bfb3 | 深底上灰字最低值 |
| 对比框标题（深色底） | ≥12.5px | ≥#f2ede5 | 白字够亮 |
| 流程步骤正文 | ≥11.8px | ≥#d4cdc2 | 暖灰不可更浅 |
| 流程步骤标题 | ≥13.8px | — | 保持对比 |
| 英文副标签 | ≥11px | ≥#3d5f9e | 深蓝不可浅蓝 |
| 原则正文 | ≥11.8px | ≥#3e3830 | 深灰不可接近背景 |
| subcard 正文 | ≥11.8px | ≥#4a4238 | — |
| tiny-rail | ≥11.5px | — | — |
| 移动端 720px 正文 | ≥12.5px | — | MQ 里必须整体抬高 |
| 移动端 420px 正文 | ≥12px | — | 不能再缩 |
对比框深层规则：深色底（#171617 类背景）上的浅色字必须与背景保持足够对比；建议正文灰度不低于 #c0bab0，不要用接近米白的极浅色。
.tag-chip）只使用 rough-box SVG 外边框，禁止同时加 CSS border 属性；验证方法：截图放大 tag 区域无内外双层边框border-bottom、footer 边框 border、section 分隔 border-bottom）使用深墨褐 ≥ #2c2723；grep -rn "d0c8be\|c0b8a8\|c9c0b3" docs/YYYYMMDD-*.html 扫描后无结果才算 PASSreferences/handline-screenshot-verify.md症状：写了新的 handline HTML 但没有 handline 风格——看起来像"白底细黑线普通卡片"。
根因：handline 的视觉识别度来自两套机制：
.tag-chip、.stats-box、.quote-band 等组件类）jitter → mk → roughRect → drawRough → initRough）这两套机制都在 ponuta 卡的 <style> 和 <script> 块里，不是从外部文件加载。/theme/handline.js 这个文件不存在，引用它会 404。
正确做法：
cp docs/20260613-ponytail.html docs/YYYYMMDD-newcard.html — 从 ponuta 复制完整骨架详细操作步骤见 references/handline-card-authoring-from-ponytail.md。
症状：topbar 底边、footer 边框、section 分隔线用了 #d0c8be / #c0b8a8 等浅色，在 #f5efe6 米纸底上对比度极低，视觉上"消失"了。用户截图反馈"边框看不见"。
根因：handline 的米纸底背景是 #f5efe6（暖米黄），#d0c8be（浅暖灰）与之太接近，无法形成视觉锚点。
批量修复（已发布后发现）：
for f in docs/YYYYMMDD-*.html; do
sed -i 's/#d0c8be/#2c2723/g; s/#c0b8a8/#2c2723/g; s/#c9c0b3/#2c2723/g' "$f"
done
验证：
grep -rn "d0c8be\|c0b8a8\|c9c0b3" docs/YYYYMMDD-*.html # 空 → PASS
相关 commit：f0c7408 — Fix handline border colors: #d0c8be/#c0b8a8 → #2c2723
如果要真正落地为可发布信息卡，建议在 HTML 中使用：
wired-elements，优先把它当作大区块骨架增强器，不要把所有内层小组件都 wired 化，否则页面容易像组件展板而不是 editorial cheat sheetreferences/handline-visual-review-rounds.mdcommit 8ddbd17（2026-06-12）：theme/handline.html
feTurbulence SVG filter（原导致文字被抖歪）jitter + roughRect + drawRough）rough-box 类元素：边框线条手绘抖动，文字层完全不参与抖动commit ead6d9a（2026-06-12）：docs/20260612-repo-to-agent-context.html、docs/20260612-murphys-law.html、docs/20260612-matthew-effect.html
.tag-chip 基类的 border: 1.5px solid #2c2723（与其他 rough-box 元素叠加形成内外双层边框）commit 255c627（2026-06-12）：docs/sn-cc-gui.html
references/handline-card-authoring-from-ponytail.md：新建 handline 卡时必须从 ponuta 复制完整骨架（HTML + CSS + JS 脚本），不是从零写 HTML；ponuta 卡是唯一可信的已验证实现，/theme/handline.js 不存在。references/handline-wired-editorial-rebuild.md：当用户嫌 handline 主题"只是换肤、不够像真正手绘 editorial 卡"时，如何用 wired-elements + editorial skeleton 重建主题预览页。references/handline-html-first-authoring.md：复杂 handline 信息卡何时应直接写成完整 HTML，以及 meta 里必须补齐 slug/path/category 的发布约束。docs/20260613-ponytail.html 复制完整 HTML 骨架，然后替换正文内容；不要从零写 HTML，不要引用不存在的 /theme/handline.js。.meta.yaml，并明确写出 slug、path、category，否则 npm run build 会在索引阶段直接失败。.html 文件后，没有完整复制 ponuta 的 CSS + JS 脚本，就直接"看起来像普通 HTML 卡片"；这类卡片的根本问题是缺少 JS 脚本生成的手绘边框，不是 CSS 色值问题。npm run build 会修改 _index.yaml 和 index.html。如果只 commit 新卡文件而漏掉这两项，CI 的 "Verify Generated Index Artifacts" 会失败，Pages 部署也会因为 _index.yaml 不含新卡 slug 而无法访问。正确顺序：npm run build → git add 新卡文件 + _index.yaml + index.html → 同一 commit → push。这套主题强调“像人在纸上边画边讲”，不是“像软件产品页面”。
如果页面看起来过于精致、过于几何、过于理工 UI 化，说明已经偏离 handline 风格。