【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载导读container-lines是 agent-skills 仓库中面向 Codex、Claude、Cursor 等 AI 编码代理Agent的 Web 设计技能核心是在内容容器左右边缘绘制细垂直线、并在容器或区块交点放置迷你小方块用安静的测量感为页面注入结构与张力。本文以 container-lines 演示提示词文档 为主体结合 SKILL.md 实现规范 与仓库内的演示产物、同步脚本完整讲解该技能的提示词工作流Minimal → Recreate → Remix、CSS 实现规范、落地佐证与验收清单读完即可在自己的网页设计中复刻这一套测量式排版体系。Kiwi Floral Artisan Botanical Design 演示页预览一、技能定位什么时候该用 container-linesSKILL.md 开头以 YAML Front Matter 定义了技能的触发语义Add vertical container-size guide lines with mini corner squares for precise, structured web layouts并明确了搜索关键词——container lines、measured layout guides、vertical boundary lines、editorial grid markers、small corner-square frame details。它的 Use When 场景非常聚焦共三条页面需要一种微妙的垂直引导线用于揭示内容容器的实际宽度Hero、区块或产品页显得过于松散需要结构性张力设计语言里需要迷你角方块、测量边线或安静的工程化框线technical framing。从演示同步脚本 sync-neuform-skill-demos.mjs 的 targets 列表第 95 行可以看到container-lines与corner-diagonals、corner-lasers、css-border-gradient、nested-container-frames等同属框线/容器结构一族技能但它的职责边界清晰只做内容容器边缘的垂直线与角点标记不负责对角斜线、发光描边等其他装饰体系。二、演示提示词体系从 Minimal prompt 到 Remix 的三级工作流PROMPT.md 是整个技能使用方式的操作手册它给出了三条层层递进的提示词分别对应不同的使用强度。2.1 Minimal prompt最小提示词最简用法只需一句话Use $container-lines to create a responsive standalone HTML design with the same visual confidence, hierarchy, and interaction finish as the included Neuform reference.关键点有二一是以$container-lines显式调用技能二是明确要求产物是独立响应式 HTML并以仓库附带的 Neuform 参考作为质量基准visual confidence、hierarchy、interaction finish 三个维度。适合快速起步、让 Agent 自行发挥的场景。2.2 Recreate the demo复刻演示这是文档最重的部分要求把Kiwi Floral | Artisan Botanical Design的设计质量与行为完整复刻为一份响应式 HTML 文档并且明确把 demo/index.html 当作视觉与交互参考而不是松散的 mood board。完整结构拆解如下。Product brief产品简报为 Agent 提供页面上下文锚点Page conceptKiwi Floral | Artisan Botanical DesignPurpose该页定位为登录区块Login Section用于认证场景下的专注访问流具备可复用结构、响应式行为与可上线演示production-ready presentationContent anchors内容锚点Artisan Floristry for Meaningful Moments · Engineered Botanical Elegance · Sustainable Sourcing · Technical Parameters · Curated ArrangementsUseful subject tags主题标签login, animated, webgl, threejs, input, validation, effect, security。这些 tags 提示了页面应带有的技术气质动效、WebGL 类背景、输入验证等Agent 可据此判断交互与视觉的科技感程度。Skill direction技能方向本次复刻的关键指令只有一条Add vertical container-size lines with mini corner squares.即本演示的核心实现点——垂直容器尺寸线 迷你角方块其余设计均围绕它展开。Fidelity target保真目标五条硬性验收标准必须逐条满足匹配参考页的构图、信息密度、字阶、间距节奏、表面处理、色彩关系与动效克制程度保留参考页最强的交互与动画背景行为不得用通用淡入淡出或装饰性位移替代首屏保持艺术化编排art-directed并把同一套设计逻辑贯穿所有支撑区块结果必须从移动端到桌面端响应式、键盘可达且在开启 reduced motion减弱动态效果时保持稳定交付完整的 index.html页面自有图片/视频/模型/纹理放入 demo/assets/依赖的第三方运行时库在源项目依赖它们时可以以固定版本pinnedCDN 依赖的形式保留。Reference snapshot参考快照用于给 Agent 定位以谁为准SourceNeuform 公开页面即 Kiwi Floral 页面本体Neuform rank同步时 container-lines 技能排名#1Popularity2,154 views · 47 favorites · 27 remixesRanking ruleviews 降序随后 favorites 降序。这些数字同样记录在 demo/source.json 的ranking与design字段中position: 1、view_count: 2154、favorite_count: 47、remix_count: 27以及技能级usage_count: 4820属于仓库可查证的同步快照数据提示词中的数字与之一致。2.3 Remix prompt换皮重混第三种用法把参考降级为质量基准而非复刻对象Use $container-lines and the included Neuform demo as the quality bar, but replace the brand, subject, copy, palette, and content. Preserve the underlying layout logic, signature visual treatment, interaction choreography, responsive behavior, and performance constraints so the remix still clearly demonstrates the skill.即品牌、主题、文案、调色板、内容全部替换但底层布局逻辑、标志性视觉处理、交互编排、响应式行为与性能约束必须保留——保证重混后的页面依然是该技能的合格演示品。这为从复刻走向创作提供了明确边界换皮不换骨。三、实现规范容器线 角方块 包装器的 CSS 体系PROMPT.md 只负责指挥而 SKILL.md 提供了 Agent 落地时遵循的具体实现规范。整套规则共六条在主内容容器左右边缘绘制线条线条保持纤细1px 低透明度在容器角或区块交叉点添加迷你方块线条体系跨区块保持一致不得按区块改变宽度线条置于内容之下、页面背景之上禁用指针事件保证引导线永不阻挡 UI。3.1 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; }四个变量分别控制容器最大宽度、响应式内边距clamp()在 20px 与 48px 之间随视口平滑缩放、基础线色低透明度墨色、强调线色用于角方块、角方块尺寸。SKILL.md 的Taste Rules明确角方块通常取4px到8px示例中的6px居中。3.2 Page Container Lines用伪元素画线零 DOM 污染.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)); }实现要点两条线通过::before/::after伪元素挂在布局外壳layout shell上无需额外 DOM定位用max(内边距, 视口居中偏移)计算——当视口宽度大于容器最大宽度时线条落在 (100vw - 1120px)/2 的居中位置否则退回最小内边距从而始终与内容容器边缘精确对齐z-index: -1配合isolation: isolate把线压在内容之下、背景之上pointer-events: none落实规则第 6 条。3.3 Corner Squares四角小方块的定位模板.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 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四个transform: translate(±50%, ±50%)让方块精确骑在容器四角的交点上而非随便贴在内部——这正是 Quick Checks 里角方块必须落在真实容器/区块角点要求的实现来源。3.4 Minimal Section Wrapper内容宽度与线位共用同一变量.content-container { width: min(100% - (var(--container-pad) * 2), var(--container-max)); margin-inline: auto; }容器宽度用min()在视口减去两侧内边距与--container-max之间取小值再margin-inline: auto居中——宽度公式与 3.2 节的线位计算共用同一组变量保证线始终框住真实内容区。3.5 Taste Rules线条是结构不是装饰SKILL.md 特别强调的审美纪律线条用于组织页面应当安静而不是喧宾夺主不要给每个嵌套组件都加线保持在页面级或主要区块级角方块要小而精确4px–8px除非整体视觉系统就是工业/技术风否则避免亮色强调容器最大宽度与内边距必须在内容与引导线之间共享。四、落地印证演示产物中的真实实现仓库里 demo/index.html 是经过安全沙箱包装的演示页外层页面用Content-Security-Policy: default-src none; script-src unsafe-inline收紧来源把实际设计 HTML 以 base64 形式注入一个sandboxallow-scripts的 iframe并通过postMessage将 demo/assets 下的本地图片以 Blob URL 形式替换进页面、pagehide时回收对应 sync-neuform-skill-demos.mjs 中sandboxContentPolicy与sandboxAssetReceiver的实现第 30-81 行。这种srcdoc 沙箱 资产内联的模式是该仓库所有演示的统一形态安全 profile 记录在 source.json 的security_profile: sandboxed-srcdoc-v1。从嵌入的实际设计 HTML 可以看出该技能在真实页面中的落地方式垂直网格线页面用 Tailwind 原子类绘制了多条w-[1px] h-full的白色细线以flex justify-between px-6 md:px-12的容器承载整体套opacity-20 pointer-events-none z-0——与 SKILL.md 1px 低透明度、禁指针事件、置于背景层的规则一一对应演示页中甚至在 quote 区块也复用了同款双细线装饰角落方块页面顶部与底部各有一对w-[5px] h-[5px] border border-black/15 bg-brand-bg z-50的绝对定位方块贴在容器左右上角/下角top-0 -left-[3px]、bottom-0 -right-[3px]即测量式框线的标志性收尾字体体系source.json 的runtime_dependencies记录了 Google Fonts 的 Inter300/400/500无衬线正文 Playfair Display400/500 及斜体 400衬线标题对应页面中标题用font-serifPlayfair Display、正文用font-sansInter的对照品牌色板页面内 Tailwind config 定义了brand.bg: #F6F5F2米白背景、brand.text: #1C201C墨黑文字、brand.muted: #767873灰调次级文案、brand.dark: #1B241A深绿强调低饱和莫兰迪色系与容器线的低透明度墨色rgba(24,24,27,…)天然兼容动效正文标题使用了 GSAP ScrollTrigger 的逐词揭示动画单词包裹 mask span初始translateY(110%) rotate(4deg)滚动进入视口时translateY(0) rotate(0)duration 1.2、stagger 0.03、power4.out运行时库以固定版本打入 assets/runtimegsap-min.js、scrolltrigger-min.js、iconify-icon-min.js 等并保留在 source.json 的bundled清单中。五、提示词文档从哪来同步管线的生成机制PROMPT.md 并非手写而是由 sync-neuform-skill-demos.mjs 的buildPrompt()函数自动生成第 655-702 行它从 Neuform API 拉取该技能排名第一的页面数据标题、描述、heading 锚点、主题标签、浏览量/收藏量/重混数再拼装出与上文完全一致的结构# {label} Demo Prompts→## Minimal prompt→## Recreate the demo含 Product brief / Skill direction / Fidelity target / Reference snapshot→## Remix prompt。从源码可以确认三件事Content anchors取自页面 headingheadings.join( · )最多截取前 8 行这就是 Kiwi Floral 页面各章节标题被列为锚点的原因Skill direction直接引用 SKILL.md 的 descriptionsafeText(skill?.description)保证提示词与技能定义天然一致整条流水线拉取 → 打包资产 → 加固 HTML → 沙箱化 → 生成 PROMPT.md 与 source.json见第 704-804 行是一次性的、可审计的source.json中记录了original_sha256/bundled_sha256/hardened_sha256/sandboxed_sha256四重哈希任何一步产物都可校验回溯。六、验收清单如何判断一次生成是否达标SKILL.md 末尾给出了可直接对照的 Quick Checks也是复刻/重混完成后自查的标准垂直引导线与内容容器边缘精确对齐角方块位于真实的容器或区块角点而非任意位置线条在浅色与深色背景上都保持微妙低透明度不刺眼移动端下线条与内容之间仍有足够内边距引导线不拦截点击、悬停与文本选择pointer-events: none生效。配合 Fidelity target 的动效克制、reduced motion 稳定、键盘可达、响应式四项即可完整校验一次$container-lines生成任务是否合格。七、实战建议把三级提示词用进自己的工作流快速验证技能手感时用 Minimal prompt 让 Agent 直接产出一份参考级页面重点看构图与交互完成度做正式复刻或对齐练习时用 Recreate 提示词并把 Fidelity target 五条逐项作为验收清单尤其盯住保留最强交互、不换成通用淡入淡出这一条换品牌换内容做重混时用 Remix 提示词保留布局逻辑与交互编排只替换品牌、文案、色板与图片资产落地时遵循 SKILL.md 的规则线宽 1px、低透明度、角方块 4–8px、容器宽度与线位共享同一组 CSS 变量才能保证线条体系跨区块稳定不散架。三份仓库文件构成完整的参考闭环提示词负责做什么PROMPT.md规范负责怎么做SKILL.md演示产物与同步元数据负责做成什么样、是否达标demo/index.html 与 demo/source.json。对照三者使用该技能即可稳定产出具有测量式结构感的高质量响应式页面。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐AnimateAnyone深度解析如何将静态图像转化为动态人物动画AnimateAnyone深度解析如何将静态图像转化为动态人物动画 你是否曾想过让一张静态照片中的人物按照指定的动作序列动起来AnimateAnyone正GuiLite 控件布局实战指南用 WND_TREE 树结构构建 Slide Group、单页界面与 DialogGuiLite 控件布局实战指南用 WND_TREE 树结构构建 Slide Group、单页界面与 Dialog 本篇技术指南以 GuiLite 布局文档为UI组件嵌入式跨平台桌面应用PersonaLive实时人像动画生成技术深度解析与实战指南PersonaLive实时人像动画生成技术深度解析与实战指南 PersonaLive是一个基于CVPR 2026研究成果的开源项目专注于为直播场景提供实时、人工智能计算机视觉媒体生成数字人直播视频上一篇Meteor 代码规范实战用 ESLint 规则 no-session 告别全局 Session拥抱 ReactiveDict下一篇QQ数据库解密实战指南全平台密钥提取与聊天记录恢复完整方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考