# 设计资源目录 69 个来源与子库入口 · 32 类表达 · 6 张实站截图 覆盖现有设计技能中识别出的资源，含组件、动效、图标、插画、字体和影像。不是全网清单，也没有镜像每个库的全部组件。 更新于 2026-09-18。质感均待人工比较；HTTP 可达不代表功能、授权或质量已验收。 ## 按表达找案例 ### E01 渐显、模糊显现 Fade / Blur reveal。从透明或模糊逐渐变清晰；比较起步、清晰时机与文字可读性。 - [E01.01 C02a Svelte Magic UI · Blur Fade](https://sv-animations.vercel.app/magic/docs/components/blur-fade)；页面中发现的具体入口；整块内容同时显现，可包文字或图片。源码默认 6px 模糊、6px 位移、0.4s。；链接可达，效果待体验 - [E01.02 C02b Svelte Spell UI · Blur Reveal](https://sv-animations.vercel.app/spell/blur-reveal)；页面中发现的具体入口；将文本拆成字符，逐字错峰显现。源码默认 12px 模糊、10px 位移，可分别调字符速度与错峰。；链接可达，效果待体验 ### E02 遮罩揭幕、切片出现 Mask / Clip reveal。内容从一条边、切片或形状后被揭开。 - [E02.01 C02c Svelte Fancy Components · Vertical Cut Reveal](https://sv-animations.vercel.app/fancy/vertical-cut-reveal)；页面中发现的具体入口；逐字切开后纵向显现，强调文字节奏。；链接可达，效果待体验 - [E02.02 C02a Svelte Magic UI · Dia Text Reveal](https://sv-animations.vercel.app/magic/docs/components/dia-text-reveal)；页面中发现的具体入口；沿特定方向揭示文字；应比较遮罩方向与触发时机。；链接可达，效果待体验 ### E03 依次出现 Stagger。多个元素按顺序进入；看总等待时间和层级是否清楚。 - [E03.01 C02b Svelte Spell UI · Words Stagger](https://sv-animations.vercel.app/spell/words-stagger)；页面中发现的具体入口；现成的词级错峰效果；适合标题与短句。；链接可达，效果待体验 - [E03.02 M01 GSAP · Staggers](https://gsap.com/resources/getting-started/Staggers)；页面中发现的具体入口；通用错峰参数，可编排任意元素；适合重复列表和多段时间线。；链接可达，效果待体验 ### E04 滚动驱动叙事 Scroll-driven / Scrub。动画进度跟随滚动，可用来展开流程或讲解。 - [E04.01 M06 Scroll-driven Animations · Scroll-driven Animations](https://scroll-driven-animations.style/)；来源总入口，需继续选具体样例；原生滚动时间线示例，进度直接绑定滚动；采用前核对目标浏览器。；链接可达，效果待体验 - [E04.02 M01 GSAP · ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)；页面中发现的具体入口；提供触发、固定和时间线编排；适合复杂滚动叙事。；链接可达，效果待体验 - [E04.03 M02 Motion · Scroll-linked effects](https://motion.dev/examples/react-scroll-linked)；页面中发现的具体入口；在 Motion 组件中联动滚动值；适合已有 React 状态与动效体系。；链接可达，效果待体验 ### E05 前后景错速 Parallax。前景与背景不同速度形成深度。 - [E05.01 M02 Motion · Parallax](https://motion.dev/examples/react-parallax)；页面中发现的具体入口；将滚动值映射为层间位移；适合界面内少量视差。；链接可达，效果待体验 - [E05.02 M01 GSAP · Scroll](https://gsap.com/scroll/)；页面中发现的具体入口；用 ScrollTrigger 组织多层动作；适合跨段落的统一时间线。；链接可达，效果待体验 ### E06 固定画面、分段推进 Pin / Sticky sequence。滚动期间固定主画面，再逐步切换内容。 - [E06.01 M01 GSAP · ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)；页面中发现的具体入口；固定区段与滚动进度编排；适合较长的产品叙事。；链接可达，效果待体验 - [E06.02 M06 Scroll-driven Animations · Scroll-driven Animations](https://scroll-driven-animations.style/)；来源总入口，需继续选具体样例；展示浏览器原生滚动动画；固定布局仍需单独组织。；链接可达，效果待体验 ### E07 同一个元素跨状态移动 Shared element / Layout animation。缩略图展开、列表重排仍保持对象连续。 - [E07.01 M02 Motion · iOS App Store](https://motion.dev/examples/react-app-store)；页面中发现的具体入口；应用商店式卡片展开实例；偏向 React 状态驱动与共享元素。；链接可达，效果待体验 - [E07.02 M01 GSAP · Flip](https://gsap.com/docs/v3/Plugins/Flip/)；页面中发现的具体入口；先测量、再改变布局并衔接；适合任意 DOM 和时间线编排。；链接可达，效果待体验 ### E08 形状变成另一种形状 Morph。按钮、SVG 或轮廓连续变形；不等于简单交叉淡化。 - [E08.01 C01 Spectrum UI · Morph Button](https://ui.spectrumhq.in/docs/morph-button)；页面中发现的具体入口；按钮在等待、成功、失败间变形；是界面状态反馈。；链接可达，效果待体验 - [E08.02 M01 GSAP · MorphSVG](https://gsap.com/docs/v3/Plugins/MorphSVGPlugin)；页面中发现的具体入口；对 SVG 路径形状做插值；不是按钮业务状态组件。；链接可达，效果待体验 ### E09 线条像被画出来 SVG draw / Signature。路径逐步显露，可用于签名或关系连线。 - [E09.01 C02b Svelte Spell UI · Signature](https://sv-animations.vercel.app/spell/signature)；页面中发现的具体入口；签名字迹的现成表达；适合短路径和署名。；链接可达，效果待体验 - [E09.02 M01 GSAP · DrawSVG](https://gsap.com/docs/v3/Plugins/DrawSVGPlugin)；页面中发现的具体入口；控制 SVG 描边进度；适合自有图形及连续时间线。；链接可达，效果待体验 ### E10 轨道与连线流动 Orbit / Beam。对象绕行，或沿连接关系传递光点。 - [E10.01 C02a Svelte Magic UI · Orbiting Circles](https://sv-animations.vercel.app/magic/docs/components/orbiting-circles)；页面中发现的具体入口；元素沿轨道旋转；强调围绕一个中心的关系。；链接可达，效果待体验 - [E10.02 C02a Svelte Magic UI · Animated Beam](https://sv-animations.vercel.app/magic/docs/components/animated-beam)；页面中发现的具体入口；连接节点间的动态光束；强调传输方向与节点关系。；链接可达，效果待体验 ### E11 跟手拖拽、惯性与回弹 Drag / Momentum / Spring。关注松手后的速度、边界阻尼和反向拖动。 - [E11.01 M02 Motion · Drag](https://motion.dev/examples/react-drag)；页面中发现的具体入口；通用拖动与约束机制；需自行定义排序或放置结果。；链接可达，效果待体验 - [E11.02 C01 Spectrum UI · Swipe to Delete](https://ui.spectrumhq.in/docs/swipe-to-delete)；页面中发现的具体入口；向侧滑动后露出删除动作；已经绑定一种具体交互模式。；链接可达，效果待体验 ### E12 长按完成、按下确认 Hold to confirm / Press feedback。用时间或形变表达正在按住与完成。 - [E12.01 C01 Spectrum UI · Hold to Confirm](https://ui.spectrumhq.in/docs/hold-to-confirm)；页面中发现的具体入口；达到长按阈值才确认；适合防误触，本地样本不执行删除。；链接可达，效果待体验 - [E12.02 C02a Svelte Magic UI · Ripple Button](https://sv-animations.vercel.app/magic/docs/components/ripple-button)；页面中发现的具体入口；点击产生水波反馈；不具备长按确认门槛。；链接可达，效果待体验 ### E13 跟随指针与像素轨迹 Cursor / Pointer trail。指针带动图形或留下轨迹；触屏需独立方案。 - [E13.01 C02c Svelte Fancy Components · Pixel Trail](https://sv-animations.vercel.app/fancy/pixel-trail)；页面中发现的具体入口；指针轨迹以像素残影表达；适合实验性页面。；链接可达，效果待体验 - [E13.02 C02a Svelte Magic UI · Smooth Cursor](https://sv-animations.vercel.app/magic/docs/components/smooth-cursor)；页面中发现的具体入口；平滑跟随光标；适合克制的指向反馈。；链接可达，效果待体验 - [E13.03 M02 Motion · iOS pointer animation](https://motion.dev/examples/react-ios-pointer)；页面中发现的具体入口；模拟特定系统的指针反馈；需考虑触屏与系统光标可用性。；链接可达，效果待体验 ### E14 立体倾斜与书本翻开 3D tilt / Perspective。卡片随视角倾斜，或分层展开书本。 - [E14.01 C01 Spectrum UI · 3D Tilt Card](https://ui.spectrumhq.in/docs/tilt-card)；页面中发现的具体入口；React 卡片随指针倾斜，可开关光泽；本地有真实样本。；链接可达，效果待体验 - [E14.02 C02b Svelte Spell UI · Tilt Card](https://sv-animations.vercel.app/spell/tilt-card)；页面中发现的具体入口；Svelte 卡片倾斜；用原例比较透视与回弹，不按库名推断质感。；链接可达，效果待体验 - [E14.03 C02b Svelte Spell UI · Perspective Book](https://sv-animations.vercel.app/spell/perspective-book)；页面中发现的具体入口；书本的厚度与透视结构；不是普通平面卡片换个缓动。；链接可达，效果待体验 ### E15 连续滚动文字与 Logo Marquee / Carousel。横向连续运动；比较接缝、节奏与暂停行为。 - [E15.01 C02a Svelte Magic UI · Marquee](https://sv-animations.vercel.app/magic/docs/components/marquee)；页面中发现的具体入口；可配置方向的连续内容流；适合 logo 或短证言。；链接可达，效果待体验 - [E15.02 C02b Svelte Spell UI · Marquee](https://sv-animations.vercel.app/spell/marquee)；页面中发现的具体入口；Svelte 跑马灯实现；重点比较无缝连接与暂停行为。；链接可达，效果待体验 - [E15.03 C02b Svelte Spell UI · Logo Carousel](https://sv-animations.vercel.app/spell/logo-carousel)；页面中发现的具体入口；专用于 logo 的轮播呈现；内容结构比通用跑马灯更具体。；链接可达，效果待体验 ### E16 粒子场、变形点云 Particles / Point cloud。大量点形成背景或对象，可能需要 GPU。 - [E16.01 M02 Motion · Three.js TSL particle morph](https://motion.dev/examples/js-three-tsl)；页面中发现的具体入口；粒子目标形态间变换的技术示例；需要处理 GPU 渲染。；链接可达，效果待体验 - [E16.02 C09 ThreeUI · ThreeUI](https://threeui.com/)；来源总入口，需继续选具体样例；三维组件集合入口；需继续选择具体场景，不是单个粒子组件。；链接可达，效果待体验 - [E16.03 M03 Three.js · Three.js](https://threejs.org/examples/)；来源总入口，需继续选具体样例；完整三维引擎示例集；控制范围最大，也需自行构建场景。；链接可达，效果待体验 ### E17 流体、光场与空间背景 Shader / Fluid / Warp。通过 shader 或图层表达液体、光场、空间感。 - [E17.01 C09 ThreeUI · ThreeUI](https://threeui.com/)；来源总入口，需继续选具体样例；shader 与三维资源集合；按目标效果选具体作品。；链接可达，效果待体验 - [E17.02 C02a Svelte Magic UI · Warp Background](https://sv-animations.vercel.app/magic/docs/components/warp-background)；页面中发现的具体入口；现成扭曲背景；适合局部装饰，不能等同通用 shader 引擎。；链接可达，效果待体验 ### E18 金属、反光与边缘流光 Metal / Glare / Border beam。质感来自高光、边缘和运动关系，需放回真实背景比较。 - [E18.01 C01 Spectrum UI · Metal Button](https://ui.spectrumhq.in/docs/metal-button)；页面中发现的具体入口；真实 WebGL 金属边缘，提供三种材质预设；本地可切换比较。；链接可达，效果待体验 - [E18.02 C02a Svelte Magic UI · Glare Hover](https://sv-animations.vercel.app/magic/docs/components/glare-hover)；页面中发现的具体入口；悬停产生光泽反馈；更适合已有卡片的表面处理。；链接可达，效果待体验 - [E18.03 C02a Svelte Magic UI · Border Beam](https://sv-animations.vercel.app/magic/docs/components/border-beam)；页面中发现的具体入口；高亮沿边框运动；强调边界与注意力，不是金属材质。；链接可达，效果待体验 ### E19 字母翻转与扰码 Letter swap / Scramble。字母翻转、重排或由乱码收敛；关注中文与长标题。 - [E19.01 C02c Svelte Fancy Components · Letter 3D Swap](https://sv-animations.vercel.app/fancy/letter-3d-swap)；页面中发现的具体入口；字母在三维空间翻换；适合短标题。；链接可达，效果待体验 - [E19.02 C02c Svelte Fancy Components · Scramble In](https://sv-animations.vercel.app/fancy/scramble-in)；页面中发现的具体入口；字符扰乱后收敛；强调解码式进入过程。；链接可达，效果待体验 - [E19.03 C02b Svelte Spell UI · Randomized Text](https://sv-animations.vercel.app/spell/randomized-text)；页面中发现的具体入口；随机文字变化；适合装饰性标题，阅读内容应保持可读。；链接可达，效果待体验 ### E20 数字滚动与文字形变 Number ticker / Text morph。数值或词变化时保持视觉连续。 - [E20.01 C01 Spectrum UI · Number Ticker](https://ui.spectrumhq.in/docs/number-ticker)；页面中发现的具体入口；数字变化组件；适合指标值的过渡。；链接可达，效果待体验 - [E20.02 C02a Svelte Magic UI · Number Ticker](https://sv-animations.vercel.app/magic/docs/components/number-ticker)；页面中发现的具体入口；另一套数字过渡实现；比较数字方向、排版稳定性和减弱动效。；链接可达，效果待体验 - [E20.03 C02a Svelte Magic UI · Morphing Text](https://sv-animations.vercel.app/magic/docs/components/morphing-text)；页面中发现的具体入口；文字形态切换；不保证数值插值语义。；链接可达，效果待体验 ### E21 文字沿路径、图像穿插文字 Text path / Media between text。让字沿曲线排布，或在正文间插入动态媒体。 - [E21.01 C02c Svelte Fancy Components · Text Along Path](https://sv-animations.vercel.app/fancy/text-along-path)；页面中发现的具体入口；文字沿曲线排列或运动；适合徽章与环形标题。；链接可达，效果待体验 - [E21.02 C02c Svelte Fancy Components · Media Between Text](https://sv-animations.vercel.app/fancy/media-between-text)；页面中发现的具体入口；把媒体穿插在文字之间；属于编排结构，不是路径文字。；链接可达，效果待体验 ### E22 点阵、几何加载 Dot matrix / Geometric loader。同为等待状态，点阵、轨道和几何翻转有不同气质。 - [E22.01 C07 Svelte Dot Matrix · Hex Orbit](https://sv-matrix.vercel.app/components/hex/hex-1)；页面中发现的具体入口；点阵六边形轨道构图；视觉重心围绕中心旋转。；链接可达，效果待体验 - [E22.02 C07 Svelte Dot Matrix · Liquid Vortex](https://sv-matrix.vercel.app/components/hex/hex-10)；页面中发现的具体入口；点阵液体涡流构图；更接近流场背景。；链接可达，效果待体验 - [E22.03 C07 Svelte Dot Matrix · Glyph Flip](https://sv-matrix.vercel.app/components/hex/hex-8)；页面中发现的具体入口；点阵字形翻换；适合字符与图标状态变化。；链接可达，效果待体验 ### E23 骨架、微光与状态提示 Skeleton / Shimmer / Toast。用占位、光泽与通知提示状态；不应掩盖错误。 - [E23.01 C01 Spectrum UI · Skeleton Reveal](https://ui.spectrumhq.in/docs/skeleton-reveal)；页面中发现的具体入口；加载骨架到真实内容的揭示；本地可以触发。；链接可达，效果待体验 - [E23.02 C01 Spectrum UI · Toast Stack](https://ui.spectrumhq.in/docs/toast-stack)；页面中发现的具体入口；多条通知的堆叠组件；关注层级、关闭与停留时间。；链接可达，效果待体验 - [E23.03 M02 Motion · Toast stack](https://motion.dev/examples/react-toast-stack)；页面中发现的具体入口；通知堆叠的动效教程；需要配合业务通知逻辑。；链接可达，效果待体验 ### E24 抽屉、弹层与折叠 Drawer / Modal / Accordion。比较出发位置、焦点、遮罩和收起时机。 - [E24.01 C01 Spectrum UI · Animated Drawer](https://ui.spectrumhq.in/docs/animateddrawer)；页面中发现的具体入口；侧向抽屉组件；用于保留页面上下文的详情或编辑。；链接可达，效果待体验 - [E24.02 M02 Motion · Modal](https://motion.dev/examples/react-modal)；页面中发现的具体入口；模态层实例；要配合焦点管理与关闭行为。；链接可达，效果待体验 - [E24.03 M02 Motion · Accordion](https://motion.dev/examples/react-accordion)；页面中发现的具体入口；折叠内容实例；仍在文档流内，和模态层不是同类导航。；链接可达，效果待体验 ### E25 数据表格、筛选与密度 Data table / Filter。同样是表格，操作位置、密度、选中态与滚动行为差异很大。 - [E25.01 C01 Spectrum UI · Data Table](https://ui.spectrumhq.in/docs/data-table)；页面中发现的具体入口；具体数据表组件；需要继续核对排序、分页与键盘能力。；链接可达，效果待体验 - [E25.02 C03 Svelte Datatables · View Components](https://sv-table.vercel.app/docs/introduction)；页面中发现的具体入口；组件合集入口；先选出具体表格，不能把整个库当单一变体。；链接可达，效果待体验 - [E25.03 C06 Svelte QBlocks · New Datatable Blocks](https://sv-particles.vercel.app/particles/data-table)；页面中发现的具体入口；数据表页面区块；包含周边布局，借用范围大于单个表格。；链接可达，效果待体验 ### E26 看板与树形导航 Kanban / Tree navigation。表达任务阶段或层级关系。 - [E26.01 C01 Spectrum UI · Kanban Board](https://ui.spectrumhq.in/docs/kanban)；页面中发现的具体入口；按列组织状态卡片；适合流程与任务管理。；链接可达，效果待体验 - [E26.02 C01 Spectrum UI · Tree Nav](https://ui.spectrumhq.in/docs/tree-nav)；页面中发现的具体入口；可展开的层级导航；适合文件或组织结构。；链接可达，效果待体验 - [E26.03 C02a Svelte Magic UI · File Tree](https://sv-animations.vercel.app/magic/docs/components/file-tree)；页面中发现的具体入口；文件树的具体呈现；偏向项目结构说明。；链接可达，效果待体验 ### E27 Hero、图库与 App Shell Page blocks / Gallery。先比较内容结构，再看表面样式。 - [E27.01 C04 Svelte Shadcn Blocks · Explore Blocks](https://sv-blocks.vercel.app/hero)；页面中发现的具体入口；页面区块集合；按 hero、定价等任务选，不统一套用整站。；链接可达，效果待体验 - [E27.02 C05 Svelte Efferd · Hero Sections 3 blocks](https://sv-efferd.pages.dev/blocks/hero)；页面中发现的具体入口；首屏区块集合；重点是信息层级与行动入口。；链接可达，效果待体验 - [E27.03 C05 Svelte Efferd · Image Gallery 1 block](https://sv-efferd.pages.dev/blocks/image-gallery)；页面中发现的具体入口；图库区块集合；重点是图片比例与浏览节奏。；链接可达，效果待体验 - [E27.04 C05 Svelte Efferd · App Shell 1 block](https://sv-efferd.pages.dev/blocks/app-shell)；页面中发现的具体入口；应用外壳集合；定义导航和内容区关系，不等于营销首屏。；链接可达，效果待体验 ### E28 产品截图放大与演示 Screenshot walkthrough。真实截图承载证据，保留缩放和讲述顺序。 - [E28.01 C01 Spectrum UI · Image Preview](https://ui.spectrumhq.in/docs/imagepreview)；页面中发现的具体入口；图片查看器；适合放大与查看细节。；链接可达，效果待体验 - [E28.02 C02a Svelte Magic UI · Hero Video Dialog](https://sv-animations.vercel.app/magic/docs/components/hero-video-dialog)；页面中发现的具体入口；首屏视频弹层；适合演示视频与营销讲解。；链接可达，效果待体验 ### E29 插画角色与场景 Illustration / Character。同样讲一个故事，可以用不同人物、线条与造型语言。 - [E29.01 A01 unDraw · unDraw](https://undraw.co/)；来源总入口，需继续选具体样例；可调主色的插画库；按画风一致性选择。；链接可达，效果待体验 - [E29.02 A02 Storyset · Storyset](https://storyset.com/)；页面中发现的具体入口；多风格插画与动画资源；同项目应限定一套画风。；2026-09-18 已按来源语义纠正 - [E29.03 A03 Humaaans · Humaaans](https://www.humaaans.com/)；页面中发现的具体入口；人物拼装素材；适合自组场景。；2026-09-18 已按来源语义纠正 - [E29.04 A04 Open Peeps · Open Peeps](https://www.openpeeps.com/)；页面中发现的具体入口；手绘人物素材；适合更有笔触感的人物表达。；2026-09-18 已按来源语义纠正 ### E30 纸张、网点与单色印刷 Halftone / One-ink editorial。比较留白、排字、网点和纸张；参考图不能按代码许可直接商用。 - [E30.01 V01 Mono Color · Mono Color](https://github.com/yanliudesign/mono-color-skill)；页面中发现的具体入口；单色案例参考；原创作品仅作学习，不当成可自由复制素材。；2026-09-18 已按来源语义纠正 - [E30.02 A06 fffuel · fffuel](https://www.fffuel.co/)；页面中发现的具体入口；纹理与图形生成器；适合生成可调整的背景素材。；2026-09-18 已按来源语义纠正 ### E31 会响应输入的矢量角色 Interactive vector / State machine。Rive 可用状态机连接输入与图形；Lottie 提供预制矢量动效，复杂交互需另行实现。 - [E31.01 M04 Rive · Rive](https://rive.app/)；页面中发现的具体入口；状态驱动的交互矢量内容；适合角色响应和多状态图形。；2026-09-18 已按来源语义纠正 - [E31.02 M05 LottieFiles · LottieFiles](https://lottiefiles.com/)；来源总入口，需继续选具体样例；动画素材与播放器生态；适合按进度播放的现成动画，具体许可逐项核对。；访问受限或失败，采用前复核 ### E32 纹理、渐变与形状生成 Noise / Mesh gradient / Pattern。创建背景形态而非只叠一层默认渐变。 - [E32.01 A06 fffuel · fffuel](https://www.fffuel.co/)；页面中发现的具体入口；多种图形与纹理生成工具；适合需要可控输出的装饰素材。；2026-09-18 已按来源语义纠正 - [E32.02 A07 CSS Gradient · CSS Gradient](https://cssgradient.io/)；页面中发现的具体入口；线性、径向渐变配置；适合简单可维护的 CSS 背景。；2026-09-18 已按来源语义纠正 - [E32.03 A08 Learn UI Mesh Gradient · Learn UI Mesh Gradient](https://www.learnui.design/tools/mesh-gradient-generator.html)；页面中发现的具体入口；多点色彩融合生成器；适合柔和复杂色场，注意输出格式。；2026-09-18 已按来源语义纠正 ## 真实组件样本 88 个可交互样本；登记清单有 654 条，含变体、演示及辅助模块，不是独立组件数。完整登记见 catalog.json 或网页目录。 - C001 [关注按钮](runtime/index.html?id=spectrum-follow) · Spectrum UI · 状态改变宽度、填充和标签；再次悬停显示取消关注；适用：关注关系和订阅开关。 [代码与文档](https://ui.spectrumhq.in/docs/follow-button) - C002 [Radix · solid](runtime/index.html?id=radix-button-solid) · Radix Themes · 实色填充，视觉权重较高；适用：按同一页面的动作层级选择，不代表不同业务状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/button) - C003 [Material · filled](runtime/index.html?id=material-button-filled) · Material Design · 实色填充，运行官方 Material Web 组件；适用：突出主要动作。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/button.md) - C004 [Bootstrap · primary](runtime/index.html?id=bootstrap-button-primary) · Bootstrap · 实色变体；主要动作。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C005 [异步成功按钮](runtime/index.html?id=spectrum-morph-success) · Spectrum UI · 等待时变形为加载，完成后显示勾选；模拟延迟 900ms；适用：保存或提交的异步反馈。 [代码与文档](https://ui.spectrumhq.in/docs/morph-button) - C006 [长按确认 1200ms](runtime/index.html?id=spectrum-hold) · Spectrum UI · 持续按住填满进度，提前松开取消；没有真实删除；适用：避免误触的重要操作。 [代码与文档](https://ui.spectrumhq.in/docs/hold-to-confirm) - C007 [已关注状态](runtime/index.html?id=spectrum-follow-active) · Spectrum UI · 从已关注开始，可比较二次悬停的取消提示；适用：需要可逆状态的关注操作。 [代码与文档](https://ui.spectrumhq.in/docs/follow-button) - C008 [点赞与计数](runtime/index.html?id=spectrum-like) · Spectrum UI · 心形弹跳、粒子与计数滚动共同反馈点击；适用：内容互动，避免用于普通提交。 [代码与文档](https://ui.spectrumhq.in/docs/like-button) - C009 [已点赞状态](runtime/index.html?id=spectrum-like-active) · Spectrum UI · 初始已选，再次点击撤回并减少计数；适用：可撤回的轻量互动。 [代码与文档](https://ui.spectrumhq.in/docs/like-button) - C010 [异步失败按钮](runtime/index.html?id=spectrum-morph-error) · Spectrum UI · 同一动作演示失败、抖动和回到可重试状态；适用：需要错误恢复的提交操作。 [代码与文档](https://ui.spectrumhq.in/docs/morph-button) - C011 [长按确认 600ms](runtime/index.html?id=spectrum-hold-short) · Spectrum UI · 同一组件缩短保持时间，对比确认成本；适用：较轻量的确认，时间由场景测试。 [代码与文档](https://ui.spectrumhq.in/docs/hold-to-confirm) - C012 [展开操作按钮](runtime/index.html?id=spectrum-share) · Spectrum UI · 点击后展开两个演示动作，选择只显示本地反馈；适用：低频次级动作的收纳。 [代码与文档](https://ui.spectrumhq.in/docs/share-button) - C013 [弹性开关 · 关闭](runtime/index.html?id=spectrum-switch-off) · Spectrum UI · 按压拉伸滑块，点击或拖动切换；适用：二元设置。 [代码与文档](https://ui.spectrumhq.in/docs/animated-switch) - C014 [弹性开关 · 开启](runtime/index.html?id=spectrum-switch-on) · Spectrum UI · 从开启态开始，图标随状态变化；适用：比较已启用状态的可读性。 [代码与文档](https://ui.spectrumhq.in/docs/animated-switch) - C015 [液态金属 · Chromatic](runtime/index.html?id=spectrum-metal-chromatic) · Spectrum UI · 真实 metal-fx WebGL 环形材质，彩色反射；适用：活动页主 CTA 或品牌焦点。 [代码与文档](https://ui.spectrumhq.in/docs/metal-button) - C016 [液态金属 · Silver](runtime/index.html?id=spectrum-metal-silver) · Spectrum UI · 同一 shader 的银色预设，表面更中性；适用：较克制的材质强调。 [代码与文档](https://ui.spectrumhq.in/docs/metal-button) - C017 [液态金属 · Gold](runtime/index.html?id=spectrum-metal-gold) · Spectrum UI · 同一 shader 的金色预设，暖色高光；适用：明确需要金属视觉的品牌表达。 [代码与文档](https://ui.spectrumhq.in/docs/metal-button) - C018 [数量步进器](runtime/index.html?id=spectrum-stepper) · Spectrum UI · 加减数字在 0–10 之间，显示当前取值；适用：购买数量、席位数等有界整数。 [代码与文档](https://ui.spectrumhq.in/docs/quantity-stepper) - C019 [交互星级评分](runtime/index.html?id=spectrum-rating) · Spectrum UI · 悬停预览、点击提交、再点清除；适用：收集主观评价。 [代码与文档](https://ui.spectrumhq.in/docs/star-rating) - C020 [只读评分 4.3](runtime/index.html?id=spectrum-rating-readonly) · Spectrum UI · 分数可非整数，不接受编辑；适用：汇总评分展示。 [代码与文档](https://ui.spectrumhq.in/docs/star-rating) - C021 [任务复选框](runtime/index.html?id=spectrum-checkbox) · Spectrum UI · 勾选与文字划线共同表达完成；适用：待办列表。 [代码与文档](https://ui.spectrumhq.in/docs/task-checkbox) - C022 [通知数徽标](runtime/index.html?id=spectrum-bell) · Spectrum UI · 点击模拟新增通知，观察数字变化；适用：有明确未读数量的通知入口。 [代码与文档](https://ui.spectrumhq.in/docs/notification-bell) - C023 [通知圆点](runtime/index.html?id=spectrum-bell-dot) · Spectrum UI · 只提示有更新，不显示数量；适用：无需暴露数量的轻量提示。 [代码与文档](https://ui.spectrumhq.in/docs/notification-bell) - C024 [倾斜卡片 · 高光](runtime/index.html?id=spectrum-tilt-glare) · Spectrum UI · 指针驱动倾斜、层次偏移和高光；适用：展示型商品或作品卡片。 [代码与文档](https://ui.spectrumhq.in/docs/tilt-card) - C025 [倾斜卡片 · 无高光](runtime/index.html?id=spectrum-tilt-flat) · Spectrum UI · 同一倾斜逻辑关闭 glare，分离动作与材质的贡献；适用：需要空间感但不强调反光的卡片。 [代码与文档](https://ui.spectrumhq.in/docs/tilt-card) - C026 [头像组](runtime/index.html?id=spectrum-avatars) · Spectrum UI · 初始显示三位，点击剩余数量展开；采用姓名缩写；适用：协作成员与参与者。 [代码与文档](https://ui.spectrumhq.in/docs/avatar-stack) - C027 [骨架切换](runtime/index.html?id=spectrum-skeleton) · Spectrum UI · 按钮切换占位和内容，观察同区域过渡；适用：等待真实数据的区域。 [代码与文档](https://ui.spectrumhq.in/docs/skeleton-reveal) - C028 [Radix · classic](runtime/index.html?id=radix-button-classic) · Radix Themes · 带立体层次的经典按钮；适用：按同一页面的动作层级选择，不代表不同业务状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/button) - C029 [Radix · soft](runtime/index.html?id=radix-button-soft) · Radix Themes · 浅色填充，视觉权重较低；适用：按同一页面的动作层级选择，不代表不同业务状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/button) - C030 [Radix · surface](runtime/index.html?id=radix-button-surface) · Radix Themes · 表面填充与细边界；适用：按同一页面的动作层级选择，不代表不同业务状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/button) - C031 [Radix · outline](runtime/index.html?id=radix-button-outline) · Radix Themes · 描边边界，保持背景透出；适用：按同一页面的动作层级选择，不代表不同业务状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/button) - C032 [Radix · ghost](runtime/index.html?id=radix-button-ghost) · Radix Themes · 弱化容器，只保留文字与悬停反馈；适用：按同一页面的动作层级选择，不代表不同业务状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/button) - C033 [Radix 开关 · 尺寸 1](runtime/index.html?id=radix-switch-1) · Radix Themes · 同一开关的官方 size=1，比较密度和点击目标；适用：页面密度适配。 [代码与文档](https://www.radix-ui.com/themes/docs/components/switch) - C034 [Radix 开关 · 尺寸 2](runtime/index.html?id=radix-switch-2) · Radix Themes · 同一开关的官方 size=2，比较密度和点击目标；适用：页面密度适配。 [代码与文档](https://www.radix-ui.com/themes/docs/components/switch) - C035 [Radix 开关 · 尺寸 3](runtime/index.html?id=radix-switch-3) · Radix Themes · 同一开关的官方 size=3，比较密度和点击目标；适用：页面密度适配。 [代码与文档](https://www.radix-ui.com/themes/docs/components/switch) - C036 [Radix 输入框 · classic](runtime/index.html?id=radix-input-classic) · Radix Themes · 官方输入框的 classic 变体，可输入真实文本；适用：表单与搜索。 [代码与文档](https://www.radix-ui.com/themes/docs/components/text-field) - C037 [Radix 输入框 · surface](runtime/index.html?id=radix-input-surface) · Radix Themes · 官方输入框的 surface 变体，可输入真实文本；适用：表单与搜索。 [代码与文档](https://www.radix-ui.com/themes/docs/components/text-field) - C038 [Radix 输入框 · soft](runtime/index.html?id=radix-input-soft) · Radix Themes · 官方输入框的 soft 变体，可输入真实文本；适用：表单与搜索。 [代码与文档](https://www.radix-ui.com/themes/docs/components/text-field) - C039 [Radix 徽标 · solid](runtime/index.html?id=radix-badge-solid) · Radix Themes · 同一状态标签的 solid 变体；适用：标签与轻量状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/badge) - C040 [Radix 徽标 · soft](runtime/index.html?id=radix-badge-soft) · Radix Themes · 同一状态标签的 soft 变体；适用：标签与轻量状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/badge) - C041 [Radix 徽标 · surface](runtime/index.html?id=radix-badge-surface) · Radix Themes · 同一状态标签的 surface 变体；适用：标签与轻量状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/badge) - C042 [Radix 徽标 · outline](runtime/index.html?id=radix-badge-outline) · Radix Themes · 同一状态标签的 outline 变体；适用：标签与轻量状态。 [代码与文档](https://www.radix-ui.com/themes/docs/components/badge) - C043 [Radix 复选框](runtime/index.html?id=radix-checkbox) · Radix Themes · 使用 Radix Themes 实际组件与默认主题；适用：独立选项或多选。 [代码与文档](https://www.radix-ui.com/themes/docs/components/checkbox) - C044 [Radix 滑块](runtime/index.html?id=radix-slider) · Radix Themes · 使用 Radix Themes 实际组件与默认主题；适用：连续参数调整。 [代码与文档](https://www.radix-ui.com/themes/docs/components/slider) - C045 [Radix 进度条](runtime/index.html?id=radix-progress) · Radix Themes · 使用 Radix Themes 实际组件与默认主题；适用：确定进度，示例 60%。 [代码与文档](https://www.radix-ui.com/themes/docs/components/progress) - C046 [Radix 内容卡片](runtime/index.html?id=radix-card) · Radix Themes · 使用 Radix Themes 实际组件与默认主题；适用：相关信息分组。 [代码与文档](https://www.radix-ui.com/themes/docs/components/card) - C047 [Radix 标签页](runtime/index.html?id=radix-tabs) · Radix Themes · 使用 Radix Themes 实际组件与默认主题；适用：同一上下文内切换内容。 [代码与文档](https://www.radix-ui.com/themes/docs/components/tabs) - C048 [Material · filled-tonal](runtime/index.html?id=material-button-filled-tonal) · Material Design · 色调填充，运行官方 Material Web 组件；适用：中等强调的动作。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/button.md) - C049 [Material · outlined](runtime/index.html?id=material-button-outlined) · Material Design · 描边容器，运行官方 Material Web 组件；适用：次级动作。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/button.md) - C050 [Material · text](runtime/index.html?id=material-button-text) · Material Design · 无持久容器，运行官方 Material Web 组件；适用：低强调或紧凑动作。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/button.md) - C051 [Material · elevated](runtime/index.html?id=material-button-elevated) · Material Design · 以阴影产生层次，运行官方 Material Web 组件；适用：需要与背景分离的动作。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/button.md) - C052 [Material 开关](runtime/index.html?id=material-switch) · Material Design · 运行官方 Material Web 组件，保留原交互；适用：一致的 Material 表单语言。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/switch.md) - C053 [Material 复选框](runtime/index.html?id=material-checkbox) · Material Design · 运行官方 Material Web 组件，保留原交互；适用：一致的 Material 表单语言。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/checkbox.md) - C054 [Material 单选按钮](runtime/index.html?id=material-radio) · Material Design · 运行官方 Material Web 组件，保留原交互；适用：一致的 Material 表单语言。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/radio.md) - C055 [Material 滑块](runtime/index.html?id=material-slider) · Material Design · 运行官方 Material Web 组件，保留原交互；适用：一致的 Material 表单语言。 [代码与文档](https://github.com/material-components/material-web/blob/main/docs/components/slider.md) - C056 [Bootstrap · outline-primary](runtime/index.html?id=bootstrap-button-outline-primary) · Bootstrap · 描边变体；主要动作。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C057 [Bootstrap · secondary](runtime/index.html?id=bootstrap-button-secondary) · Bootstrap · 实色变体；次级动作。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C058 [Bootstrap · outline-secondary](runtime/index.html?id=bootstrap-button-outline-secondary) · Bootstrap · 描边变体；次级动作。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C059 [Bootstrap · success](runtime/index.html?id=bootstrap-button-success) · Bootstrap · 实色变体；成功语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C060 [Bootstrap · outline-success](runtime/index.html?id=bootstrap-button-outline-success) · Bootstrap · 描边变体；成功语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C061 [Bootstrap · danger](runtime/index.html?id=bootstrap-button-danger) · Bootstrap · 实色变体；危险语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C062 [Bootstrap · outline-danger](runtime/index.html?id=bootstrap-button-outline-danger) · Bootstrap · 描边变体；危险语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C063 [Bootstrap · warning](runtime/index.html?id=bootstrap-button-warning) · Bootstrap · 实色变体；警告语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C064 [Bootstrap · outline-warning](runtime/index.html?id=bootstrap-button-outline-warning) · Bootstrap · 描边变体；警告语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C065 [Bootstrap · info](runtime/index.html?id=bootstrap-button-info) · Bootstrap · 实色变体；信息语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C066 [Bootstrap · outline-info](runtime/index.html?id=bootstrap-button-outline-info) · Bootstrap · 描边变体；信息语义。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C067 [Bootstrap · light](runtime/index.html?id=bootstrap-button-light) · Bootstrap · 实色变体；浅底样式。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C068 [Bootstrap · outline-light](runtime/index.html?id=bootstrap-button-outline-light) · Bootstrap · 描边变体；浅底样式。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C069 [Bootstrap · dark](runtime/index.html?id=bootstrap-button-dark) · Bootstrap · 实色变体；深底样式。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C070 [Bootstrap · outline-dark](runtime/index.html?id=bootstrap-button-outline-dark) · Bootstrap · 描边变体；深底样式。颜色语义仍需文字说明；适用：已有 Bootstrap 项目内的动作层级。 [代码与文档](https://getbootstrap.com/docs/5.3/components/buttons/) - C071 [Bootstrap 提示条](runtime/index.html?id=bootstrap-alert) · Bootstrap · 使用官方 Bootstrap CSS；页面内的持续提示；适用：已有 Bootstrap 项目。 [代码与文档](https://getbootstrap.com/docs/5.3/components/alerts/) - C072 [Bootstrap 内容卡片](runtime/index.html?id=bootstrap-card) · Bootstrap · 使用官方 Bootstrap CSS；标题、正文与动作组合；适用：已有 Bootstrap 项目。 [代码与文档](https://getbootstrap.com/docs/5.3/components/card/) - C073 [Bootstrap 输入框](runtime/index.html?id=bootstrap-input) · Bootstrap · 使用官方 Bootstrap CSS；基础输入，保留浏览器输入行为；适用：已有 Bootstrap 项目。 [代码与文档](https://getbootstrap.com/docs/5.3/forms/form-control/) - C074 [任务计划 · Agent Plan](runtime/index.html?id=spectrum-agent-plan) · Spectrum UI · 运行前列出计划；可以逐项取消勾选，只运行选中步骤。；适用：让用户先看懂 agent 准备做什么。 [代码与文档](https://ui.spectrumhq.in/r/agent-plan.json) - C075 [紧凑任务计划 · Agent Plan](runtime/index.html?id=spectrum-agent-plan-compact) · Spectrum UI · 同一计划隐藏说明文字，保留步骤选择。；适用：空间有限的侧栏或聊天卡片。 [代码与文档](https://ui.spectrumhq.in/r/agent-plan.json) - C076 [执行步骤 · Agent Steps](runtime/index.html?id=spectrum-agent-steps) · Spectrum UI · 展示已完成、执行中、排队中的步骤；可展开查看结果。；适用：用户想知道 agent 做到哪一步。 [代码与文档](https://ui.spectrumhq.in/r/agent-steps.json) - C077 [执行步骤 · 完成态](runtime/index.html?id=spectrum-agent-steps-complete) · Spectrum UI · 全部完成，展开第二步可看并行子步骤。；适用：任务结束后的过程回看。 [代码与文档](https://ui.spectrumhq.in/r/agent-steps.json) - C078 [执行步骤 · 失败态](runtime/index.html?id=spectrum-agent-steps-error) · Spectrum UI · 中间步骤失败，展开可看原因；后续步骤保持排队。；适用：表达失败位置，避免整条流程只显示一个错误。 [代码与文档](https://ui.spectrumhq.in/r/agent-steps.json) - C079 [确认卡 · Approval Card](runtime/index.html?id=spectrum-approval) · Spectrum UI · 执行前展示说明，让人选择同意或拒绝；本例没有外部动作。；适用：需要人工确认的 agent 操作。 [代码与文档](https://ui.spectrumhq.in/r/approval-card.json) - C080 [确认卡 · 已同意](runtime/index.html?id=spectrum-approval-approved) · Spectrum UI · 同意后的结果状态；保留操作上下文。；适用：确认后的反馈。 [代码与文档](https://ui.spectrumhq.in/r/approval-card.json) - C081 [确认卡 · 已拒绝](runtime/index.html?id=spectrum-approval-rejected) · Spectrum UI · 拒绝后的结果状态；不继续执行。；适用：取消或拒绝操作的反馈。 [代码与文档](https://ui.spectrumhq.in/r/approval-card.json) - C082 [玻璃导航栏 · Dock](runtime/index.html?id=spectrum-dock-glass) · Spectrum UI · 半透明、背景模糊；指针靠近图标时放大，点击弹跳。；适用：桌面式浮动导航。 [代码与文档](https://ui.spectrumhq.in/r/dock.json) - C083 [磨砂玻璃按钮](runtime/index.html?id=surface-frosted-glass) · Good Design 原创样本 · 较强背景模糊、半透明填充和亮边，保留背景色而弱化细节。；适用：在同一页面中比较材质和动作层级，按选定方向应用。 [代码与文档](runtime/src/catalog-extras.tsx) - C084 [清透玻璃按钮](runtime/index.html?id=surface-clear-glass) · Good Design 原创样本 · 较弱模糊、更透明的表面和清晰边界，能看见更多背景细节。；适用：在同一页面中比较材质和动作层级，按选定方向应用。 [代码与文档](runtime/src/catalog-extras.tsx) - C085 [亮面按钮](runtime/index.html?id=surface-gloss) · Good Design 原创样本 · 分段高光与深色下沿形成亮面体积感。；适用：在同一页面中比较材质和动作层级，按选定方向应用。 [代码与文档](runtime/src/catalog-extras.tsx) - C086 [纸张按钮](runtime/index.html?id=surface-paper) · Good Design 原创样本 · 细颗粒纸纹、直角边界与硬投影。；适用：在同一页面中比较材质和动作层级，按选定方向应用。 [代码与文档](runtime/src/catalog-extras.tsx) - C087 [柔和浮雕按钮](runtime/index.html?id=surface-soft) · Good Design 原创样本 · 同色背景上使用明暗双侧阴影建立轻微凸起。；适用：在同一页面中比较材质和动作层级，按选定方向应用。 [代码与文档](runtime/src/catalog-extras.tsx) - C088 [渐变按钮](runtime/index.html?id=surface-gradient) · Good Design 原创样本 · 双色过渡与浅色边界强调动作。；适用：在同一页面中比较材质和动作层级，按选定方向应用。 [代码与文档](runtime/src/catalog-extras.tsx) ## 设计系统与规则 ### S01 模块网格与基线 以共同对齐线、列宽、间距和基线组织内容；网格约束关系，不决定唯一画风。 适用：年鉴、报告、海报，以及需要跨页一致的网页。 使用：先设页面比例与信息层级，再定列数和留白，最后允许主视觉有意跨列。 下面是原创规则实验，非 Carbon 页面复刻。Carbon 2x Grid 以 8px 单位及倍增关系提供具体体系。 [原文规则](https://carbondesignsystem.com/elements/2x-grid/overview/) ### S02 文字层级与阅读节奏 用字号、字重、行长和段间距区分标题、摘要、正文与注释。 适用：长文、研究报告、杂志型网页。 使用：先放入真实长短内容，设少量层级，再检查中英文混排与窄屏换行。 这是跨媒介的编排方法；不应直接套成某个组件库的默认样式。 ### S03 Material Design 以组件角色、状态和主题规则组织一致的界面语言。 适用：需要 Material 体系的多平台产品。 使用：先选目标平台，再定主题与层级，采用相应组件并覆盖状态。 本地样本使用 Material Web；该实现包已声明维护模式，不能把它当成整个 Material 系统的更新状态。 [原文规则](https://github.com/material-components/material-web) ### S04 Fluent 2 以平台自然性、聚焦任务、包容性和熟悉的品牌体验作为设计原则。 适用：Microsoft 生态及协作、生产力产品。 使用：先确定平台和使用密度，再套用主题、布局与组件状态。 借某个 Fluent 组件不等于采用全套视觉语言。 [原文规则](https://fluent2.microsoft.design/design-principles) ### S05 Carbon 将布局、文字、组件和数据表达放在同一规则内；2x Grid 提供尺寸和对齐关系。 适用：数据密集、企业工具和复杂任务界面。 使用：用真实表格、表单与导航验证密度，再确定网格、token 与交互状态。 不要只复制黑白配色；重点是关系和一致性。 [原文规则](https://carbondesignsystem.com/) ### S06 Primer GitHub 的产品与品牌设计资源，包含组件及使用指导。 适用：开发者工具、代码与协作界面。 使用：先判断任务是否接近该体系，再复用组件、主题与交互约定。 用于其他产品时需保留自己的品牌与信息架构。 [原文规则](https://primer.style/) ### S07 Atlassian Design System 以 token、组件和使用指导支撑协作产品的一致性。 适用：项目、任务和团队协作工具。 使用：从导航和任务流程开始，随后选组件并映射 token。 不要从库中任意拼色和密度；先设产品约束。 [原文规则](https://atlassian.design/) ### S08 Shopify Polaris 围绕商家任务组织电商管理界面。 适用：Shopify 相关应用及商家工作流。 使用：从当前平台文档与组件入口选实现，再核对嵌入环境要求。 旧 React 入口已跳转；不把旧包文档当当前平台实现。 [原文规则](https://shopify.dev/docs/api/polaris) ### S09 GOV.UK Design System 将组件和服务模式一起说明，强调用户完成具体任务。 适用：内容、申请、确认和多步公共服务流程。 使用：先选任务模式，再选表单与页面组件，用真实文案走完整流程。 体系与服务语境有关；不是通用营销页面皮肤。 [原文规则](https://design-system.service.gov.uk/) ### S10 USWDS 提供公共服务的布局、组件和可访问性指引。 适用：公共服务、信息门户与复杂表单。 使用：按任务确定页面模板，再选组件并核对可访问性。 具体合规要求仍需由项目本身验证。 [原文规则](https://designsystem.digital.gov/) ### S11 Apple Human Interface Guidelines 按平台解释材料、层级与交互；材质要服务内容和层次。 适用：Apple 平台应用或明确借鉴其局部表达的产品。 使用：先选目标平台与交互模型，再选材质和组件表现。 不把平台特有玻璃效果机械搬到所有网页。 [原文规则](https://developer.apple.com/design/human-interface-guidelines/) ### S12 Modern Web Guidance 解决浏览器实现、原生能力、性能及兼容性问题。 适用：已有设计方向，需要选择可维护的 Web 实现时。 使用：按具体问题检索并读取对应指南，核对目标浏览器，再实现和验证。 它不是视觉设计系统，不提供统一的配色、排版或品牌风格。 [原文规则](https://github.com/GoogleChrome/modern-web-guidance) ## 实站截图 静态截图不代表动效播放，也不代表推荐或人工认可。 ### Q05 Spectrum 立体卡片 / Spectrum UI ![Q05 Spectrum 立体卡片 / Spectrum UI](previews/spectrum-tilt.png) [打开原例体验](https://ui.spectrumhq.in/docs/tilt-card) ### Q06 Spell 立体卡片 / Svelte Spell UI ![Q06 Spell 立体卡片 / Svelte Spell UI](previews/spell-tilt.png) [打开原例体验](https://sv-animations.vercel.app/spell/tilt-card) ### Q01 字母三维翻转 / Svelte Fancy Components ![Q01 字母三维翻转 / Svelte Fancy Components](previews/fancy-letter-3d.png) [打开原例体验](https://sv-animations.vercel.app/fancy/letter-3d-swap) ### Q02 书本透视 / Svelte Spell UI ![Q02 书本透视 / Svelte Spell UI](previews/spell-book.png) [打开原例体验](https://sv-animations.vercel.app/spell/perspective-book) ### Q03 点阵涡旋加载 / Svelte Dot Matrix ![Q03 点阵涡旋加载 / Svelte Dot Matrix](previews/matrix-vortex.png) [打开原例体验](https://sv-matrix.vercel.app/components/hex/hex-10) ### Q04 金属按钮 / Spectrum UI ![Q04 金属按钮 / Spectrum UI](previews/spectrum-metal.png) [打开原例体验](https://ui.spectrumhq.in/docs/metal-button) ## 全部来源 子库单列；采用时核对版本、行为与使用条款。Mono Color 原创样例只作参考，不是可自由复制的素材。 ### 组件与页面 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [C01 Spectrum UI](https://ui.spectrumhq.in/docs) | 表格、抽屉、动作栏、金属按钮、交互卡片 | React / shadcn | 链接可达，未逐项体验 | | [C02 Svelte Animations](https://sv-animations.vercel.app/) | 多个动效子集入口，文字、背景、指针、卡片 | Svelte | 链接可达，未逐项体验 | | [C02a Svelte Magic UI](https://sv-animations.vercel.app/magic) | 流光边框、轨道、数字、粒子、文字与背景 | Svelte | 链接可达，未逐项体验 | | [C02b Svelte Spell UI](https://sv-animations.vercel.app/spell) | 书本透视、签名、文字、输入与细部交互 | Svelte | 链接可达，未逐项体验 | | [C02c Svelte Fancy Components](https://sv-animations.vercel.app/fancy) | 字母翻转、路径文字、像素轨迹、图文穿插 | Svelte | 链接可达，未逐项体验 | | [C03 Svelte Datatables](https://sv-table.vercel.app/) | 数据表格、筛选、排序与分页 | Svelte / TanStack | 链接可达，未逐项体验 | | [C04 Svelte Shadcn Blocks](https://sv-blocks.vercel.app/) | 营销区块、页面布局、Notion 风格区块 | Svelte | 链接可达，未逐项体验 | | [C05 Svelte Efferd](https://sv-efferd.pages.dev/) | Hero、图库、登录、FAQ、侧栏与 App Shell | Svelte | 链接可达，未逐项体验 | | [C06 Svelte QBlocks](https://sv-particles.vercel.app/) | 通用组件与数据表格，域名不代表只有粒子 | Svelte | 链接可达，未逐项体验 | | [C07 Svelte Dot Matrix](https://sv-matrix.vercel.app/) | 点阵、几何、轨道、波动与字符加载效果 | Svelte | 链接可达，未逐项体验 | | [C10 shadcn/ui](https://ui.shadcn.com/docs/components) | 表单、导航、对话框、表格等可组合组件 | React | 链接可达，未逐项体验 | | [C11 Radix Themes](https://www.radix-ui.com/themes/docs/overview/getting-started) | 成套主题与产品 UI 组件 | React | 链接可达，未逐项体验 | | [C12 Bootstrap](https://getbootstrap.com/docs/5.3/components/card/) | 布局与通用组件，保留为已有项目的实现选项 | HTML / CSS / JS | 链接可达，未逐项体验 | ### 工具与平台 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [C08 Svelte Agentation](https://sv-agentation.com/) | 页面元素与区域的视觉反馈标注 | Svelte / 开发工具 | 链接可达，未逐项体验 | | [T01 Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance) | 原生组件、动画与兼容性问题检索 | 浏览器实现指南 | 链接可达，未逐项体验 | ### 三维与动效引擎 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [C09 ThreeUI](https://threeui.com/) | 交互三维组件、背景与 shader；免费和付费范围分开 | React / Three.js | 链接可达，未逐项体验 | | [M01 GSAP](https://gsap.com/docs/v3/) | 时间线、滚动、SVG、文字、拖拽与形变 | JavaScript | 链接可达，未逐项体验 | | [M02 Motion](https://motion.dev/) | 布局过渡、弹簧、手势、入场与滚动 | React / JavaScript / Vue | 链接可达，未逐项体验 | | [M03 Three.js](https://threejs.org/examples/) | 三维场景、材质、粒子与后处理示例 | JavaScript / WebGL | 链接可达，未逐项体验 | | [M04 Rive](https://rive.app/) | 状态驱动的矢量动效、角色与交互图形 | 交互矢量动画 / 多平台 | 链接可达，未逐项体验 | | [M05 LottieFiles](https://lottiefiles.com/) | 现成矢量动画与加载、插画素材 | Lottie / 多平台 | 本轮访问受限或失败，保留入口 | | [M06 Scroll-driven Animations](https://scroll-driven-animations.style/) | 滚动进度、滚动叙事与视口动画示例 | 原生 CSS / JS | 链接可达，未逐项体验 | ### 设计系统 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [D01 Material Design](https://m3.material.io/develop/web) | Material 组件、状态和平台规范 | 多平台 / Web | 链接可达，未逐项体验 | | [D02 Fluent 2](https://fluent2.microsoft.design/) | Microsoft 产品组件、密度与状态体系 | React / Web Components | 链接可达，未逐项体验 | | [D03 Carbon](https://carbondesignsystem.com/) | 企业工具、数据密集界面与图表规范 | React / Web Components | 链接可达，未逐项体验 | | [D04 Primer](https://primer.style/) | GitHub 产品与品牌组件 | React / CSS | 链接可达，未逐项体验 | | [D05 Atlassian Design System](https://atlassian.design/) | 协作工具、导航、表单与设计 token | React | 链接可达，未逐项体验 | | [D06 Shopify Polaris](https://polaris-react.shopify.com/components) | 电商管理界面；旧 React 文档，采用前核对迁移状态 | Web | 链接可达，未逐项体验 | | [D07 GOV.UK Design System](https://design-system.service.gov.uk/components/) | 内容、表单和公共服务任务流程 | HTML / CSS / JS | 链接可达，未逐项体验 | | [D08 USWDS](https://designsystem.digital.gov/components/) | 公共服务组件、可访问性和布局模式 | HTML / CSS / JS | 链接可达，未逐项体验 | | [D09 Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/materials) | 材质、层级和平台交互规范；按目标平台使用 | 多平台规范 | 链接可达，未逐项体验 | ### 设计案例与学习 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [M07 Animations on the Web](https://animations.dev/) | 动效设计、交互细节与手感讲解 | 讲解与示例 | 链接可达，未逐项体验 | | [M08 Emil Kowalski](https://emilkowal.ski/) | 具体组件和动效实现的设计解释 | 文章与案例 | 链接可达，未逐项体验 | | [M09 Easing.dev](https://easing.dev/) | 缓动曲线的可视化选择与比较 | 缓动工具 | 链接可达，未逐项体验 | | [M10 Easings.co](https://easings.co/) | 缓动效果与曲线参考 | 缓动工具 | 链接可达，未逐项体验 | | [V01 Mono Color](https://github.com/yanliudesign/mono-color-skill) | 编辑排版、网点、印刷质感；图像仅作参考，不按代码 MIT 授权使用 | 单色 / 双墨视觉样例 | 链接可达，未逐项体验 | | [V02 Pinterest](https://www.pinterest.com/) | 视觉发现入口；溯源到原作者，不能当素材授权 | 视觉检索 | 链接可达，未逐项体验 | | [V03 Hallmark Imagery](https://www.usehallmark.com/imagery/) | 水彩等图像风格参考与图库；使用具体素材前核对许可 | 图像风格参考 | 本轮访问受限或失败，保留入口 | ### 图标与标识 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [I01 Lucide](https://lucide.dev/) | 线性 UI 图标 | SVG / 多框架 | 链接可达，未逐项体验 | | [I02 Heroicons](https://heroicons.com/) | 线性与填充 UI 图标 | SVG / React / Vue | 链接可达，未逐项体验 | | [I03 Phosphor](https://phosphoricons.com/) | 多字重、多风格图标 | SVG / 多框架 | 链接可达，未逐项体验 | | [I04 Iconoir](https://iconoir.com/) | 线性图标 | SVG / 多框架 | 链接可达，未逐项体验 | | [I05 Tabler Icons](https://tabler-icons.io/) | 线性图标与广泛的业务符号 | SVG / 多框架 | 本轮访问受限或失败，保留入口 | | [I06 Simple Icons](https://simpleicons.org/) | 品牌标志，使用条件需逐品牌核对 | SVG | 链接可达，未逐项体验 | | [I07 SVGL](https://svgl.app/) | 品牌 SVG 标志 | SVG | 链接可达，未逐项体验 | | [I08 The SVG](https://thesvg.org/) | SVG 图形与标志检索 | SVG | 链接可达，未逐项体验 | | [I09 Brandfetch](https://brandfetch.com/) | 品牌标识与品牌资产检索 | 品牌资料 | 链接可达，未逐项体验 | ### 插画与纹理 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [A01 unDraw](https://undraw.co/) | 可调色的场景插画 | SVG 插画 | 链接可达，未逐项体验 | | [A02 Storyset](https://storyset.com/) | 多种画风的场景插画与动画 | 插画 / 动画 | 链接可达，未逐项体验 | | [A03 Humaaans](https://www.humaaans.com/) | 可组合人物插画 | 人物插画 | 链接可达，未逐项体验 | | [A04 Open Peeps](https://www.openpeeps.com/) | 手绘人物与表情组合 | 人物插画 | 链接可达，未逐项体验 | | [A05 IRA Design](https://www.iradesign.io/) | 渐变与组合式插画 | 插画 | 链接可达，未逐项体验 | | [A06 fffuel](https://www.fffuel.co/) | 图案、纹理、噪声、形状与背景生成 | SVG 生成工具 | 链接可达，未逐项体验 | | [A07 CSS Gradient](https://cssgradient.io/) | 渐变配色与 CSS 生成 | CSS 工具 | 链接可达，未逐项体验 | | [A08 Learn UI Mesh Gradient](https://www.learnui.design/tools/mesh-gradient-generator.html) | 网格渐变背景 | 图像生成工具 | 链接可达，未逐项体验 | ### 照片与视频 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [P01 Unsplash](https://unsplash.com/) | 摄影素材；采用前核对具体图片条件 | 照片 | 本轮访问受限或失败，保留入口 | | [P02 Pexels](https://www.pexels.com/) | 摄影与视频素材 | 照片 / 视频 | 本轮访问受限或失败，保留入口 | | [P03 Nappy](https://www.nappy.co/) | 人物与生活摄影 | 照片 | 链接可达，未逐项体验 | | [P04 Shotstash](https://www.shotstash.com/) | 摄影素材 | 照片 | 链接可达，未逐项体验 | | [P05 Coverr](https://coverr.co/) | 视频背景与素材 | 视频 | 链接可达，未逐项体验 | | [P06 Mixkit](https://mixkit.co/) | 影像、音频及剪辑模板 | 视频 / 音频 / 模板 | 链接可达，未逐项体验 | | [P07 Videvo](https://www.videvo.net/) | 视频素材；站点和许可需采用前核对 | 视频 / 音频 | 本轮访问受限或失败，保留入口 | ### 字体与呈现工具 | 来源 | 可找什么 | 栈 / 形式 | 核验状态 | |---|---|---|---| | [F01 Google Fonts](https://fonts.google.com/) | 字体预览与选型，核对中文覆盖 | 字体 | 链接可达，未逐项体验 | | [F02 Fontshare](https://www.fontshare.com/) | 字体家族与配对预览 | 字体 | 链接可达，未逐项体验 | | [F03 BrowserFrame](https://browserframe.com/) | 给截图添加浏览器展示框 | 浏览器外框 | 链接可达，未逐项体验 | | [F04 DeviceShots](https://deviceshots.com/) | 设备场景中的截图展示 | 设备外框 | 链接可达，未逐项体验 | | [F05 Cleanmock](https://cleanmock.com/) | 页面与设备展示模型 | 展示模型 | 链接可达，未逐项体验 | | [F06 Mockup.style](https://mockup.style/) | 设备与物料展示参考 | 展示模型 | 本轮访问受限或失败，保留入口 | | [F07 Ray.so](https://ray.so/) | 代码片段的视觉展示 | 代码展示 | 链接可达，未逐项体验 | ## 本地素材与模板 ## 告诉我你的判断 以下是可改写的指令示例，不是已记录的偏好。 ```text 我选 E14 的 C02b / Spell Tilt Card。 只借它的倾斜幅度和回弹，不借配色和内容。 相比 C01，我更喜欢……；不喜欢…… 适用范围：这次活动页的产品卡片。 ``` 先表达、后实现；只借指定特征。一次局部选择不会自动变成全局风格。目录不触发安装、发布或长期记忆写入。