关于 nested-container-frames
用于构建嵌套容器页面布局的设计技能，通过可见外框和内嵌框组织页面层次。适合需要区分主视觉、功能、证明和 CTA 区域，同时避免过多卡片嵌套的设计。
主要功能
- 01居中的页面外层容器
- 02可见边界线与角标
- 03带一致内边距的内嵌框
- 04各层容器采用不同样式
- 05用框架层次划分页面模块
适用场景
- 01组织主视觉和配套页面区块
- 02在不使用厚重卡片的情况下区分内容模块
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/nested-container-frames确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
demo/index.htmlPROMPT.mdsource.json详细介绍
嵌套容器框架技能
使用场景
- 布局需要采用容器嵌套系统，包含清晰可见的外边界、内缩的内层框架和分层的页面结构。
工作流
- 定义一个居中的外层容器，用于控制全局页面宽度。
- 添加可见的垂直边界线和小型角标，以构建框架。
- 使用一致的内边距，将内层容器放置在外边缘以内。
- 为每一层内层结构设置独立的背景、边框、圆角和间距节奏。
- 利用框架层级区分主视觉、功能、证明和行动号召模块，避免添加厚重的卡片。
注意事项
- 避免层层嵌套卡片，以免布局显得过于封闭。
- 不要让框架线条影响内容的可读性。
评论
支持 Markdown