Back to Details

nested-container-clean-agency

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Nested Container Clean Agency Skill

嵌套容器式简洁代理机构Skill

Use When

使用场景

  • Create a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.
  • 创建一个基于嵌套容器构建的简洁代理机构设计系统，包含外部编辑外壳、嵌入式深色功能区块、圆角高端卡片以及克制的强调色。

Workflow

工作流程

Scope

适用范围

  • Apply this as a full design-system direction across page shell, section framing, cards, pricing blocks, call-to-action areas, and layout rhythm.
  • Use it when the interface should feel clean, premium, and agency-led, with strong container hierarchy instead of flat page sections.
  • This is not generic card-grid SaaS and not only a framing utility. The whole composition should be organized through nested shells and inset feature blocks.
  • 将其作为完整的设计系统方向应用于页面外壳、区块框架、卡片、定价模块、号召性区域以及布局节奏中。
  • 当界面需要呈现简洁、高端且由代理机构主导的风格，同时具备清晰的容器层级而非扁平化页面区块时，可使用该设计系统。
  • 这并非通用的卡片网格SaaS设计，也不只是一种框架工具。整体布局需通过嵌套外壳和嵌入式功能区块来组织。

Visual target

视觉目标

  • Start with a centered outer page container that defines the main boundaries of the design with visible vertical rails, corner squares, or light frame lines.
  • Inside that outer shell, place one or more inset containers with contrasting surfaces, especially dark rounded feature zones nested within a light editorial page.
  • Build hierarchy by stacking containers inside containers: outer shell, inner dark section, then smaller rounded cards or content panels inside that section.
  • Keep typography clean, modern, and agency-like, with confident headlines, restrained body copy, and minimal UI noise.
  • Use a soft accent color sparingly for pills, buttons, active dots, subtle gradients, and call-to-action emphasis rather than saturating the full layout.
  • 从居中的外部页面容器开始，通过可见的垂直导轨、边角方块或浅色框线定义设计的主要边界。
  • 在该外部外壳内，放置一个或多个具有对比色表面的嵌入式容器，尤其是在浅色编辑页面中嵌套深色圆角功能区域。
  • 通过容器嵌套堆叠来构建层级：外部外壳、内部深色区块，再在该区块内放置更小的圆角卡片或内容面板。
  • 保持排版简洁、现代且具有代理机构风格，标题醒目、正文克制，UI干扰元素降至最低。
  • 谨慎使用柔和的强调色，仅用于标签胶囊、按钮、激活点、微妙渐变以及号召性元素的突出显示，避免让整个布局充斥强调色。

Implementation guidance

实施指南

  • Prefer a max-width outer wrapper with consistent side padding, vertical boundary lines, and tiny corner markers to establish the global frame.
  • Use nested rounded containers to create depth: a darker major block inside the page, then lighter or darker cards inset within it depending on contrast needs.
  • Maintain generous whitespace between nested layers so each shell feels intentional and breathable.
  • Use border gradients, low-contrast strokes, and soft shadows to separate layers instead of heavy outlines everywhere.
  • Pricing sections, service groupings, or feature comparisons should feel like modular editorial blocks housed inside a larger premium container.
  • Motion should stay minimal and polished: masked text reveals, calm fade-ins, and light hover transitions are enough.
  • 优先选择带有统一侧边内边距、垂直边界线和微小边角标记的最大宽度外部包装器，以此建立全局框架。
  • 使用嵌套圆角容器营造层次感：页面内设置一个深色主区块，再根据对比需求在其中嵌入浅色或深色卡片。
  • 在嵌套层级之间保留充足的留白，让每个外壳都显得设计感十足且透气。
  • 使用边框渐变、低对比度描边和柔和阴影来区分层级，而非处处使用厚重的轮廓线。
  • 定价区块、服务分组或功能对比区域应呈现为模块化的编辑区块，容纳在更大的高端容器内。
  • 动效应保持简约且精致：遮罩文字显示、平缓淡入以及轻微的悬停过渡即可。

Recommended patterns

推荐模式

  • White or off-white outer shell with border-x rails and tiny corner squares defining the page bounds.
  • Large dark rounded section acting as a featured pricing or capability block nested within the lighter page shell.
  • Premium inner cards with gradient-border wrappers, soft surface contrast, and clear content grouping.
  • Small uppercase labels, compact pills, and restrained accent buttons to preserve the clean agency tone.
  • Editorial spacing that lets each nested container breathe, with strong alignment and uncluttered copy blocks.
  • 白色或米白色外部外壳，搭配垂直边框导轨和微小边角方块定义页面边界。
  • 大型深色圆角区块，作为特色定价或功能模块嵌套在浅色页面外壳内。
  • 高端内部卡片，带有渐变边框包装器、柔和的表面对比以及清晰的内容分组。
  • 小型大写标签、紧凑的胶囊按钮以及克制的强调色按钮，以保持简洁的代理机构风格。
  • 采用编辑式间距，让每个嵌套容器都有呼吸空间，同时保持精准对齐和整洁的文本区块。

Tuning knobs

调整要点

  • Nesting depth: choose how many layers of shells to use before the system feels too busy.
  • Contrast balance: tune the jump between the outer shell and inset containers so the hierarchy feels strong but elegant.
  • Corner radius: keep rounded containers polished and premium, but avoid making them feel overly playful.
  • Accent strength: use the accent color as punctuation for key controls, tags, and highlights only.
  • Container density: give cards enough internal padding so the system reads premium instead of cramped.
  • 嵌套深度：选择使用多少层外壳，避免系统显得过于繁杂。
  • 对比度平衡：调整外部外壳与嵌入式容器之间的色彩过渡，让层级既清晰又优雅。
  • 圆角半径：保持圆角容器精致高端，但避免使其显得过于俏皮。
  • 强调色强度：仅将强调色用作关键控件、标签和高亮元素的点缀。
  • 容器密度：为卡片设置充足的内部内边距，让系统呈现高端感而非拥挤感。

Avoid

避坑提示

  • Flat sections with no clear outer-to-inner container hierarchy.
  • Generic agency layouts that use one level of cards and call it structured.
  • Overdecorated gradients, glows, or excessive accent color that break the clean tone.
  • Equal visual weight on every nested block, which weakens hierarchy.
  • Cramped containers with insufficient spacing between shell levels.
  • 避免使用无清晰内外容器层级的扁平化区块。
  • 避免使用仅包含单层卡片就自称结构化的通用代理机构布局。
  • 避免使用过度装饰的渐变、发光效果或过多强调色，以免破坏简洁风格。
  • 避免让每个嵌套区块的视觉权重相同，这会削弱层级感。
  • 避免使用外壳层级间间距不足的拥挤容器。