写布局不用再调 CSS 了！这个 Skill 把 Grid/Flexbox/Container Queries 全打包好了

做过 UI 的都知道，调 CSS 布局是最费时间的环节之一——Grid 要算列宽，Flexbox 要记属性，侧边栏还要处理溢出。每次重写都像在解谜。

这个叫 designing-layouts 的 Skill，就是来解决这个痛苦的。

它本质上是一个「布局代码库」，把业界验证过的布局模式整理成可以直接 copy 的代码片段，喂给 AI 之后直接生成，省去反复调试的时间。

核心覆盖三种主流布局方案：

CSS Grid — 12 列栅格系统，支持 .col-span-6 这种语义化写法，想要几列跨几列直接调类名。还有 Auto-Fit 自适应网格，卡片列表页用这个最省事。

Flexbox 经典模式 — Holy Grail 布局（header + footer + 左导航 + 右侧栏 + 主内容区）已经封装好了，直接用不用再手写。

Container Queries — 这个是亮点！相比传统的媒体查询按视口宽度响应，Container Queries 可以让组件「看自己父容器的大小」来决定怎么渲染，组件复用性直接拉满。

适用场景很明确：管理后台仪表盘、内容卡片瀑布流、可拖拽的分栏界面、移动端优先的响应式页面……做这些的时候调这个 Skill 效率最高。

安装直接用 npm：

npx skills add https://github.com/ancoleman/ai-design-components --skill designing-layouts

GitHub 仓库目前 522 Stars，维护活跃，文档也齐全。开发者 @ancoleman 还附带了 18 个参考文件，包括 layout-patterns.md、css-techniques.md、responsive-strategies.md，想深挖的可以直接读源码。

如果你经常做中后台或者移动端页面，这个 Skill 值得收藏。

GitHub: https://github.com/ancoleman/ai-design-components