SuperAPI AI 工具集

ss-pattern

设计与创作

查看项目

更新于 10-15 15:18

技能介绍

用途

ss-pattern 是 StyleSeed 工作流中的 UI 模式生成器(UI Pattern Generator),用于根据当前生效的 StyleSeed 语法和品牌配方,使用已有的 primitives 生成一个组合式的 UI pattern。它解决的是一次性组装出符合品牌一致性、可复用、且与页面存在功能关系的模式组件,而不是零散组件或整页。

主要能力

  • 生成组合式 UI pattern,输入为模式类型($0)与描述($ARGUMENTS)。
  • 提供三类模式:
    • 布局模式:focal-summary、panel-section、flat-step、reading-section、resource-collection、canvas-tools。
    • 数据展示模式:data-table(带表头与行的表格)、detail-card(键值对展示)、chart-card(Recharts 图表的卡片包装)、ranking-list(带高亮的编号排名)。
    • 交互模式:action-sheet(带操作按钮的底部弹层)、filter-bar(水平过滤/标签栏)、search-header(头部区域搜索输入)。
  • Registry-first artifact 边界:若 .styleseed/project.json 与 .styleseed/artifacts/index.json 存在,先解析 artifact ID,再只读取 .styleseed/bundles/<artifact-id>.md 与 .styleseed/manifests/<artifact-id>.json;不得回退到全局 legacy bundle。
  • 仅在两个 registry 文件都不存在时,才解析 legacy 的 STYLESEED.md,并读取 .styleseed/effective-rules.md 与 .styleseed/manifest.json。
  • 检查 components/ui/ 下可用的 primitives 与 components/patterns/ 下已有的 patterns。
  • 依据配方选择表达方式,而非默认单一卡片语言:
    • 仅在包含关系成立时使用 ss-pattern-surface。
    • 使用 ss-page-gutter 或 ss-page-padding,而非硬编码的通用留白。
    • 使用 ss-pattern-inset、ss-pattern-control、ss-pattern-icon 实现配方感知的形状。
    • 公共服务与编辑类配方通常偏好扁平流、分隔线与留白。
    • 企业/开发者配方偏好对齐面板、行、表格与紧凑控件。
    • Calm-consumer 可使用柔和分组;expressive-brand 必须加入产品专属的构图。

使用方式

  • 前置:在本工作流之前,遵循每会话一次的 update preflight。
  • 调用形式中包含模式类型与描述:Pattern type: $0;Description: $ARGUMENTS。
  • 若任一 registry 文件存在,则要求完整的有效 registry:用 --artifact <id> 解析所选 artifact,并只读取 .styleseed/bundles/<id>.md 与 .styleseed/manifests/<id>.json。缺失或过期的输出需要做有范围的 resolve 与 re-check;无效配置不构成回退或重启 setup 的许可。
  • 随后检查 components/ui/ 与 components/patterns/。
  • 从现有组件组合 pattern,不要重建 primitives。
  • 所有视觉属性使用语义 token。
  • 将 pattern 做成带 props、可承载动态内容的可复用组件。
  • 运行 /ss-score,验证该 pattern 与其页面存在功能关系,而不是一个孤立的漂亮卡片。

适用场景

  • 需要从既有设计体系和品牌配方中快速产出可复用的组合 UI 模式。
  • 布局、数据展示、交互三类中已有明确模式类型可选的场景。
  • 项目已有 StyleSeed registry,并希望严格按 artifact 边界读取 bundles 与 manifests 的场景。
  • 项目为 legacy 模式,需要在无 registry 时依据 effective-rules 与 manifest 生成模式。

限制

  • 不适用于单个 primitive 组件(应使用 /ss-component)。
  • 不适用于完整移动端页面(应使用 /ss-page)。
  • 不适用于整个多页面用户流程(应使用 /ss-flow)。
  • 不适用于设计 token 与颜色/间距决策(应使用 /ss-tokens)。
  • 文档未说明支持的平台、收费方式、价格或具体效果指标,这些信息暂未提供。