设计卡片总览

这一页是 swift-web 设计资源的实卡字典：20 张卡片逐张整宽展示，配「它是什么、设计时怎么用」的说明。卡片 HTML 与 Claude Design / Open Design 里的设计系统是同一流水线产物（全部从框架源码派生）——你在这里看到什么，在工具里选用 swift-web 设计系统后 AI 参照的就是什么，线上组件渲染出来也是什么。

怎么用这一页

  • 设计前翻一遍（形态字典）：知道框架现成提供哪些组件形态，设计时优先组合现成形态——落地映射一对一，不需要前端「翻译」。
  • 出稿时对 AI 点名卡片：卡片名就是共同语言。在 Claude Design / Open Design 里直接说「按 SwRail 的形态做一排电影封面」「弹窗用 SwModal 的结构」，AI 读的设计系统里就有这些卡，会精确对上。
  • 走查时对照：设计稿或线上页面与卡片形态对不上时，以卡片为准报给维护者核对（卡片是源码派生的，不会撒谎）。

两个标注约定：

  • 「参考实现（非框架内置）」：出现这行字的部分（如按钮的彩色 variant、表单输入框的视觉），表示框架有意不内置该样式、留给业务自定义——卡片展示的是按语义 token 的推荐画法。你可以照用，也可以重设计，只要仍落在 token 词汇表内。
  • 想改卡片本身（觉得某组件默认形态不合理）：卡片是派生物、不手工改，诉求提给框架维护者走规范与治理·纪律二。

Tokens（3 张）

Colors · 语义色 Token

全部语义色变量的名称与实际值（明暗两套）。设计稿里的任何颜色都应能指回这张卡上的某个名字——换品牌时改的就是这些值，所以「按名字用色」的稿子天然可交付。三级文字灰度（--foreground / --foreground-soft / --muted-foreground）的对比也在这里看。

Typography · 排版 Token

字体栈（中文优先的系统字体，无 webfont）、字阶层次、链接与焦点样式。正文行高约 1.5、标题 600 字重——排版的「为什么长这样」都在这张卡。

Shape & Layout · 圆角 / 阴影 / 布局

统一圆角 0.5rem、三档阴影（sm/md/lg）、导航高度 60px、内容最大宽 1920px。卡片、按钮、弹窗的圆角为什么一致——出处就是这里。

基础组件（9 张）

SwButton · 按钮

主/次/幽灵三形态 + loading / disabled 态。hover 统一「变暗一档」（全站家规，不另发明 hover 色）。彩色 variant 是参考实现——业务可重设计，落在 token 内即可。

SwSegmented · 平铺选项组

选项少且需要全部可见时的单选（如「最新 / 最热 / 好评」切换）。与下拉的 SwSelect 互补：选项多、省横向空间才用下拉。

SwSelect · 下拉选择

单选 / 多选 / 分组 / 可清空的下拉。设计筛选区时先判断：选项 ≤5 且重要 → SwSegmented 平铺；更多 → 这张卡。

SwModal · 弹窗

居中面板 + 遮罩，标题 / 正文 / 动作区三段结构。焦点管理、Esc 关闭等无障碍行为框架内置——设计只需关心面板内容排布。

SwToast · 轻提示

右上/底部堆叠的短时反馈，按语义色分状态（成功绿 / 错误红 / 警告金）。需要用户决策的内容别设计成 toast（用弹窗），它会自动消失。

SwPagination · 分页

页码翻页，当前页主色高亮。适用「替换式」列表（翻页换整屏内容）；「加载更多」式的流式列表看 SwGallery。

SwBreadcrumb · 面包屑

层级导航（首页 / 分类 / 详情）。中间节点是真实链接，利于 SEO——详情页设计带上它对搜索收录有实际收益。

SwFormField · 表单字段

label / 输入区 / 错误提示的字段结构，错误态红色系。输入框本身的视觉是参考实现——表单风格业务可自定义，字段结构建议保持。

SwTable · 数据表格

管理台数据表：表头弱化底 + 行分隔线的基线视觉，内置列排序箭头、行选 checkbox、斑马纹 / 紧凑密度 / 粘性表头。管理台列表页先翻这张卡；分页、筛选不在表格内——用 SwPagination / SwSegmented 在页面层组合。

内容组件（8 张）

SwImage · 图片

所有内容图（封面 / banner / 头像）的载体：按比例占位（图未到时布局不跳动）、加载失败有兜底态。设计封面卡时定好宽高比即可（影视竖版常用 2:3）。

SwRail · 横滚卡片排

一行放不下就横向滑的卡片排（首页推荐楼层主力）。卡片尺寸由设计定；桌面 hover 出箭头、移动端手指滑。与轮播的区别：Rail 是多张并排滑动，Carousel 是整屏一张切换。

SwCarousel · 轮播

整屏轮播 banner：自动播放、无缝循环、圆点/缩略图指示器。首页头部大图位就是它。

SwGallery · 网格画廊

等高网格 + 「加载更多」（片库 / 分类全列表页主力）。列数随屏宽自适应，设计时给一张卡的形态即可。

SwAd 广告位族

12 种广告位形态：横幅 / 矩形位 / 宫格 / 文字链 / 跑马灯 / 信息流原生卡 / 侧悬浮 / 开屏 / 弹窗 / 视频贴片 / 暂停广告 + 合规角标。做广告位先翻这张卡选形态——每种位的曝光统计口径不同，形态选对数据才对。

SwVideoPlayer · 播放器

视频播放器：控制条 / 弹幕 / 前贴片与暂停广告位插槽。播放页设计围绕它布局，播放器内部形态不需要重画。

SwUpload 上传族

图片 / 视频 / 通用文件三种上传的按钮与拖拽区形态，含上传中 / 进度态。UGC 投稿页会用到。

SwEditor · 富文本编辑器

Tiptap 底座的编辑器：工具栏 / @提及 / #话题 / emoji / 图视频插入。评论区、发帖页的输入区形态。

下载与导入

相关链接