【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载本指南基于 GitHub 加速计划 skills48/Skills 仓库中的 container-lines 技能文档系统讲解如何用页面左右两条细垂直参考线container-size guide lines与微型角标方块mini corner squares为内容容器建立可感知的测量式结构骨架。读完本文你将掌握一套可直接复制的 CSS 实现设计令牌、伪元素方案、角标方案、内容容器对齐理解其层级与响应式原理并能像仓库中随附的 Neuform 演示案例那样把它融入 Hero、章节页或产品页的视觉系统中。何时使用适合与不适合的场景技能文档开头用 Use When 明确划定了适用范围共有三类典型诉求页面需要微妙的垂直引导线用来揭示内容容器的实际宽度让内容居中、两侧留白这一结构关系被肉眼直接感知Hero、章节页或产品页布局过散、缺乏结构张力时需要靠这些细线重新锚定视觉重心设计上需要迷你角标方块、测量式边缘、克制的技术化框架measured edges / quiet technical framing等精密仪器感细节。反向的边界同样重要若页面追求完全无痕的沉浸式体验或风格偏软性装饰则不建议使用——文档在 审美规则Taste Rules 中强调参考线是结构structure而非装饰decoration应当安静地组织页面而不是喧宾夺主。六条核心规则参考线的行为约束技能文档用 6 条规则锁定了实现的行为边界它们是后续所有 CSS 的约束来源只在主内容容器的左右边缘画线线条必须细且低调1px宽、低透明度在容器转角或章节交界处section intersections添加迷你方块参考线系统跨章节保持一致不允许每个 section 各自改宽度参考线位于内容之后、页面背景之上behind content but above the page background禁用指针事件pointer-events: none保证引导线绝不拦截 UI 交互。其中第 5 条直接决定了后面的z-index: -1isolation: isolate写法第 6 条决定了所有参考线元素都要挂pointer-events: none这两点在下面的实现章节会逐一落实。第一步设计令牌Base Tokens所有尺寸与颜色先收敛为 CSS 自定义属性保证内容容器宽度与参考线位置共享同一套数值——这是后续对齐正确性的根基:root { --container-max: 1120px; --container-pad: clamp(20px, 4vw, 48px); --line-color: rgba(24, 24, 27, 0.14); --line-strong: rgba(24, 24, 27, 0.28); --corner-size: 6px; }参数语义与调整建议令牌默认值含义调参方向--container-max1120px内容容器最大宽度参考线的锚定目标增大可容纳更多内容列缩小则页面更紧凑--container-padclamp(20px, 4vw, 48px)容器左右内边距随视口在 20–48px 间平滑伸缩移动端保底 20px桌面端封顶 48px--line-colorrgba(24,24,27,0.14)参考线常规透明度约 14%亮色背景上调高 alpha暗色背景下降低--line-strongrgba(24,24,27,0.28)角标方块使用的强一档颜色与 line-color 保持同色系仅加深--corner-size6px角标小方块的边长审美规则建议控制在 4–8px 之间值得注意--container-pad用的是clamp()而非固定值它让内边距在窄屏上收敛到 20px、宽屏上封顶 48px参考线因此天然跟随视口自适应无需为每个断点重写定位值。第二步页面容器参考线Page Container Lines文档给出的实现没有引入额外 DOM 节点而是在布局外壳layout shell上挂两个伪元素.container-lines { position: relative; isolation: isolate; } .container-lines::before, .container-lines::after { content: ; position: absolute; top: 0; bottom: 0; z-index: -1; width: 1px; background: var(--line-color); pointer-events: none; } .container-lines::before { left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2)); } .container-lines::after { right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2)); }逐行拆解其中的关键机制top: 0; bottom: 0;让两条参考线从容器顶端贯通到底端视觉上钉住整页骨架width: 1px;background: var(--line-color)满足细且低调规则透明度约 14%left/right的max()公式是本方案的核心calc((100vw - var(--container-max)) / 2)算出容器居中时左右各留出的空白量max()与var(--container-pad)取较大值保证在窄屏视口小于容器宽时参考线至少让出 20px 内边距、不会贴到屏幕边缘z-index: -1isolation: isolate落实内容之后、背景之上isolation: isolate在容器上创建独立层叠上下文伪元素取z-index: -1时只会退到容器自身背景之后而不会穿透到页面最底层背景之下这与规则 5 完全对应pointer-events: none落实规则 6鼠标划过参考线时点击、悬停、文本选择全部透传不挡任何 UI。第三步迷你角标方块Corner Squares需要精密测量感的 section再叠加四枚小方块。样式部分.corner-squares { position: relative; } .corner-squares .corner { position: absolute; width: var(--corner-size); height: var(--corner-size); background: var(--line-strong); pointer-events: none; } .corner.top-left { top: 0; left: 0; transform: translate(-50%, -50%); } .corner.top-right { top: 0; right: 0; transform: translate(50%, -50%); } .corner.bottom-left { bottom: 0; left: 0; transform: translate(-50%, 50%); } .corner.bottom-right { right: 0; bottom: 0; transform: translate(50%, 50%); }结构部分文档原样提供的 HTMLmain classcontainer-lines section classcorner-squares span classcorner top-left/span span classcorner top-right/span span classcorner bottom-left/span span classcorner bottom-right/span ... /section /main实现要点角标用background: var(--line-strong)28% 透明度比参考线深一档形成线弱、点强的主次关系四个方向通过translate(-50%, -50%)等位移把方块精确钉在转角十字交叉点上视觉上方块中心正好压在容器的角上选择器限定为直接子元素 .corner避免嵌套层级里意外选中内层同名元素和参考线一样全部pointer-events: none绝不拦截交互。第四步最小章节容器Minimal Section Wrapper参考线必须与实际内容容器严格对齐因此文档要求内部容器沿用同一套宽度与内边距令牌.content-container { width: min(100% - (var(--container-pad) * 2), var(--container-max)); margin-inline: auto; }min()的含义是容器宽度取视口减两侧内边距与最大宽度两者中的较小者。当视口足够宽时容器停在--container-max1120px居中显示参考线正好落在其左右边缘当视口收窄时容器跟随--container-pad收缩参考线也按同一数值让位。因为宽度、内边距、参考线位置共享同一组令牌无论视口怎么变化线-边对齐都不会失配——这正是技能文档Keep container max-width and padding shared between content and guide lines这条审美规则在代码层面的落实。审美规则Taste Rules克制是底线文档用 5 条 Taste Rules 定义了好看的边界这决定了该技能与普通网格线装饰的本质区别参考线是结构而非装饰作用是安静地组织页面不要把线加到每一个嵌套组件上只保留在页面级或主要 section 级迷你方块要小而精确通常控制在4px到8px对应令牌默认 6px避免高饱和强调色除非整个视觉系统本身就是技术风/工业风容器最大宽度与内边距必须在内容与参考线之间共享同一组数值。快速自查清单Quick Checks文档在结尾给出 5 条验收标准实现完成后应逐项核对垂直参考线与内容容器边缘完全对齐角标方块落在真实的容器/章节转角上而非任意位置在亮色与暗色背景下参考线都保持低调可见移动端下参考线与内容之间仍有足够的留白即--container-pad保底生效引导线不拦截点击、悬停、文本选择pointer-events: none生效。仓库证据真实落地案例与参考实现该技能并非纸上谈兵仓库中同步了一套完整的 Neuform 参考演示演示入口demo/index.html 是沙箱化sandboxed的完整页面标题为 Kiwi Floral | Artisan Botanical Design将参考线方案应用到一个真实的花艺品牌站中参考源图demo/assets/source-preview.jpg 展示了未叠加标注的参考设计画面中可见贯穿页面的浅灰细垂直参考线同步记录demo/source.json 记录了该技能在 Neuform 平台以container-lines为关键词同步的参考页面元数据views 2154、favorites 47、remixes 27以及运行时依赖 Tailwind CSS、GSAP/ScrollTrigger、Iconify 的 SHA-256 清单复现提示词demo/PROMPT.md 提供了最小提示词 / 复现演示 / 换皮重混三种用法要求 Agent 以 $container-lines 为技能、以 index.html 为质量基准去复现或重混。从演示页源码内嵌于 demo/index.html 的 Base64 文档字符串可以观察到这套技能在 Tailwind 语境下的等价落地形态页面外壳使用relative max-w-[1400px] mx-auto border-x border-black/5建立两侧边界线Hero 区用absolute inset-0 flex justify-between px-6 md:px-12 pointer-events-none z-0 opacity-20的容器叠加多条w-[1px] h-full bg-white竖线首尾再用absolute top-0 -left-[3px] w-[5px] h-[5px] border border-black/15的 5px 角标方块收边。可见该技能在原生 CSS 变量方案与Tailwind 工具类方案之间可以无损互译核心约定1px 细线、低透明度、pointer-events-none、线-内容同宽在两种写法中完全一致。此外仓库中另一技能 blue-cloudy-clean-modern 的文档也把细垂直容器线 微小角标标记列为它的构图手段之一说明 container-lines 的克制框架语言在整个 web-design 技能家族中是通用的结构手法可作为风格联动时的参考。在 AI 编码 Agent 中使用作为 Skills 技能该文档设计为被 Codex、Claude、Cursor 等 AI 编码 Agent 直接消费当用户提出container lines / measured layout guides / vertical boundary lines / editorial grid markers / small corner-square frame details等诉求时Agent 即触发本技能并按文档顺序产出令牌、参考线、角标与内容容器四段代码。仓库 README.md 将container-lines与其他 web-design 技能并列列入技能索引DEMOS.md 则收录了本技能的演示链接便于快速验证效果。使用时保持文档中的默认令牌不改名直接引用--container-max、--container-pad、--line-color等变量即可保证对齐逻辑自洽。小结container-lines 的核心价值在于用两条 1px 细线和 6px 角标方块以极小的视觉代价换取明确的容器边界感知它让居中布局的宽度结构被读者下意识捕捉同时通过z-index: -1、pointer-events: none、共享令牌、clamp/max/min响应式公式四条机制确保这套框架在任何视口、任何交互场景下都保持精确、安静且零干扰。参考仓库中的 Kiwi Floral 演示demo/index.html即可看到它在真实商业页面上的完整落地效果。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐Container Lines 技能实战用垂直容器边界线与角落小方块构建结构化网页布局Container Lines 技能实战用垂直容器边界线与角落小方块构建结构化网页布局 导读 container lines 是 agent skills 仓Apple container CLI 命令全参考基于 agentic-awesome-skills 技能库的每容器独立 VM 容器编排实战Apple container CLI 命令全参考基于 agentic awesome skills 技能库的每容器独立 VM 容器编排实战 导读 本文是 aAI 技能AI 插件Cloudflare Secrets Store API 参考Binding 与 REST 双接口实战skills 技能库精选Cloudflare Secrets Store API 参考Binding 与 REST 双接口实战skills 技能库精选 本篇技术指南以 skill人工智能AI 技能AI 插件上一篇PotPlayer 免费字幕实时翻译百度翻译插件 10 分钟配好指南下一篇ClaudeComputerCommander 知识库技能实战构建 Agent 可读的 Markdown 第二大脑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考