mcpField
U
ui-pattern

ui-pattern

github.com/sickn33设计与 UI48.7k93 次安装今天更新
代码仓库

关于 ui-pattern

用于基于现有 StyleSeed 设计系统组合可复用 UI 模式的技能，适合需要构建卡片、列表、表单和网格布局的开发者，不用于单个组件或完整页面。

主要功能

  1. 01组合卡片、列表、表单和网格模式
  2. 02提供布局、数据展示和交互模式
  3. 03使用现有设计系统基础组件
  4. 04规定布局与语义令牌规则
  5. 05通过 props 构建可复用组件

适用场景

  1. 01构建卡片区块或双列卡片网格
  2. 02创建带标签的表单或纵向列表
  3. 03展示表格数据或键值详情
  4. 04添加筛选栏或搜索标题区

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill ui-pattern

安装后在 Claude Code 中输入/ui-pattern确认已加载。

详细介绍

UI 模式生成器

适用场景

当你需要使用设计系统基础组件生成组合式 UI 模式（卡片布局、列表、表单区域、网格等）时，使用此技能。

不适用场景

  • 对于单个基础组件 → 使用 /ss-component
  • 对于完整的移动端屏幕 → 使用 /ss-page
  • 对于完整的多页面用户流程 → 使用 /ss-flow
  • 对于设计令牌以及颜色／间距决策 → 使用 /ss-tokens

模式类型：$0 描述：$ARGUMENTS

可用的模式类型

布局模式
  • card-section：包含标题和内容的页面区块卡片（mx-6）
  • grid-2col：双列卡片网格（grid grid-cols-2 gap-4 px-6）
  • scroll-horizontal：水平滚动卡片列表（flex gap-3 overflow-x-auto scrollbar-hide）
  • list-section：卡片内的纵向条目列表
  • form-section：包含已标注输入框的卡片表单
  • stat-grid：StatCard 组件网格
数据展示模式
  • data-table：包含表头和行的表格
  • detail-card：键值对展示
  • chart-card：Recharts 图表的卡片容器
  • ranking-list：带高亮效果的编号排名列表
交互模式
  • action-sheet：带操作按钮的底部面板
  • filter-bar：水平筛选／标签栏
  • search-header：标题区域中的搜索输入框

说明

  1. 阅读设计系统参考资料：

    • CLAUDE.md，了解约定
    • components/ui/，查看可用的基础组件
    • components/patterns/，查看现有模式

  2. 使用现有组件组合模式——不要重新创建基础组件。

  3. 遵循设计系统布局规则：

    • 卡片：bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
    • 区块容器：使用 mx-6 设置水平边距
    • 区块标题：text-foreground font-bold text-[18px] mb-4
    • 列表间距：space-y-3
    • 网格间距：gap-4

  4. 对所有视觉属性使用语义化令牌。

  5. 将模式制作成可复用组件，并通过 props 传入动态内容。

示例

用户请求：

使用设计系统基础组件生成组合式 UI 模式（卡片布局、列表、表单区域、网格等）。

限制

  • 仅当任务与其上游来源及本地项目上下文明确匹配时，才使用此技能。
  • 应用更改前，验证命令、生成的代码、依赖项、凭据和外部服务行为。
  • 不要将示例视为环境专属测试、安全审查或用户批准破坏性或高成本操作的替代品。

执行边界

本指南面向现有的 StyleSeed 项目。此单文件入口中不包含列出的项目路径、组件、令牌和 /ss-* 命令。编辑前，请找到实际项目根目录并验证这些前置条件；若缺少资源，请如实说明，而不要凭空编造。使用宿主支持的调用方式，并遵循现有项目约定。布局数值是设计系统的选择，并非普遍适用的可用性保证。请在实际界面中测试键盘访问、响应式溢出和减少动态效果设置。

评论

支持 Markdown