利用 StyleSeed 构建可复用的 UI 设计模式组件 #

解决 UI 开发中重复造轮子的问题：通过 AI 将 StyleSeed 的原子级原语组合成可复用的 UI 模式（Patterns），确保页面在卡片、列表、图表等常见模块上保持高度的一致性。

为什么需要这个技能 #

在实际的项目开发中，我们经常需要创建重复出现的布局，例如“产品卡片列表”或“数据统计网格”。如果每次都手动编写 HTML/CSS，不仅效率低下，而且极易导致不同页面间的间距、圆角或阴影出现微小差异，破坏产品的整体质感。

本技能引导 AI 基于 StyleSeed 的 Toss 基础原语（Primitives）进行组合，而非从零开始编写样式。它强制执行设计系统中的 Token 规则，确保生成的每一个 UI 模式（Pattern）都符合既定的视觉规范，实现从“临时方案”到“标准组件”的转变。

适用场景 #

• 需要构建在多个页面重复出现的布局模式（如：卡片流、两列网格、水平滚动区域）。
• 想要基于现有的 StyleSeed 原语快速搭建功能模块，而非手动复制标记语言。
• 需要创建支持动态内容传递（通过 Props）的可复用模式组件。
• 旨在快速实现一个具有“设计感”且符合系统规范的表单块或数据看板。

核心工作流 #

1. 确定模式类型：识别所需的 UI 类别，如 card section（卡片区）、stat grid（统计网格）或 filter bar（筛选栏）。
2. 检索原语块：AI 会扫描 components/ui/ 中的基础原语以及 components/patterns/ 中已有的相关模式，通过组合而非重复来构建新组件。
3. 应用布局规则：严格遵守 StyleSeed 的 Toss 种子默认值，包括使用语义化 Token 的表面颜色、系统比例的圆角、标准的阴影 Token 以及统一的内边距。
4. 动态化处理：通过定义 Props 接口替代硬编码内容，确保组件能够接收动态数据并保持 API 简洁。
5. 验证复用性：剔除页面特有的逻辑，确保生成的组件在不同路由下均能通用。

下载和安装 #

下载 ui-pattern 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐