区块

把任意内容呈现成一段录屏:窗口 mock 背后是壁纸与压暗层,摄像头气泡兼作播放按钮,计时器带闪烁录制红点,「点击听声音」药丸在播放后滑回气泡背后藏起来。全部尺寸用容器查询单位写成,同一张卡从网格缩略图到整宽 hero 都是等比的,不需要任何断点;另可开启锁定 16:9 的剧场视图。

中文产品登录弹窗:蓝色渐变头部带漂浮光斑,微信扫码列与手机号快捷登录并排(区号下拉、验证码 60 秒重发倒计时),未勾选协议提交时协议行抖动提示,并带 ICP 备案页脚。

侧栏会话列表:带操作槽的分组标题、30px 行(未读圆点、时间与悬停操作钮互换),以及用共享布局在行间平滑滑动的选中底块。

AI 产物的画布侧栏:发丝面板壳、带操作簇的头部、交叉淡切的预览/代码双视图切换,以及带恢复按钮的版本导航。

人机协同审批队列:带风险分级与过期时间的请求项、可展开详情、原地落定的批准/拒绝流转,以及带影响范围、增删统计与撤销的操作回执卡。

Agent 执行轨迹组件族:发丝竖轨上按类型着装的步骤节点、带脉冲环与节奏扫光的进行中步骤、原始输出展开、并行工具组,以及可嵌套展开的子 Agent 迷你轨迹。

流式结构化输出组件族:对不完整 JSON 容错的分色渲染——可承受未闭合字符串的增量 tokenizer、仅对新到片段做淡入、流式光标,以及函数调用外壳。

引用与来源组件族:行内引用角标(悬停弹出来源预览浮层)、来源卡片,以及答案尾部带级联进场的来源列表。

沉浸式语音模式光球:单一连续渐变球体,呼吸、色相漂移、回声环与思考高光随待机/聆听/思考/说话四态切换。

使用量统计组件族:用于关键指标的连体统计条、基于 color-mix 强度色阶与逐列级联淡入的 GitHub 风格贡献热力图,以及纯文本周期切换器。

偏好设置表单组件族:带发丝分隔行的带标题设置分组、文字自动反差的十六进制颜色输入胶囊、文本框、预设选择按钮,以及头部幽灵操作按钮。

AI agent 会话流组件族:用户消息 pill、回合头、Markdown 排版容器、思考与工具调用状态行、审批请求卡、流式输出光标、带展开动画的文件与变更产物卡、命令执行行,以及悬停显现的回合操作栏。

AI agent 聊天输入台组件族:上下文 chips、权限 chip、内置分段推理力度滑杆的模型选择器,以及可变形的发送/停止按钮,并带添加菜单与语音听写态。

响应式 Agent 应用外壳:桌面端为可拖宽三栏布局,平板端将侧区切换为覆盖层,移动端一次只展示一个任务表面;支持弹簧过渡与横跨全宽的 46px 顶部工具栏,并内置置顶摘要浮层卡片。

每周可用时间编辑器,每一天在「可用/不可用」之间弹簧切换,时间段的增删带模糊滑动动效,时间通过可滚动下拉菜单选取,并可通过复制菜单将时段套用到其他天。

钱包概览卡片,账户切换器与搜索均从触发器变形展开,余额以瀑布动效呈现并带实时涨跌胶囊与隐私开关,支持一键复制地址以及转账/充值/兑换/购买等操作。

按钮变形展开为菜单,以虹膜式效果从中心向外绽放,网格项沿径向错落展开。

角落触发按钮变形展开为反馈弹窗,支持消息输入,并带发送中、成功、重试等动效状态。

「一次一题」聚焦式多步表单:分段进度条配等宽计数,方向性滑动切换配合容器高度变形;支持文本题与选择卡题,校验失败抖动且错误行预留空间不跳版,Enter 直接推进,完成态画圈打勾。

带线稿动画插图的空状态区块:信封收件箱清零、悬停弹开抽屉的档案柜、来回扫描的搜索放大镜;统一「插图 + 短文案 + 主操作」结构。

紧凑的积分感知 AI 输入条:可关闭的积分横幅;流式进行中再提交会入队,可插队(Steer)、编辑或删除;输入 / 唤起技能面板并把命令凝固成可移除的技能 chip;附件演示、联网搜索开关、模型菜单与发送⇄停止变形按钮。

可自动增高的 Agent 输入台:动作菜单、模型选择、Enter 发送、多行输入,以及发送/停止的动效切换。

可折叠的 Agent 任务计划:待办/进行中/完成/取消状态、进度变形为对勾、完成计数、稳定流式行与紧凑元数据。

面向 Agent 的语法高亮代码面:稳定流式更新、可选行号与高亮行、有界平滑跟随、文件名/语言元数据与复制反馈。

人机协同决策面:批准/拒绝/修订,以及单选、多选、自由文本或多步问题;提交后折叠为已记录结果。

语法高亮的文件变更披露:渐进行、行号、实时增删计数、有界平滑跟随,完成后可折叠。

轻量执行披露:语法高亮的终端输出与请求响应、有界自动跟随、成功/错误/取消态,完成后折叠,支持复制与重试。

稳定的流式回答面:完成后复制/重试/反馈、可选可展开来源摘要,以及嵌套 live region 播报控制。

稳定的生成图画面:排队→生成→精修→完成/可恢复错误,逐步解析媒体且不 remount、不挤压周围会话。

人机协同权限卡:审阅工具详情与参数、允许一次/始终允许/拒绝,可选 Shiki 高亮代码值。

自适应 Agent 活动流:推理文本、搜索结果、工具调用、结构化执行轨迹,或按时间混排;进行中有界跟随,完成后折叠为可重开摘要。

跨链兑换组件,内置链与代币选择器、视图变形动效、翻转动画与实时报价。

iOS 风格的灵动岛胶囊组件,在多个实时活动视图间变形切换,外壳弹性缩放并带模糊交叉淡化。

⌘K 呼出的命令面板,支持模糊搜索过滤,当前行带弹簧动效高亮,毛玻璃质感表面。

紧凑的图标操作项,在悬停或聚焦时通过共享布局动效展开为带文字标签的控件。

连体胶囊式主操作栏,弹簧展开后可露出更多附加操作。

图标选项卡栏,当前选项卡展开为带文字标签的胶囊,上方面板随切换变形高度,内容按方向感知滑动。

移动端风格的列表行,左右滑动可露出上下文操作按钮。

支持拖拽上传的队列组件,带进度行、重试/移除操作,状态切换对「减少动效」偏好友好。

预测市场交易面板,支持买入/卖出模式、结果价格展示、滚动数字输入、快捷金额芯片以及多种交易状态。

一次性验证码输入框,聚焦环平滑滑动定位,数字逐格滚入,错误时抖动提示,成功时绘制对勾动画。

五种风格的动效 404 页面:故障扫描、磁吸数字、光标聚光灯、扇形卡片堆叠与打字终端。