framed-grid-layout

Name: framed-grid-layout
Author: mengto

github.com/mengto设计与 UI7.1k1.5k 次安装3 天前更新

代码仓库

关于 framed-grid-layout

framed-grid-layout 是用于构建规整、具有技术感且边界清晰的页面设计技能。它通过统一网格、细边框和角括号，让内容保持一致对齐。

主要功能

01统一父级网格对齐
02一致的分框区块与间距
03细边框与角括号
04低透明度斜向纹理
05响应式显式网格跨度

适用场景

01组织编辑式或技术类页面
02对齐区块边缘与控件
03构建分框内容布局
04统一桌面端与移动端间距

安装

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

$npx skills add https://github.com/mengto/skills --skill framed-grid-layout

安装后在 Claude Code 中输入/framed-grid-layout确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

demo/

index.html

PROMPT.md

source.json

详细介绍

网格式布局

适用场景

页面需要简洁的技术结构，并清晰呈现各个区块的边界。
内容需要给人精确、有序、编辑感或系统化的印象。
设计需要细线参考边框、L 形角括号和统一的框线。

布局规则

先定义父级网格；让每个区块都与相同的列和行对齐。
整个页面使用一种边框颜色、一种角括号颜色和一套间距尺度。
保持框线矩形且精确。避免悬浮卡片、柔和的团块和不均匀的边距。
使用细线：1px 边框、低对比度分隔线和微妙的角括号标记。
添加极低不透明度的对角背景纹理；它应当只营造出表面张力。
将区块内边距、标题、控件和媒体边缘对齐到相同的网格节奏。
使用统一的间隔分隔区块，而不是随意留白。

基础令牌

使用中性色，并根据主题调整对比度。

:root {
  --fg-bg: #f7f7f4;
  --fg-surface: rgba(255, 255, 255, 0.62);
  --fg-line: rgba(24, 24, 27, 0.14);
  --fg-line-strong: rgba(24, 24, 27, 0.34);
  --fg-texture: rgba(24, 24, 27, 0.035);
  --fg-gap: 16px;
  --fg-pad: clamp(16px, 2vw, 28px);
  --fg-corner: 18px;
}

父级网格

使用父级网格确保垂直和水平对齐。

.framed-grid {
  min-height: 100vh;
  padding: var(--fg-gap);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 11px,
      var(--fg-texture) 11px 12px
    ),
    var(--fg-bg);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fg-gap);
}

.framed-grid > * {
  min-width: 0;
}

框线区块

每个区块使用相同的盒模型、线条粗细和内边距。

.frame {
  position: relative;
  border: 1px solid var(--fg-line);
  background: var(--fg-surface);
  padding: var(--fg-pad);
  overflow: hidden;
}

.frame + .frame {
  margin-top: 0;
}

L 形角括号

使用背景图层，让角括号保持清晰，无需额外标记。

.frame-brackets {
  background:
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right top / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) left bottom / 1px var(--fg-corner) no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / var(--fg-corner) 1px no-repeat,
    linear-gradient(var(--fg-line-strong), var(--fg-line-strong)) right bottom / 1px var(--fg-corner) no-repeat,
    var(--fg-surface);
}

区块跨列

优先使用明确的网格跨列设置，而不是临时调整宽度。

.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

@media (max-width: 760px) {
  .framed-grid {
    grid-template-columns: 1fr;
  }

  .span-12,
  .span-8,
  .span-6,
  .span-4 {
    grid-column: 1 / -1;
  }
}

示例

<main class="framed-grid">
  <section class="frame frame-brackets span-12">...</section>
  <section class="frame frame-brackets span-8">...</section>
  <aside class="frame frame-brackets span-4">...</aside>
  <section class="frame frame-brackets span-6">...</section>
  <section class="frame frame-brackets span-6">...</section>
</main>

风格规则

即使区块内部内容各不相同，也要让框线与父级网格对齐。
只有在产品风格需要时，才使用直角或轻微圆角。
相邻框线不要混用不同的边框粗细。
不要添加厚重的阴影；可见的框线就是结构本身。
将对角纹理的不透明度保持在 0.05 以下。
在所有主要区块中，保持角括号尺寸一致。

快速检查

区块边缘在垂直和水平方向上对齐。
每个框线都使用相同的边框、内边距和角括号尺寸。
桌面端和移动端的框线间隔保持一致。
只有仔细观察时才能看到对角纹理。
移除纹理图层后，布局仍然清晰易读。

支持 Markdown

登录后评论