메뉴
手绘便签 / 白板草图风信息卡主题。适合把复杂工作流、并行调度、方法论与策略拆成像手绘草图一样直观的知识图。可允许使用第三方手绘风前端框架（如 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명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Use before infocard .docs authoring to select a registered theme from content-aware candidates. Owns the only content-to-theme association, capability filtering, bounded reproducible variation, and theme-decision.json.
Use when one URL or a complete user brief should become one published infocard through the .docs promotion workflow.
Light-batch publish 2–3 cards in parallel without worktree.
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 风格。