找到喜欢的界面，体验交互，再读懂它的设计与代码。
在线图鉴：xiiiing.github.io/ui-design-atlas/
这是我整理界面设计与前端实践的个人空间。从一个按钮的反馈、一段动效，到页面区块和完整后台，把值得观察的设计放在一起，方便体验、比较和回看。
每份资源尽量同时呈现实际效果、设计解读、提示词和对应代码，让喜欢的界面有迹可循。设计指导库另外整理可复用的提示词、Skills、设计规范与检查清单，并可组合成自己的项目要求。
| 内容 | 关注什么 |
|---|---|
| 动效 | 进入、悬停、滚动与反馈，观察节奏如何影响体验。 |
| 组件 | 按钮、表单、导航、卡片与数据展示，比较不同状态和交互。 |
| 页面与区块 | 登录、侧栏、仪表盘等界面，观察布局、层级和信息组织。 |
| 完整案例 | 在多页系统中连续浏览，理解组件如何组成完整体验。 |
首页直接进入资源库。默认「全部」交错展示组件、区块、页面和完整案例。手机将六个类型入口分成两行，页面和完整案例可以直接点开。
| 分类 | 可以怎么找 |
|---|---|
| 资源类型 | 浏览全部资源，或只看动效、组件、区块、页面、完整案例。 |
| 用途 | 按按钮、卡片、表单、导航等实际用途查找。 |
| 视觉风格 | 按中性极简、企业应用、编辑式、科技感、瑞士风格或自然柔和查找。 |
展开「用途」选卡片，再展开「风格」选编辑式，可以找到编辑式卡片。再选自然柔和，结果会包含两种风格。同一组支持多选，不同组的条件同时生效。选项旁的数量反映其他条件下的匹配数。
在「全部」或「组件」中只选卡片用途时，点「对比卡片风格」可查看编辑式、瑞士风格、科技感和自然柔和四个示例。已选的关键词和筛选也会缩小对照范围，再点一次可回到普通结果。
已选条件显示在分类下方，可逐项移除或一键清空。主题合集、组件库和技术在「筛选」中。复制当前地址即可分享筛选和对照状态，刷新也会恢复条件。旧的 #discover 链接会保留条件并转入资源库。
紧凑组件默认展示封面，点击「启动预览」或用键盘激活后，可直接在卡片内操作。较大的页面与系统进入宽屏体验页查看。切换桌面、平板或手机尺寸，观察同一界面在不同空间下的表现。 设备按钮固定模拟宽度，长内容在预览内滚动；进入全屏后，“控制”可展开设备、主题与参数，“退出全屏”或 Escape 返回。浏览器不支持全屏 API 时自动使用页内全屏。
卡片常显名称、来源、简介和最多两个标签，更多菜单提供复制提示词与详情入口，支持键盘与触屏。打开详情后，继续查看说明、设计解读、提示词、源码与依赖信息；长提示词和来源信息可折叠，复制按钮始终可用。
喜欢的资源可以收藏或分享，收藏支持导入与导出。图鉴提供中英文和明暗模式；支持主题切换的演示会跟随站点外观，固定配色的示例保留自己的风格。
这里汇集开源界面资源与本站原创案例，保留资源的作者、原始链接和来源说明。
| 来源 | 图鉴中的内容 |
|---|---|
| Magic UI | 动效与交互组件。 |
| Ant Design | 表格、表单、搜索与弹窗示例。 |
| Fluent UI | 数据表格、工具栏、对话框与通知。 |
| shadcn/ui | 登录、注册、侧栏与仪表盘区块。 |
| Shadcn Admin | 多页后台与共享组件。 |
设计解读是本站的观察，提示词是本站的整理；它们与原作者的说明分别标注。演示中的表单和数据操作用于体验交互，不代表真实业务服务。
打开 设计指导，按用途查找提示词、Skills、设计规范和检查清单；资源导航 提供组件库、Skills 集合和学习资料入口。它们可以与界面一起收藏，并通过关联内容互相查阅。
本轮从 BoardUI、Bencho、Libraries.dev、Watermelon UI 和 beUI 免费仓库收录六个可交互组件：思考指示器、滑动确认、上下文用量表、粒子光球、变形频率选择器和展开式标签导航。可直接体验、阅读设计解读与提示词，并查看和下载源码。六家站点的设计评估、Pro 内容边界与选型理由见收录记录。
另有四个 Effect Atlas 动效精选：像素擦除按钮、十字线揭图、共享元素转场和滚动小地图。每个均提供可离线打开的静态演示和原作者许可。
提示词组合器 将需求、规范、界面参考、任务和交付检查组合成可编辑文本，支持复制、Markdown 导出与本地草稿。普通对话提供整理后的任务要点，编程助手模式另外提供完整 Skill 文件。收录和内容核对不等于生成效果已验证。使用、兼容及维护方法见 设计指导说明。
组合器按项目需求、方法与参考、交付要求分组，桌面双栏对照输入和输出，移动端纵向阅读。全站编辑式设计规范、前后截图和验收记录见 改版说明。
使用 Node.js 24.12 或更新版本，执行 npm ci、npm run setup:examples，然后运行 npm run dev，打开 http://127.0.0.1:4173/ui-design-atlas/。主站和两个示例支持自动更新。
完整验证使用 npm run verify；首次运行浏览器测试前执行 npx playwright install chromium。具体命令、热更新边界及架构见 开发说明。
开源资源保留各自的版权与许可，具体版本和原始出处可在资源详情中查看。更多说明见 组件与区块来源、后台案例来源和 图鉴界面参考。
图标使用 Lucide，遵循 ISC 许可；本地字体的许可说明随对应资源保留。
介绍与提示词需按实际演示核对，当前资源只描述自身范围，风格提示词只迁移视觉规则。字段完整不代表语义正确；更新字段、尺寸、动画参数或交互时，同步核对中英文、占位操作及本地存储边界。参见97 项文案核对记录。
content/resources.json 是图鉴资源元数据的唯一来源，sources.json、libraries.json 和 taxonomy.json 定义来源、组件库及分面词汇。修改资源时保留 id 和 type（收藏使用 type:id）；用途、风格、技术及交互使用对应枚举数组。演示自身的数据仍由各示例维护。不要再手工生成或同步目录 JS、示例名称索引。
构建与开发服务共用目录校验和交付规则：主站只加载摘要，完整提示词和规则由 details/ 按资源加载；示例名称索引、源码清单及 ZIP 从当前目录生成。无效枚举、重复标识、缺失引用会报错。派生文件只进入 dist 或开发临时目录。
原创组件可下载独立 HTML；原创页面和案例可下载完整静态 ZIP，解压后在包目录运行普通静态服务器（例如 python3 -m http.server 8000），打开 index.html。React 资源包用于集成，完整项目包按包内 README 安装和运行。所有包沿用原来源、署名和许可。交付文件仅来自指定项目文件和源码/静态资源目录；环境文件、日志、缓存、编辑器备份及越界符号链接不允许进入交付。
用途取自资源的 categories，视觉风格取自 styleIds，标签词汇统一定义在 content/taxonomy.json。链接分别通过 category 和 visual 保存这两组条件，多个值用逗号分隔，例如 #components?category=cards&visual=editorial,natural。卡片风格对照用 #components?category=cards&compare=cards。旧链接中的 style 仍按具体设计体系筛选，source 按来源性质筛选，audience 按使用场景筛选。来源项目用 project。搜索按相关性排序，默认「全部」按四类资源交错排序，其余没有关键词的普通列表按类型分组。
新增或删除交付源文件时同步更新 content/delivery-files.json 的项目文件白名单；普通内容修改不需要更新清单。清单缺失文件或越界路径会报错，未列出的本地源码文件也不会被打包。案例的 pages 只保留页面 ID 引用，名称与描述从对应页面条目解析，避免第二份元数据。
验收浏览器安装使用 npx playwright install --with-deps chromium firefox webkit。npm run verify 执行严格检查、单元测试、一次生产构建、Chromium 全量流程、Firefox/WebKit 核心流程和隔离开发热更新测试；npm test 先构建，只有明确复用已知构建时才使用 npm run test:built。验收服务器由 Playwright 启动，不复用已有服务器。浏览器报告及截图保存在 playwright-report/，尺寸与请求证据随测试报告附加；CI 保存为 atlas-acceptance 产物。
构建时按 esbuild 静态依赖图汇总主文档启动脚本的 gzip 体积，超过 190,000 字节会失败。动态源码模块与 iframe 请求分别记录，结果见 dist/script-budget.json。主站样式按基础、浏览、预览、导航和响应式区域组织于 atlas/styles/；上游归档样式继续独立保存。
详情查看器默认完整留在当前窗口内。全部资源在自动模式中使用预览容器的实际宽高、100% 比例重新排版，组件保持正常字号；手动设备模拟按可用宽度等比适应。桌面关闭“适应画布”可按当前设备的原尺寸滚动查看。长演示内容、源码和说明在各自区域内滚动，外层页面无需下滑。高度不超过 480px 时收起站点导航，可用查看器左上角返回按钮回到资源列表。适配规则与截图。
组件详情在宽屏合并标题与内容操作行，动效参数位于预览工具栏，说明栏减少重复标签与留白。详情说明覆盖在画布右侧，独立滚动；开关详情不改变演示尺寸或位置。窄屏说明覆盖预览，关闭后恢复操作。查看完整画布时可关闭说明或进入全屏。稳定性对比与验证。空间与清晰度对比。
原生页面缩放与经典滚动条也纳入验证：自动预览用容器百分比保持小数尺寸，设备模拟按实际宽度适应，避免 110% 等倍率下反复触发滚动条。缩放稳定性与验证。