【免费下载链接】Skills
Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents
本指南围绕 Skills 仓库中的technical-wireframe-info-layout技能展开，它面向 AI 编码代理（Codex、Claude、Cursor 等）定义了一套近黑单色、爆炸式线框物体 + 连接标注 + 稀疏信息标签 + 精确诊断框架的完整设计系统方向。阅读本文后，你将掌握该技能的适用场景、视觉目标、实现指引、布局模式与调校参数，并能借助仓库内System Ontology // Diagnostic View的完整参考实现，亲手驱动代理产出同级的暗色技术诊断界面。
技能定位：什么时候使用这套设计方向
技能的核心定义位于 SKILL.md，其 frontmatter 中给出的描述是：
Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.
也就是说，这是一套全站式的设计系统方向，而非单一组件样式。Use When一节明确了两层适用前提：
- 应用层级：作为完整设计系统方向贯穿布局、排版、信息标签、控件组件、背景结构和中央可视化区域，即从第一屏首图到每一个支撑区块都遵循同一设计语言；
- 适用场景：界面需要呈现出「暗色技术诊断视图」「产品拆解（product teardown）」「系统仪表盘」或「线框规格说明书」的气质时使用，例如监控面板、架构可视化、数据管线演示、管理后台与分析类体验。
Scope一节同时给出了一个重要边界：这不是泛泛的科幻装饰。线框物体、标注、标签与支撑 UI 必须像一个连贯的信息布局整体——中央可视化是页面的信息核心，而不是与内容无关的背景艺术。这一点贯穿后续所有实现建议，也是区分「有效技术线框布局」与「贴图式线框背景」的关键判据。
视觉目标：近黑单色基底上的结构图
Visual target将整个页面的视觉基调拆成四个可执行要求：
- 基底：在近黑色（near-black）单色地基上构建页面，配合细微纹理、低对比图案与非常克制的色调推移（tonal shift）。
- 主视觉锚点：以爆炸式（exploded）或分层（layered）线框物体作为主要视觉锚点，定位得像一张「结构图」而不是装饰性的英雄网格。
- 信息配套：围绕主物体排布浮动信息标签、虚线/路由连接线与稀疏的度量标注，让页面读起来像一张带注释的系统视图。
- 配色纪律：调色板几乎完全中性——黑、炭灰（charcoal）、锌灰（zinc）、白、灰；强调效果来自亮度、线宽与空间位置而非强烈色彩。
在仓库参考实现 demo/index.html 中，这条纪律被落实为具体取值：页面底色#0b0b0b、主容器bg-black、文本统一text-zinc-300/400/500、线框线宽 0.5～1px、节点描边从#27272a到#e4e4e7按层级递增亮度。整套页面没有任何一个饱和色相，全部层级感都靠灰度阶梯与线宽对比实现。
实现指引：从空白画布到线框信息布局
Implementation guidance给出了五条可落地的构建路径，这也是代理执行时的核心操作清单：
1. 宽阔稀疏的布局。优先采用横向宽阔、在线框物体周围保留大量开放空间的布局，让标注与结构保持可读性。参考实现的网格为 12 列：中央主图区占 8～9 列，右侧诊断面板占 3～4 列，四周以px-6 lg:px-10留出呼吸空间。
2. 真实 linework 而非截图。中央物体优先使用真正的 WebGL、Three.js、SVG 或 canvas 线框绘制，而不是扁平截图或实体填充的 3D 渲染。参考实现选择 SVG：主图是一张viewBox="0 0 1000 800"的手绘线框场景，全部由polygon、line、circle、ellipse、path等矢量图元构成，可无损缩放且天然支持后续描边动画。
3. 从轮廓几何构建爆炸结构。物体由轮廓几何、边线、环面/圆柱/盖层（torus/cylinder/cap）或模块化零件拼成，各部分可略微分离，暗示「一个系统被拆解成可读组件」。参考实现把系统拆成三个纵向堆叠的菱形等距（iso）网格层，自下而上依次是：
- L1 Source Nodes（数据源层）：
SRC_01/SRC_02/SRC_03三个存储节点； - L2 Logic Layer（逻辑层）：
INDEX_CORE核心节点与NODE_A～NODE_D关系节点，节点间用虚线边相连形成图结构； - L3 Output Topology（输出层）：
PROCESS_ENGINE处理引擎。
层与层之间用带stroke-dasharray的虚线垂直连接器串起，形成「数据源 → 逻辑图 → 输出拓扑」的完整系统流。
4. 浮动信息胶囊与路由连线。在物体有意义的区域附近放置浮动信息胶囊（info pill）或小圆角标签，再用细路由线（routed lines）或虚线路径连接。参考实现中三条典型标注：
Runtime Output / OBJ_COMPILED—— 从PROCESS_ENGINE出发，经三段折线（M 520 270 L 660 270 L 710 200 L 780 200）连到右上角胶囊；Graph Resolution / EDGE_MAPPING—— 从左下节点经路由线连到左侧胶囊；Physical Storage / PARTITION_LOCK—— 从底部存储节点连到右下角胶囊。
每条路由线都遵循「起点圆点 + 直角贝塞尔折线 + 终点小方块」的固定视觉语法，起点与终点用 2px 圆点/4px 方块精确定位，确保注释与结构一一对应。
5. 诊断式支撑 UI。支撑组件保持「诊断、极简」：细度量组件、中性进度条、图例圆点、时间线条或内存分配读数。参考实现右侧面板包含三组诊断组件：
- Memory Allocation：
NODES ACTIVE 12.4M、GRAPH LAYERS LVL 08两项指标，各配一根低对比进度条； - Diagnostic Stream：按时间戳（
T-00:12～T-00:16）排列的任务日志——BIND_SOURCE_DATA、ALIGN_ENTITIES、COMPILE_EDGES（当前激活项高亮）、WRITE_INDEX、SYSTEM_IDLE； - 底部状态栏：
VIEW_MODE: WIREFRAME、SYS_UP: 99.9%、LATENCY: 12MS与INITIALIZE LOGIC操作按钮。
6. 克制的动效。动效保持微妙与分析性：缓慢旋转、轻微漂移、分阶段标签出现、温和的连接线更新。参考实现的动效编排细节见下文「动效编排」小节。
推荐布局模式
Recommended patterns给出五种可直接套用的构图模板：
- 右置/中置大线框：大号线框物体偏向右侧或居中，标题与说明性文案退到安静的角落——参考实现中标题
SYSTEM ONTOLOGY位于左上，主图居中偏左，解释文案沉入右侧面板； - 边缘锚定的诊断标签：左侧或边缘排布带微小状态点、元数据字符串与平滑连接路径的诊断标签，呼应中央物体；
- 单色组件卡片：底部或侧边放置系统分配、图例行或时间线切片卡片，使用低对比条——即上文 Memory Allocation 与 Diagnostic Stream 两组组件；
- 半调/抖动/淡弱技术图案叠加：用半调（halftone）、抖动（dither）或淡弱技术纹理丰富暗色表面而不压过线框线条——参考实现用一张灰度抖动底图（demo/assets/page-01-…-1600w.jpg）叠加
grayscale(100%) contrast(2)滤镜，再叠一层 45° 重复线性渐变与径向暗角，三层纹理共同构成背景； - 稀疏遮罩标题揭示与安静排版：标题使用遮罩揭示动画，排版保持安静、克制，服务于分析性氛围。
调校旋钮：五个可调参数
Tuning knobs把设计系统收敛成五个可调维度，可作为代理生成时的「旋钮」配置：
| 参数 | 作用 | 调整方向 |
|---|---|---|
| Object complexity（物体复杂度） | 线框层数与爆炸部件数量 | 模型需要更「技术化」时增加线框层与爆炸部件，反之减少 |
| Annotation density（标注密度） | 结构解释程度 | 保持足够标签讲清结构，但避免过多标签堆满构图 |
| Contrast（对比度） | 标签与关键边缘的可读性 | 推高标签与关键边缘亮度使其可读，同时保留暗色背景的低调 |
| Motion tempo（动效节奏） | 旋转与揭示的时间控制 | 保持从容，让界面显得精确而非花哨 |
| Diagram clarity（图解清晰度） | 连接路径与空间分离 | 用连接器路径与空间分离让结构一眼可懂 |
必须避免的误区
Avoid一节列出五条红线，生成时若命中任一，技能风格即告失效：
- 用填充的、有光泽的 3D 渲染取代线框诊断外观；
- 用明亮强调色打破单色工程美学；
- 用密集仪表盘卡片或营销区块与带标注的物体争夺注意力；
- 标签、连线、组件过量叠加，直到图解变得嘈杂；
- 把线框中心件当作与页面无关的背景艺术，而不是核心信息结构。
仓库参考实现源码拆解：System Ontology // Diagnostic View
仓库在 demo/ 目录下提供了技能的一等参考实现System Ontology // Diagnostic View（完整页面为 demo/index.html 中内嵌的沙箱演示页，另有 demo/assets/source-preview.jpg 参考快照）。下面按实现层次拆解它是如何把 SKILL.md 的每条指引落成代码的。
页面骨架：全屏四分网格
页面采用「顶部导航 + 中央主图区 + 右侧面板 + 底部工具栏」的四分网格（grid grid-cols-1 md:grid-cols-12），整体限制在max-w-[1600px]的全屏容器内：
- Header：左上角为版本小字
SEMANTIC.NET_V3.1与主标题SYSTEM ONTOLOGY；中部是三个层级切换项TOPOLOGY / LOGIC LAYER / DATA STREAM，激活项以白点标记；右上角是NODE STRESS节点压力指示器，用四段白色/灰色短条表达负载梯度； - Main：
col-span-8 lg:col-span-9的中央主图区，承载 SVG 线框场景； - Aside：
col-span-4 lg:col-span-3的右侧诊断面板，内部为可滚动容器（overflow-y-auto no-scrollbar），承载解释文案与诊断组件； - Footer：视图模式切换、系统运行指标与
INITIALIZE LOGIC操作按钮。
网格层之间以border-zinc-800/50的细分割线与四角 L 形小括号（M4 20V4h16等路径）勾勒出「精密仪器取景框」的框架感，顶部与右侧还各有一条横向/纵向的定位线，强化规格图纸语境。
背景系统：三层叠加的近黑基底
背景由三个absolute inset-0 z-0图层叠加而成：
- 抖动纹理层：
opacity-[0.03]+mix-blend-screen，灰度抖动底图； - 图案层：
opacity-20的 45° 重复线性渐变（#27272a1px 线与 8px 透明间隙）； - 暗角层：径向渐变（
transparent 0%→#000000 100%）收敛画面边缘。
这正是 SKILL.md 中「subtle texture, low-contrast patterning」与「halftone/dither overlay」两条指引的直接实现。
中央 SVG：三层爆炸线框拓扑
主图区是一张独立的矢量场景（示意结构如下）：
<svg viewBox="0 0 1000 800" preserveAspectRatio="xMidYMid meet"> <!-- 中心 Z 轴虚参考线 --> <line x1="500" y1="120" x2="500" y2="730" stroke="#27272a" stroke-dasharray="2 4" /> <!-- L1 数据源层 --> <g class="layer">赞【免费下载链接】Skills
Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents
相关推荐
geektime-books 快速上手指南：156 本极客时间电子书如何挑出 10 本读起来
geektime books 快速上手指南：156 本极客时间电子书如何挑出 10 本读起来 geektime books 是极客时间电子书合集仓库，156 本
Skills 项目实战：用世界空间扫描波前构建 Three.js 线框扫描揭示（Wireframe Scan Reveal）
Skills 项目实战：用世界空间扫描波前构建 Three.js 线框扫描揭示（Wireframe Scan Reveal） 导读 本文以 Skills 仓库中
KubeEdge 中的终端处理：moby/term 库的 API 全景与 keadm exec 的 TTY 实战
KubeEdge 中的终端处理：moby/term 库的 API 全景与 keadm exec 的 TTY 实战 本篇以 KubeEdge 仓库中内嵌（vend
