mcpField
C
container-lines

container-lines

github.com/boraoztunc设计与 UI43499 次安装11 周前更新
代码仓库

关于 container-lines

一种用于添加细微垂直线和角标的设计技能，让它们与页面内容容器对齐。它帮助设计师以一致尺寸组织页面和区块，同时确保引导线低调且不干扰交互。

主要功能

  1. 01沿内容容器边缘绘制垂直线
  2. 02添加小型角标与交点方块
  3. 03统一宽度和内边距变量
  4. 04将引导线置于内容下方
  5. 05设置为不响应指针事件

适用场景

  1. 01明确页面内容边界
  2. 02为主视觉或区块添加测量式框线
  3. 03让各区块的引导线保持对齐

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/boraoztunc/skills --skill container-lines

安装后在 Claude Code 中输入/container-lines确认已加载。

详细介绍

容器线条

适用场景

  • 页面需要细微的垂直引导线，以显示内容容器的宽度。
  • 主视觉区、版块或产品页面显得过于松散，需要增强结构感。
  • 设计需要迷你角方块、标尺般的边缘或低调的技术感边框。

规则

  1. 在主内容容器的左右边缘绘制线条。
  2. 线条保持纤细：1px，并使用较低的不透明度。
  3. 在容器角落或版块交界处添加迷你方块。
  4. 所有版块的线条系统保持一致；不要为不同版块设置不同的宽度。
  5. 将线条置于内容下方、页面背景上方。
  6. 禁用指针事件，确保引导线不会阻挡 UI。

基础令牌

: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-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((100% - var(--container-max)) / 2));
}

.container-lines::after {
  right: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
}

角方块

为需要精确度和标尺感的版块添加四个小方块。

.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%); }

<main class="container-lines">
  <section class="corner-squares">
    <span class="corner top-left"></span>
    <span class="corner top-right"></span>
    <span class="corner bottom-left"></span>
    <span class="corner bottom-right"></span>
    ...
  </section>
</main>

最简版块包装器

线条位置与内容使用相同的容器宽度。

.content-container {
  width: min(100% - (var(--container-pad) * 2), var(--container-max));
  margin-inline: auto;
}

设计要点

  • 将线条作为结构，而非装饰。它们应低调地组织页面。
  • 不要给每个嵌套组件都添加线条；将它们用于页面级或主要版块级布局。
  • 迷你方块应小巧而精准，通常为 4px 至 8px。
  • 除非整个视觉系统都具有技术或工业风格，否则避免使用明亮的强调色。
  • 内容与引导线共用容器最大宽度和内边距。

快速检查

  • 垂直线条与内容容器边缘精确对齐。
  • 角方块位于实际的容器或版块角落，而非随意放置。
  • 线条在浅色和深色背景下都保持低调。
  • 移动端上，线条与内容之间仍有足够的内边距。
  • 引导线不会拦截点击、悬停或文本选择。

评论

支持 Markdown