技能介绍

要解决的具体问题

在构建中后台或业务系统时，开发者经常需要实现各种页面区块，例如卡片布局、列表、表单区块或网格。如果每次从零开始手写这些结构，不仅代码重复率极高，还非常容易导致间距、圆角、阴影等视觉属性偏离设计系统的规范。UI Pattern Generator 就是为了解决这一痛点而生，它专注于将底层的设计系统原语组装成高频的业务页面结构。

技能的工作方式

该技能的核心能力在于基于现有的设计系统资产进行组合，而不是重新发明轮子。其关键步骤如下：

读取设计参考：首先解析工作区中的 CLAUDE.md 获取规范约定，并查阅 components/ui/ 下可用的原语组件。
组装现有模式：从 components/patterns/ 目录中提取已有的模式进行组合，支持诸如 card-section、grid-2col、scroll-horizontal、data-table 等布局与交互模式。
遵循布局规则：严格执行一系列布局约定，例如卡片统一使用 bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]，区块容器使用 mx-6，列表和网格间距分别固定为 space-y-3 和 gap-4。
语义化与组件化：所有视觉属性均通过语义化 Token 注入，最终生成的区块会封装为带有 props 的可复用组件，以便动态填充内容。

适用边界与注意事项

该技能有明确的适用边界。当任务仅需要单个基础原语时，应使用 /ss-component；若需要构建的是完整的移动端屏幕，请使用 /ss-page；如果是跨多页面的用户交互流，则应由 /ss-flow 处理；而对于颜色或间距等底层设计 Token 的决策，需交给 /ss-tokens。

此外，在使用生成结果前，务必在本地环境中验证命令、生成的代码及依赖项。不要将生成的示例代码直接等同于通过环境特定的测试或安全审查。