---

name: ui-pattern description: "使用 StyleSeed Toss 原语生成可复用的 UI 模式，如卡片区块、网格、列表、表单和图表容器。" category: design risk: safe source: community source_repo: bitjaru/styleseed source_type: community date_added: "2026-04-08" author: bitjaru tags: [ui, patterns, design-system, reuse, styleseed] tools: [claude, cursor, codex, gemini]

UI 模式

概述

作为 StyleSeed 的一部分，此技能从种子的原语构建可复用的组合模式。它适用于卡片列表、网格、表单区块、排名列表和图表容器等在多个页面中出现的区块，使其看起来经过精心设计而非临时拼凑。

何时使用

• 当你需要可复用的布局模式而非一次性页面区块时使用
• 当页面重复相同的卡片、行、筛选器或数据块排列时使用
• 当你想基于现有 StyleSeed 原语构建而非复制标记时使用
• 当你想要一个带有动态内容 props 的模式组件时使用

工作原理

步骤 1：识别模式类型

常见模式系列包括：

• 卡片区块
• 两列网格
• 水平滚动器
• 列表区块
• 表单区块
• 统计网格
• 数据表格
• 详情卡片
• 图表卡片
• 筛选栏
• 操作面板

步骤 2：查看可用构建块

检查以下两处：

• components/ui/ 查看原语
• components/patterns/ 查看可扩展的相邻模式

目标是组合，而非重复。

步骤 3：应用 StyleSeed 布局规则

保持 Toss 种子默认值不变：

• 卡片表面使用语义化 token
• 圆角来自系统比例
• 使用阴影 token 而非临时阴影值
• 一致的内部间距
• 区块容器与页面边距系统对齐

步骤 4：使模式动态化

通过 props 暴露数据而非硬编码内容。如果模式有多个变体，保持 API 明确且精简。

步骤 5：保持模式跨页面可复用

避免页面特定的假设，除非用户明确需要一次性区块。如果标记只在一个路由上有效，它可能属于页面组件而非共享模式。

输出

提供：

1. 生成的模式组件
2. 目标位置
3. 预期的 props 和使用示例
4. 关于复用了哪些现有原语的说明

最佳实践

• 从能解决问题的最小现有构建块开始
• 保持容器、区块和项目职责分离
• 一致使用 token 和间距规则
• 优先扩展模式而非添加近似重复的兄弟组件

附加资源

• StyleSeed 仓库
• 源技能

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来要求澄清。