Back to Details

ss-pattern

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Pattern Generator

UI模式生成器

When NOT to use

何时不使用

For a single primitive component → use
```
/ss-component
```
For a full mobile screen → use
```
/ss-page
```
For an entire multi-page user flow → use
```
/ss-flow
```
For design tokens and color/spacing decisions → use
```
/ss-tokens
```

Pattern type: $0 Description: $ARGUMENTS

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

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

Available Pattern Types

可用模式类型

Layout Patterns

布局模式

focal-summary: one dominant state, briefing, artifact, or decision
panel-section: aligned workbench panel with related controls and evidence
flat-step: public-service task step with explicit labels, help, and recovery
reading-section: bounded prose, figure, caption, quote, or source group without app cards
resource-collection: rows, table, grid, or sequence selected by the recipe and user job
canvas-tools: focused artifact/canvas with quiet supporting tool groups

focal-summary：单一主导状态、简报、工件或决策展示
panel-section：对齐的工作台面板，包含相关控件和证据
flat-step：公共服务任务步骤，带有明确标签、帮助和恢复选项
reading-section：有边界的散文、图表、标题、引用或来源组，不含应用卡片
resource-collection：由规范和用户任务决定的行、表格、网格或序列展示
canvas-tools：聚焦的工件/画布，搭配简洁的辅助工具组

Data Display Patterns

数据展示模式

data-table: Table with header and rows
detail-card: Key-value pair display
chart-card: Card wrapper for a Recharts chart
ranking-list: Numbered ranking with highlight

data-table：带表头和行的表格
detail-card：键值对展示卡片
chart-card：用于Recharts图表的卡片容器
ranking-list：带高亮的编号排名列表

Interactive Patterns

交互模式

action-sheet: Bottom sheet with action buttons
filter-bar: Horizontal filter/tab bar
search-header: Search input in header area

action-sheet：底部操作按钮面板
filter-bar：横向筛选/标签栏
search-header：头部区域的搜索输入框

Instructions

操作说明

Read
```
.styleseed/effective-rules.md
```
and
```
.styleseed/manifest.json
```
. Resolve first when stale. Then inspect:
- ```
components/ui/
```
  for available primitives
- ```
components/patterns/
```
  for existing patterns
Compose the pattern from existing components — DO NOT recreate primitives.
Follow the selected recipe rather than one default card language:
- Use
```
ss-pattern-surface
```
  only when containment is earned.
- Use
```
ss-page-gutter
```
  or
```
ss-page-padding
```
  instead of hardcoded universal gutters.
- Use
```
ss-pattern-inset
```
  ,
```
ss-pattern-control
```
  , and
```
ss-pattern-icon
```
  for recipe-aware shape.
- Public-service and editorial recipes usually prefer flat flow, rules, and whitespace.
- Enterprise/developer recipes prefer aligned panels, rows, tables, and compact controls.
- Calm-consumer may use soft groups; expressive-brand must add a product-specific composition.
Use semantic tokens for all visual properties.
Make the pattern a reusable component with props for dynamic content.
Run
```
/ss-score
```
and verify that the pattern has a functional relationship to its page instead of being an isolated pretty card.

阅读
```
.styleseed/effective-rules.md
```
和
```
.styleseed/manifest.json
```
。若内容过时，先更新。然后检查：
- ```
components/ui/
```
  目录下的可用基础组件
- ```
components/patterns/
```
  目录下的现有模式
利用现有组件组合生成模式——请勿重新创建基础组件。
遵循所选规范而非默认卡片语言：
- 仅在需要容器时使用
```
ss-pattern-surface
```
  。
- 使用
```
ss-page-gutter
```
  或
```
ss-page-padding
```
  替代硬编码的通用边距。
- 使用
```
ss-pattern-inset
```
  、
```
ss-pattern-control
```
  和
```
ss-pattern-icon
```
  实现符合规范的样式。
- 公共服务和编辑类规范通常偏好扁平化流程、规则和留白。
- 企业/开发者类规范偏好对齐的面板、行、表格和紧凑控件。
- 平静消费者类规范可使用柔和分组；品牌表达类规范必须添加产品特定的组合设计。
所有视觉属性均使用语义化令牌。
将模式制作成可复用组件，通过props支持动态内容。
运行
```
/ss-score
```
并验证该模式与其所在页面存在功能关联，而非孤立的美观卡片。