# Aglaia 阿格莱亚

> Aglaia is a free, open-source design resource site for the AI era: standard names for every UI building block (bilingual zh/en), fill-in prompt flows that make AI generate components and pages, live effect sandboxes, design principles and hands-on instruments, and a license-labelled index of open-source resources. Content CC BY 4.0, code MIT. No paid features.

Machine registry (shadcn-compatible): https://aglaia.design/registry.json · extended fields: https://aglaia.design/registry-ext.json

## Patterns 模式

- [登录与注册](https://aglaia.design/components/patterns/auth): 账号入口这一整套：登录、注册、验证码、第三方登录、忘记密码、协议确认。
- [博客与内容](https://aglaia.design/components/patterns/blog-content): 文章型内容的组织：文章列表、文章页、标签、作者、订阅入口。
- [底部标签栏](https://aglaia.design/components/patterns/bottom-tab-bar): App 底部固定的一排图标+文字，3–5 个一级入口，拇指一伸就够得到，是移动 App 最常用的主导航。
- [面包屑](https://aglaia.design/components/patterns/breadcrumb): 一行「首页 / 分类 / 当前页」的小字，告诉用户自己在网站层级里的哪一层，并能一键跳回上层。
- [卡片](https://aglaia.design/components/patterns/card): 一块内容一个卡：图、标题、摘要、操作圈在一张「卡片」里，是商品、文章、用户信息最常用的容器。
- [支付与结算](https://aglaia.design/components/patterns/checkout): 从购物车到付款成功的一段路：清单确认、地址、优惠、支付方式、订单结果。
- [仪表盘](https://aglaia.design/components/patterns/dashboard): 数据工作的首页：关键指标卡片打头，图表和数据表跟上，一眼看清现在怎么样。
- [数据展示](https://aglaia.design/components/patterns/data-display): 把数据给人看的组件族：表格、统计数字、时间线、徽章、标签、树形结构。
- [详情页](https://aglaia.design/components/patterns/detail-page): 单个对象的完整页面：商品详情、文章详情、个人主页——大图/标题开头，信息全面展开，底部放行动按钮。
- [侧边抽屉](https://aglaia.design/components/patterns/drawer-sidebar): 从屏幕侧边滑出的导航面板：移动端藏在汉堡菜单后，桌面端常驻为左侧栏。
- [电商](https://aglaia.design/components/patterns/ecommerce): 卖货的一套组合：店铺首页、商品列表、商品卡、购物车、结算，与「交易」功能组紧密相连。
- [动效与背景](https://aglaia.design/components/patterns/effects-backgrounds): 让界面动起来、衬起来的那一层：玻璃拟态、渐变、粒子、转场——本站「效果」板块的主场。
- [空状态](https://aglaia.design/components/patterns/empty-states): 没有东西时给人看的那一屏：无数据、无网络、无搜索结果、无权限——都要有说法、有下一步。
- [错误页](https://aglaia.design/components/patterns/errors): 出错时给人看的页面：404、网络错误、权限不足、表单报错——说清发生了什么和能做什么。
- [表单](https://aglaia.design/components/patterns/forms): 让用户输入和选择的一整套控件：输入框、选择器、开关、单选多选、滑杆、日期、评分、步进器。
- [宫格与瀑布流](https://aglaia.design/components/patterns/grid-masonry): 多列排布图片或卡片：宫格等高对齐，瀑布流按内容高度错落，适合逛和发现。
- [图标](https://aglaia.design/components/patterns/icons): 小而关键的图形语言：系统图标、品牌图标、状态图标，一套图标必须风格统一。
- [插画](https://aglaia.design/components/patterns/illustrations): 场景插画、人物、占位图：给空状态、引导页、营销页补上人味和画面感。
- [列表](https://aglaia.design/components/patterns/list): 内容最基础的组织方式：一行一条，可单行可多行，可分组，可带左滑操作和右侧配件。
- [加载与反馈](https://aglaia.design/components/patterns/loading-feedback): 系统状态的传话筒：加载动画、骨架屏、进度条、Toast、成功/失败提示、徽章。
- [营销页](https://aglaia.design/components/patterns/marketing-landing): 说服访客行动的单页：Hero 讲清价值，特性、社会证明、定价、FAQ 层层推进，最后落到 CTA。
- [媒体](https://aglaia.design/components/patterns/media): 图片与音视频的呈现：轮播、画廊、视频播放器、音频条、封面图。
- [消息与通知](https://aglaia.design/components/patterns/messages): 聊天与系统消息的归宿：会话列表、通知列表、消息中心，带未读角标和已读状态。
- [弹窗与浮层](https://aglaia.design/components/patterns/modals-overlays): 浮在当前页面之上的层：对话框、底部弹层、抽屉、气泡菜单——打断或补充当前任务。
- [新手引导](https://aglaia.design/components/patterns/onboarding): 新用户第一次打开时看到的几屏介绍或分步设置：讲清价值、拿到必要信息、送用户到第一个「啊哈」时刻。
- [个人中心](https://aglaia.design/components/patterns/profile): 「我的」页面：头像与资料打头，下面是订单、收藏、成就等属于用户自己的入口集合。
- [搜索](https://aglaia.design/components/patterns/search): 让用户主动找东西的一套：搜索框、联想词、历史记录、结果页、筛选与排序。
- [设置](https://aglaia.design/components/patterns/settings): 账号、通知、隐私、外观、关于——所有「不常用但必须有」的开关和选项的归宿。
- [标签页与分段控制](https://aglaia.design/components/patterns/tabs-segmented): 同一屏里切换内容分组的控件：标签页偏「换一组内容」，分段控制偏「换一种视图」，外形像药丸或下划线。
- [主题与令牌](https://aglaia.design/components/patterns/theme-tokens): 全站长相的源头：颜色、字阶、间距、圆角、深色模式——都收敛成一组可复用的令牌。
- [顶部导航](https://aglaia.design/components/patterns/top-navigation): 页面顶部的一条横栏：左边返回或菜单，中间标题，右边放当前页最常用的操作。
- [排版](https://aglaia.design/components/patterns/typography): 文字的秩序：标题层级、正文字号行高、数字、引用、代码——读得舒服全靠它。

## Components 组件

- [底部弹层](https://aglaia.design/components/entries/bottom-sheet): 从屏幕底部升起来的半屏面板：分享、筛选、选规格——拇指够得着，还能下拉关掉。
- [面包屑](https://aglaia.design/components/entries/breadcrumb-nav): 「首页 / 分类 / 当前页」一行小字：告诉你在哪一层，还能点回去。
- [基础卡片](https://aglaia.design/components/entries/card-basic): 一块内容一个卡：图在上、标题摘要在下，带一两个操作——商品、文章、课程都用它装。
- [购物车条目](https://aglaia.design/components/entries/cart-item): 购物车里的一行：小图、名字、价格、数量步进器和一个勾选框，左滑还能删。
- [结算表单](https://aglaia.design/components/entries/checkout-form): 付钱前最后一段路：确认商品、选地址、看优惠、选支付方式、点下单。
- [仪表盘指标卡组](https://aglaia.design/components/entries/dashboard-cards): 后台首页那排数字卡：今日订单、新增用户、转化率，每个带涨跌箭头和小趋势。
- [数据表格](https://aglaia.design/components/entries/data-table): 后台的命根子：一列一个字段，表头能排序，行尾有操作，底部分页。
- [详情页头图区](https://aglaia.design/components/entries/detail-hero): 详情页开头那块：大图或封面、标题、关键信息，再往下才是正文，底部常吸一个购买/收藏条。
- [侧边导航（抽屉/侧栏）](https://aglaia.design/components/entries/drawer-nav): 从左边滑出来或常驻左边的导航：一级、二级菜单都在里面，后台和复杂应用的主导航。
- [空状态](https://aglaia.design/components/entries/empty-state): 没东西时出现的那块：一张小插画、一句说明、一个「去添加」的按钮。
- [404 错误页](https://aglaia.design/components/entries/error-404): 走错路时看到的那页：一个大大的 404、一句人话、两个按钮（回首页、去搜索）。
- [分组列表](https://aglaia.design/components/entries/grouped-list): 带组头的列表：组名小字压在每组上方，滚动时组头吸顶，A–Z 索引还能点字母跳。
- [鸿蒙分组列表（自绘示意）](https://aglaia.design/components/entries/harmonyos-list): 鸿蒙设置与内容页的分组列表：按华为设计规范要点自绘示意，非官方素材。
- [鸿蒙底部标签栏（自绘示意）](https://aglaia.design/components/entries/harmonyos-tabs): 鸿蒙 App 的底部主导航：按华为设计规范的要点自绘示意，非官方素材。
- [落地页 Hero](https://aglaia.design/components/entries/hero-section): 落地页第一屏：一句大标题、一行副文案、一个大按钮，右边或下边一张产品图。
- [图片轮播](https://aglaia.design/components/entries/image-carousel): 一排图左右滑着看：商品图、活动 banner 都住这里，下面一排小圆点报位置。
- [基础列表行](https://aglaia.design/components/entries/list-item): 最万能的内容行：左边头像或图标，中间标题与副文案，右边箭头或数值。
- [登录表单](https://aglaia.design/components/entries/login-form): 输账号密码（或验证码）进门的那张表单：字段少、报错清、还能第三方一键登录。
- [瀑布流](https://aglaia.design/components/entries/masonry-grid): 两列错落排图：高的高矮的矮，像小红书和 Pinterest 那样越逛越上头。
- [底部标签栏（移动端）](https://aglaia.design/components/entries/mobile-tab-bar): App 底部那排一级入口：图标在上、文字在下，3–5 个，拇指最容易够到。
- [对话框（弹窗）](https://aglaia.design/components/entries/modal-dialog): 屏幕中间弹出的那个框：背景变暗，只能先处理它——确认删除、填写小表单都靠它。
- [通知列表](https://aglaia.design/components/entries/notification-list): 消息中心的那一列：谁在什么时候发了什么，未读的有红点，看完能一键全标已读。
- [新手引导轮播](https://aglaia.design/components/entries/onboarding-carousel): 第一次打开 App 时的那几屏：大图、一个卖点、一排圆点，最后落到「开始使用」。
- [选择器](https://aglaia.design/components/entries/picker-select): 点一下弹出一列选项让你挑：城市、日期、分类——不用打字，从现成的里选。
- [定价表](https://aglaia.design/components/entries/pricing-table): 三列套餐并排比：免费、专业、企业，中间那列放大加框写着「最受欢迎」。
- [商品卡](https://aglaia.design/components/entries/product-card): 卖货的卡：商品图、名字、价格、销量或评价，点进去就是详情。
- [个人中心头部](https://aglaia.design/components/entries/profile-header): 「我的」页面最上面那块：头像、昵称、一行数据（关注/粉丝/积分）和编辑按钮。
- [搜索框](https://aglaia.design/components/entries/search-bar): 带放大镜的那个输入框：圆角胶囊、浅灰底，里面写着「搜你想要的」。
- [搜索结果页](https://aglaia.design/components/entries/search-results): 搜完看到的那一页：顶部留着搜索词，下面结果列表，带筛选、排序和「没找到」的兜底。
- [分段控制 / 标签页](https://aglaia.design/components/entries/segmented-control): 同屏切换内容分组的小控件：像药丸的是分段控制，带下划线的是标签页。
- [设置列表](https://aglaia.design/components/entries/settings-list): 一屏开关和选项的集合：分组排列，每行左边是名字、右边是开关、箭头或当前值。
- [骨架屏](https://aglaia.design/components/entries/skeleton-screen): 数据来之前先摆出的灰色轮廓：标题是灰条、图是灰块，一道微光扫过表示在加载。
- [开关行](https://aglaia.design/components/entries/switch-row): 左边一行字、右边一个开关的设置行：点一下立刻生效，不需要保存按钮。
- [文本输入框](https://aglaia.design/components/entries/text-field): 填字的框：上面是标签，下面是输入区，有提示、有报错，是表单的最小单位。
- [轻提示 Toast](https://aglaia.design/components/entries/toast): 屏幕边上飘一下就消失的小条：「已保存」「复制成功」——不打断你手上的事。
- [顶部应用栏](https://aglaia.design/components/entries/top-app-bar): 页面最上面那条：返回、标题、常用操作，一眼看清「我在哪、能干嘛」。
- [网站页眉导航](https://aglaia.design/components/entries/web-header): 网站最上面那条横栏：Logo 在左，导航在中，登录/注册按钮在右，滚动时常吸顶。

## Prompts 提示词（组件级）

- [底部弹层 · 提示词](https://aglaia.design/prompts/bottom-sheet-prompt): 生成「底部弹层」的填空式提示词
- [面包屑 · 提示词](https://aglaia.design/prompts/breadcrumb-nav-prompt): 生成「面包屑」的填空式提示词
- [基础卡片 · 提示词](https://aglaia.design/prompts/card-basic-prompt): 生成「基础卡片」的填空式提示词
- [购物车条目 · 提示词](https://aglaia.design/prompts/cart-item-prompt): 生成「购物车条目」的填空式提示词
- [结算表单 · 提示词](https://aglaia.design/prompts/checkout-form-prompt): 生成「结算表单」的填空式提示词
- [仪表盘指标卡组 · 提示词](https://aglaia.design/prompts/dashboard-cards-prompt): 生成「仪表盘指标卡组」的填空式提示词
- [数据表格 · 提示词](https://aglaia.design/prompts/data-table-prompt): 生成「数据表格」的填空式提示词
- [详情页头图区 · 提示词](https://aglaia.design/prompts/detail-hero-prompt): 生成「详情页头图区」的填空式提示词
- [侧边导航（抽屉/侧栏） · 提示词](https://aglaia.design/prompts/drawer-nav-prompt): 生成「侧边导航（抽屉/侧栏）」的填空式提示词
- [空状态 · 提示词](https://aglaia.design/prompts/empty-state-prompt): 生成「空状态」的填空式提示词
- [404 错误页 · 提示词](https://aglaia.design/prompts/error-404-prompt): 生成「404 错误页」的填空式提示词
- [手风琴折叠 · 提示词](https://aglaia.design/prompts/fx-accordion): 生成「手风琴折叠」效果的填空式提示词
- [数字滚动计数 · 提示词](https://aglaia.design/prompts/fx-animated-counter): 生成「数字滚动计数」效果的填空式提示词
- [头像堆叠 · 提示词](https://aglaia.design/prompts/fx-avatar-stack): 生成「头像堆叠」效果的填空式提示词
- [按钮按压感 · 提示词](https://aglaia.design/prompts/fx-button-press): 生成「按钮按压感」效果的填空式提示词
- [卡片悬停上浮 · 提示词](https://aglaia.design/prompts/fx-card-lift): 生成「卡片悬停上浮」效果的填空式提示词
- [自定义多选框 · 提示词](https://aglaia.design/prompts/fx-custom-checkbox): 生成「自定义多选框」效果的填空式提示词
- [自定义滑杆 · 提示词](https://aglaia.design/prompts/fx-custom-range): 生成「自定义滑杆」效果的填空式提示词
- [自定义开关 · 提示词](https://aglaia.design/prompts/fx-custom-toggle): 生成「自定义开关」效果的填空式提示词
- [点阵背景 · 提示词](https://aglaia.design/prompts/fx-dot-grid-bg): 生成「点阵背景」效果的填空式提示词
- [下拉菜单 · 提示词](https://aglaia.design/prompts/fx-dropdown-menu): 生成「下拉菜单」效果的填空式提示词
- [入场动效 · 提示词](https://aglaia.design/prompts/fx-entrance-motion): 生成「入场动效」效果的填空式提示词
- [焦点环 · 提示词](https://aglaia.design/prompts/fx-focus-ring): 生成「焦点环」效果的填空式提示词
- [毛玻璃拟态 · 提示词](https://aglaia.design/prompts/fx-glassmorphism): 生成「毛玻璃拟态」效果的填空式提示词
- [流光边框 · 提示词](https://aglaia.design/prompts/fx-gradient-border): 生成「流光边框」效果的填空式提示词
- [网格线背景 · 提示词](https://aglaia.design/prompts/fx-grid-lines-bg): 生成「网格线背景」效果的填空式提示词
- [图片悬停放大 · 提示词](https://aglaia.design/prompts/fx-image-zoom): 生成「图片悬停放大」效果的填空式提示词
- [无缝跑马灯 · 提示词](https://aglaia.design/prompts/fx-marquee): 生成「无缝跑马灯」效果的填空式提示词
- [网格渐变背景 · 提示词](https://aglaia.design/prompts/fx-mesh-gradient): 生成「网格渐变背景」效果的填空式提示词
- [新拟态 · 提示词](https://aglaia.design/prompts/fx-neumorphism): 生成「新拟态」效果的填空式提示词
- [噪点质感 · 提示词](https://aglaia.design/prompts/fx-noise-texture): 生成「噪点质感」效果的填空式提示词
- [环形进度 · 提示词](https://aglaia.design/prompts/fx-progress-ring): 生成「环形进度」效果的填空式提示词
- [呼吸徽标 · 提示词](https://aglaia.design/prompts/fx-pulsing-badge): 生成「呼吸徽标」效果的填空式提示词
- [骨架屏微光 · 提示词](https://aglaia.design/prompts/fx-shimmer-skeleton): 生成「骨架屏微光」效果的填空式提示词
- [滑动标签页 · 提示词](https://aglaia.design/prompts/fx-sliding-tabs): 生成「滑动标签页」效果的填空式提示词
- [聚光灯卡片 · 提示词](https://aglaia.design/prompts/fx-spotlight-card): 生成「聚光灯卡片」效果的填空式提示词
- [步骤指示器 · 提示词](https://aglaia.design/prompts/fx-steps-indicator): 生成「步骤指示器」效果的填空式提示词
- [条纹进度条 · 提示词](https://aglaia.design/prompts/fx-striped-progress): 生成「条纹进度条」效果的填空式提示词
- [文字微光 · 提示词](https://aglaia.design/prompts/fx-text-shimmer): 生成「文字微光」效果的填空式提示词
- [3D 倾斜卡片 · 提示词](https://aglaia.design/prompts/fx-tilt-card): 生成「3D 倾斜卡片」效果的填空式提示词
- [气泡提示 · 提示词](https://aglaia.design/prompts/fx-tooltip): 生成「气泡提示」效果的填空式提示词
- [分组列表 · 提示词](https://aglaia.design/prompts/grouped-list-prompt): 生成「分组列表」的填空式提示词
- [鸿蒙分组列表（自绘示意） · 提示词](https://aglaia.design/prompts/harmonyos-list-prompt): 生成「鸿蒙分组列表（自绘示意）」的填空式提示词
- [鸿蒙底部标签栏（自绘示意） · 提示词](https://aglaia.design/prompts/harmonyos-tabs-prompt): 生成「鸿蒙底部标签栏（自绘示意）」的填空式提示词
- [落地页 Hero · 提示词](https://aglaia.design/prompts/hero-section-prompt): 生成「落地页 Hero」的填空式提示词
- [图片轮播 · 提示词](https://aglaia.design/prompts/image-carousel-prompt): 生成「图片轮播」的填空式提示词
- [基础列表行 · 提示词](https://aglaia.design/prompts/list-item-prompt): 生成「基础列表行」的填空式提示词
- [登录表单 · 提示词](https://aglaia.design/prompts/login-form-prompt): 生成「登录表单」的填空式提示词
- [瀑布流 · 提示词](https://aglaia.design/prompts/masonry-grid-prompt): 生成「瀑布流」的填空式提示词
- [底部标签栏（移动端） · 提示词](https://aglaia.design/prompts/mobile-tab-bar-prompt): 生成「底部标签栏（移动端）」的填空式提示词
- [对话框（弹窗） · 提示词](https://aglaia.design/prompts/modal-dialog-prompt): 生成「对话框（弹窗）」的填空式提示词
- [通知列表 · 提示词](https://aglaia.design/prompts/notification-list-prompt): 生成「通知列表」的填空式提示词
- [新手引导轮播 · 提示词](https://aglaia.design/prompts/onboarding-carousel-prompt): 生成「新手引导轮播」的填空式提示词
- [选择器 · 提示词](https://aglaia.design/prompts/picker-select-prompt): 生成「选择器」的填空式提示词
- [定价表 · 提示词](https://aglaia.design/prompts/pricing-table-prompt): 生成「定价表」的填空式提示词
- [商品卡 · 提示词](https://aglaia.design/prompts/product-card-prompt): 生成「商品卡」的填空式提示词
- [个人中心头部 · 提示词](https://aglaia.design/prompts/profile-header-prompt): 生成「个人中心头部」的填空式提示词
- [搜索框 · 提示词](https://aglaia.design/prompts/search-bar-prompt): 生成「搜索框」的填空式提示词
- [搜索结果页 · 提示词](https://aglaia.design/prompts/search-results-prompt): 生成「搜索结果页」的填空式提示词
- [分段控制 / 标签页 · 提示词](https://aglaia.design/prompts/segmented-control-prompt): 生成「分段控制 / 标签页」的填空式提示词
- [设置列表 · 提示词](https://aglaia.design/prompts/settings-list-prompt): 生成「设置列表」的填空式提示词
- [骨架屏 · 提示词](https://aglaia.design/prompts/skeleton-screen-prompt): 生成「骨架屏」的填空式提示词
- [开关行 · 提示词](https://aglaia.design/prompts/switch-row-prompt): 生成「开关行」的填空式提示词
- [文本输入框 · 提示词](https://aglaia.design/prompts/text-field-prompt): 生成「文本输入框」的填空式提示词
- [轻提示 Toast · 提示词](https://aglaia.design/prompts/toast-prompt): 生成「轻提示 Toast」的填空式提示词
- [顶部应用栏 · 提示词](https://aglaia.design/prompts/top-app-bar-prompt): 生成「顶部应用栏」的填空式提示词
- [网站页眉导航 · 提示词](https://aglaia.design/prompts/web-header-prompt): 生成「网站页眉导航」的填空式提示词

## Scenes 场景提示词

- [后台仪表盘](https://aglaia.design/prompts/scene-admin-dashboard): 管理后台首页：侧边导航 + 指标卡组 + 数据表格的经典三件套。
- [App 三屏骨架（首页+列表+详情）](https://aglaia.design/prompts/scene-app-core): 移动 App 最常见的三屏：底部标签栏框架 + 列表首页 + 内容详情。
- [登录注册流程](https://aglaia.design/prompts/scene-auth-flow): 从打开 App 到登录成功的一整套：登录表单 + 输入规范 + 结果反馈。
- [结算流程](https://aglaia.design/prompts/scene-checkout): 从购物车到下单成功：条目确认、结算表单、步骤指示与结果反馈。
- [内容详情页](https://aglaia.design/prompts/scene-content-detail): 文章/内容详情整页：顶栏、头图区、正文与底部操作弹层。
- [产品落地页](https://aglaia.design/prompts/scene-landing-page): 官网落地页整页：页眉、Hero、定价表的转化三段式。
- [新手引导流程](https://aglaia.design/prompts/scene-onboarding-flow): 首启三屏引导 + 登录的完整首访路径，讲完价值再要账号。
- [个人中心](https://aglaia.design/prompts/scene-profile-center): 「我的」整页：头部资料、通知入口与设置列表的标准组合。
- [设置页](https://aglaia.design/prompts/scene-settings-page): 完整设置页：分组列表与开关行的组合，含危险区。
- [商城首页](https://aglaia.design/prompts/scene-shop-home): 电商 App 首页：搜索、轮播、商品瀑布与底部导航的完整组合。

## Effects 效果

- [手风琴折叠](https://aglaia.design/effects/accordion): 问答一条条收起，点标题展开答案——原生 details 零 JS
- [数字滚动计数](https://aglaia.design/effects/animated-counter): 数字从 0 滚到目标值，先快后慢稳稳停住
- [头像堆叠](https://aglaia.design/effects/avatar-stack): 一排头像互相压住一部分，一眼看出「很多人参与」
- [按钮按压感](https://aglaia.design/effects/button-press): :active 时按钮沉下去 3 像素，底影同步变薄
- [卡片悬停上浮](https://aglaia.design/effects/card-lift): 鼠标一放上去，卡片抬起几像素、影子变深
- [自定义多选框](https://aglaia.design/effects/custom-checkbox): 藏起原生方框，换一个圆角方形 + 勾的自有样式
- [自定义滑杆](https://aglaia.design/effects/custom-range): 给原生 range 换上品牌样式：填充轨道 + 圆形滑块
- [自定义开关](https://aglaia.design/effects/custom-toggle): 轨道 + 滑块的开关，滑块滑过去就是「开」
- [点阵背景](https://aglaia.design/effects/dot-grid-bg): 等距小圆点铺满背景，像方格纸一样的隐形坐标系
- [下拉菜单](https://aglaia.design/effects/dropdown-menu): 点开一列操作项，带分组分隔线和滑入动画
- [入场动效](https://aglaia.design/effects/entrance-motion): 一组元素逐个淡入上浮，像排队进场
- [焦点环](https://aglaia.design/effects/focus-ring): 键盘 Tab 走到哪，哪里亮起一圈描边——无障碍的底线
- [毛玻璃拟态](https://aglaia.design/effects/glassmorphism): 半透明面板 + 背景模糊，像一块磨砂玻璃浮在画面上
- [流光边框](https://aglaia.design/effects/gradient-border): 一圈渐变光沿着边框缓慢旋转，专为重点内容准备
- [网格线背景](https://aglaia.design/effects/grid-lines-bg): 两组淡线交叉成蓝图网格，科技感的经典垫底
- [图片悬停放大](https://aglaia.design/effects/image-zoom): 鼠标放上图片，画面在框里慢慢推近
- [无缝跑马灯](https://aglaia.design/effects/marquee): 一排内容匀速横滚，首尾相接看不出断点
- [网格渐变背景](https://aglaia.design/effects/mesh-gradient): 几团柔光色块互相交融，缓慢漂移的高级感背景
- [新拟态](https://aglaia.design/effects/neumorphism): 元素像从背景里「挤」出来一样，一道亮影一道暗影塑造体积
- [噪点质感](https://aglaia.design/effects/noise-texture): 给大色块盖一层极细的噪点，去掉「塑料感」
- [环形进度](https://aglaia.design/effects/progress-ring): 一圈 SVG 弧线画出完成度，中心放百分比
- [呼吸徽标](https://aglaia.design/effects/pulsing-badge): 小圆点一圈圈向外扩散波纹，专表「正在进行」
- [骨架屏微光](https://aglaia.design/effects/shimmer-skeleton): 数据没到之前，用灰块占位，一道微光循环扫过
- [滑动标签页](https://aglaia.design/effects/sliding-tabs): 标签下的一条墨线滑到当前标签，像墨水在流动
- [聚光灯卡片](https://aglaia.design/effects/spotlight-card): 一团光跟着鼠标在卡片上走，照到哪亮到哪
- [步骤指示器](https://aglaia.design/effects/steps-indicator): 圆点 + 连线画出流程进度：已完成打勾，当前步高亮
- [条纹进度条](https://aglaia.design/effects/striped-progress): 斜条纹在填充段里持续流动，一看就知道「还在干活」
- [文字微光](https://aglaia.design/effects/text-shimmer): 一道亮光扫过文字本身，常见于「AI 正在生成」的提示
- [3D 倾斜卡片](https://aglaia.design/effects/tilt-card): 卡片随鼠标方向微微倾斜，像拿在手里的一张实体卡
- [气泡提示](https://aglaia.design/effects/tooltip): 悬停或聚焦时在元素上方浮出一句小字解释

## Learn 学习指南

- [设计评审清单与书单](https://aglaia.design/learn/checklist): 交付前过一遍 18 项评审清单；想再往深走，六本书按顺序读。
- [交互设计](https://aglaia.design/learn/disciplines/discipline-interaction): 管「人和系统如何对话」：别让用户多想、多等、多记。
- [动效设计](https://aglaia.design/learn/disciplines/discipline-motion): 动效不是装饰，是解释：东西从哪来、到哪去、为什么变。
- [UI / UX 设计](https://aglaia.design/learn/disciplines/discipline-ui-ux): UX 回答「这件事对用户成不成立」，UI 回答「这一屏长什么样、怎么操作」——先验证流程，再打磨界面。
- [视觉设计](https://aglaia.design/learn/disciplines/discipline-visual): 管「眼睛如何组织信息」：视觉层级是阅读顺序的工程，不是审美偏好。
- [对比度检查：好看之前，先要看得清](https://aglaia.design/learn/lab/lab-contrast): 选文字色和背景色，实时按 WCAG 公式算对比度，正文 ≥ 4.5:1 才算看得清。
- [动效实验室：缓动曲线](https://aglaia.design/learn/lab/lab-easing): 选一条曲线看小球如何走完同一段路——进场 ease-out、离场 ease-in，匀速只适合进度与旋转。
- [费茨定律：到达时间 = 距离 ÷ 尺寸](https://aglaia.design/learn/lab/lab-fitts): 轮流点小目标和大目标各测一轮，亲手量出「目标越大越近越快」。
- [字阶生成：标题不是「调大一点」](https://aglaia.design/learn/lab/lab-type-scale): 拖动基准字号，看整组字号如何按 1.25 的比例一起呼吸。
- [美学与极简](https://aglaia.design/learn/principles): 界面不放无关信息——每多一个元素，都在和重要信息抢注意力。
- [美即好用效应](https://aglaia.design/learn/principles): 好看的界面会被认为更好用——第一印象的宽容度来自审美。
- [闭合](https://aglaia.design/learn/principles): 大脑会自动补全缺失的部分，把残缺图形看成整体。
- [共同命运](https://aglaia.design/learn/principles): 一起动的元素会被看成一组。
- [一致性与标准](https://aglaia.design/learn/principles): 同一件事只用一种说法、一个位置、一个手势。
- [连续](https://aglaia.design/learn/principles): 眼睛会沿着线条和对齐轴继续看下去。
- [Doherty 阈值](https://aglaia.design/learn/principles): 系统在 400ms 内响应，用户才不会出戏；超过就掉注意力。
- [防错优于纠错](https://aglaia.design/learn/principles): 与其写好报错文案，不如让错误根本没机会发生。
- [帮用户识别并改错](https://aglaia.design/learn/principles): 报错用 plain language：说清出了什么问题、怎么解决，不用错误码吓人。
- [图底关系](https://aglaia.design/learn/principles): 人会自动区分主体与背景，靠的是对比和层级。
- [费茨定律](https://aglaia.design/learn/principles): 到达目标的时间由距离和大小决定：目标越大、越近，越易点中。
- [灵活与效率](https://aglaia.design/learn/principles): 为新手保持简单，也给熟手留加速器：快捷键、默认值、最近使用。
- [帮助与文档](https://aglaia.design/learn/principles): 最好不用文档也能上手；真需要时，文档要可搜、按任务组织、篇幅短。
- [希克定律](https://aglaia.design/learn/principles): 选项越多、越复杂，做决定越慢。
- [雅各布定律](https://aglaia.design/learn/principles): 用户大部分时间在别人的产品上，他们希望你的产品也长那样。
- [贴合真实世界](https://aglaia.design/learn/principles): 用用户的语言和现实中的概念说话，而不是系统内部术语。
- [米勒定律](https://aglaia.design/learn/principles): 工作记忆一次只能装下约 7（±2）个信息块。
- [奥卡姆剃刀](https://aglaia.design/learn/principles): 如无必要，勿增实体：最简单的方案通常是对的。
- [峰终定律](https://aglaia.design/learn/principles): 人们对体验的记忆，取决于峰值时刻和结束时刻，而非全程平均。
- [简洁](https://aglaia.design/learn/principles): 大脑倾向于把复杂图形理解成最简单的整体。
- [邻近](https://aglaia.design/learn/principles): 挨得近的元素会被看成一组——分组先靠距离，不靠框线。
- [识别优于回忆](https://aglaia.design/learn/principles): 把选项和信息摆出来，别让用户靠脑子记上一步。
- [相似](https://aglaia.design/learn/principles): 长得像的元素会被认为功能相关。
- [泰斯勒定律](https://aglaia.design/learn/principles): 每个系统的复杂度守恒，只能转移，不能消灭。
- [用户控制与自由](https://aglaia.design/learn/principles): 用户常点错——给他们一个明确的「紧急出口」和撤销。
- [系统状态可见](https://aglaia.design/learn/principles): 通过及时反馈，让用户始终知道系统正在发生什么。
- [冯·雷斯托夫效应](https://aglaia.design/learn/principles): 与众不同者被记住：一堆相似元素里，异类最先被看见。

## Resources 外部资源

- [AdminLTE 后台模板](https://aglaia.design/resources): Bootstrap 系后台模板的常青树：稳重、齐全，企业内部系统常用。
- [Animista 动画预设](https://aglaia.design/resources): CSS 动画预设原型站：点选预设、调参数、复制代码，入场/强调动画的灵感库。
- [Ant Design（蚂蚁）](https://aglaia.design/resources): 国内中后台的事实标准：表格、表单、列表都是行业参照物。
- [Apple 人机界面指南 HIG（仅参考）](https://aglaia.design/resources): iOS 设计的官方规范：只读、只参考。本站绝不打包 Apple 官方套件与 SF Pro 字体。
- [ArkUI（鸿蒙）](https://aglaia.design/resources): HarmonyOS 的官方 UI 框架底座（开源部分）：做鸿蒙界面先看它，声明式写法与 ArkTS 配套。
- [Astro Paper 博客模板](https://aglaia.design/resources): 极简博客模板的范本：排版干净、性能满分，写博客直接开用。
- [AstroWind 落地页模板](https://aglaia.design/resources): Astro + Tailwind 的落地页与博客范式：Hero、特性、定价、FAQ 一应俱全。
- [bolt.diy（开源 AI 建站）](https://aglaia.design/resources): 开源 AI 建站工具：它的系统提示词（prompts.ts）是学「怎么让 AI 写界面」的最佳范本。
- [Carbon（IBM）](https://aglaia.design/resources): IBM 的设计系统：Token 体系与数据密集型界面的标杆，后台产品必读参考。
- [Chakra UI](https://aglaia.design/resources): 以可访问性为底线的 React 组件库：样式用 props 写，上手快。
- [Coolors 配色生成器](https://aglaia.design/resources): 空格连打生成配色的国民工具：锁定主色再迭代，导出色板给设计与开发共用。
- [CSS Loaders 加载动画集](https://aglaia.design/resources): 纯 CSS 加载动画合集：600+ 个 spinner 与 loader，复制一段 CSS 就能用。
- [dotLottie 运行时](https://aglaia.design/resources): Lottie 的现代运行时：一个 .lottie 文件打包动画与资源，各端播放一致。
- [Easings 缓动速查](https://aglaia.design/resources): 30 种缓动函数的可视化对照：点开任意一条看曲线、动画预览与 CSS / 代码实现。
- [Figma 入门学习资源](https://aglaia.design/resources): 从官方 Playground 文件到系统课程的路径整理，按「练什么技能」而不是按热度排。
- [Figma 免费模板精选](https://aglaia.design/resources): UI Kit、线框 kit、图标集与设计系统起步文件的精选清单，标注每个文件的确切获取位置。
- [Fluent 2（微软）](https://aglaia.design/resources): 微软的设计语言：桌面与办公场景的规范参照，Token 与主题做法值得学。
- [flutter-shadcn-ui](https://aglaia.design/resources): 把 shadcn/ui 的组件语言搬进 Flutter：同一套设计，两端落地。
- [Forui（Flutter）](https://aglaia.design/resources): 给 Flutter 用的极简风组件库，气质接近 shadcn，桌面与移动通吃。
- [Gestalt（Pinterest）](https://aglaia.design/resources): Pinterest 的设计系统：瀑布流 Masonry 的出处，图片型产品的排布参照。
- [GetWidget（Flutter）](https://aglaia.design/resources): Flutter 老牌组件库，组件数量多、文档全，列表与卡片是强项。
- [gluestack-ui](https://aglaia.design/resources): 可复制源码的跨端组件库（React Native / Web），思路与 shadcn 相近。
- [Google Fonts 字体库](https://aglaia.design/resources): 1,900+ 开源字体家族在线试排：按分类、语言与可变字体筛选，中英文字体搭配先来这里试。
- [HarmonyOS 设计指南（仅参考）](https://aglaia.design/resources): 鸿蒙官方设计指南：只读、只参考。官方资源在取得书面许可前不打包，本站鸿蒙条目为自绘示意 + 规范要点。
- [Iconify 图标检索底座](https://aglaia.design/resources): 把上百套图标集统一成一个检索与调用接口：工作台找图标的中枢。
- [Inter 字体](https://aglaia.design/resources): 为屏幕而生的西文字体：界面里的英文和数字用它基本不会错，本站正文字体。
- [JetBrains Mono 等宽字体](https://aglaia.design/resources): 代码与数字的等宽字体：本站代码字体，数字滚动时不跳宽靠它。
- [LangGPT 提示词结构](https://aglaia.design/resources): 像写代码一样写提示词的结构框架：角色、规则、工作流分节——本站七段式与它同源同理。
- [Laws of UX 定律索引](https://aglaia.design/resources): 定律官网的全量索引：30 条原则逐条链接到定义、要点与延伸阅读，查一条只要十秒。
- [Laws of UX 全解](https://aglaia.design/resources): 28 条定律的图文讲解版：每条给定义、来源与网页设计中的实际例子，适合系统补课。
- [LottieFiles 免费动画库](https://aglaia.design/resources): 最大的 Lottie 动画集市：免费库可商用，下载 JSON 就能在 App 和网页里播。
- [Lucide 图标](https://aglaia.design/resources): 最干净的一套线性图标：线宽统一、风格克制，Web 与 App 都能用，本站图标首选参照。
- [Magic UI 动效组件](https://aglaia.design/resources): React + Tailwind 的动效组件集：跑马灯、光晕、数字滚动都有，本站效果库的重要参考生态。
- [Mantine](https://aglaia.design/resources): React 组件与 hooks 大礼包：100+ 组件，连日期选择这种难啃的都有。
- [Material Design 3 规范](https://aglaia.design/resources): Google 的设计语言全文：Android 与跨端项目的规范源头，Token 体系的参照系。
- [Material Design 入门导览](https://aglaia.design/resources): Google Material 体系的导读：主题、色彩角色、组件与动效规范，配实现提示，适合快速建立框架。
- [Material Symbols 图标](https://aglaia.design/resources): Google 的可变图标字体：粗细、填充可调，Android 与 Material 体系项目的默认图标。
- [Mobbin 模式库导览](https://aglaia.design/resources): 真实上线产品的界面模式库如何用：按屏、按元素、按流程检索，找参考别再翻截图文件夹。
- [Motion 动画引擎](https://aglaia.design/resources): 现代 Web 动画引擎（Framer Motion 的延续）：声明式动画、滚动驱动、手势都拿手。本站动效只用这类 MIT 引擎，不用 GSAP。
- [MUI（Material UI）](https://aglaia.design/resources): React 生态最老牌的 Material 组件库：组件全、文档厚、AI 生成命中率最高之一。
- [NativeWind](https://aglaia.design/resources): 让 React Native 用上 Tailwind 的写法：类名写样式，原生端终于和 Web 端一个心智。
- [NN/g 文章库](https://aglaia.design/resources): 可用性研究的源头：十大原则、用户研究方法、眼动与表单研究，评审时引依据来这里。
- [React Native 模板（Obytes）](https://aglaia.design/resources): Expo 移动 App 的生产级脚手架：导航、状态、表单、测试都预置好，移动模板的分层标杆。
- [Open Doodles 插画](https://aglaia.design/resources): 手绘风免费插画：涂鸦人物与场景，空状态和引导页的常用粮草。
- [Open Lovable](https://aglaia.design/resources): 开源版 AI 建站流程：从一句话到可预览网站的全链路，学流程拆解看它。
- [Open Peeps 人物插画](https://aglaia.design/resources): 可拼装的人物插画系统：脸、发型、姿势自由组合，人物一致性难题的现成解。
- [Paper Shaders 着色器](https://aglaia.design/resources): 现成的 WebGL 着色器背景：网格渐变、波纹、光晕，不写 GLSL 也能用高级背景。
- [Penpot 官方模板文件库](https://aglaia.design/resources): 少有的原生设计文件批量来源：能直接下 .penpot 文件拆解学习，模板入库的种子。
- [Primer（GitHub）](https://aglaia.design/resources): GitHub 自家设计系统：克制、工程化，面包屑与数据展示值得抄作业。
- [Radix UI（无样式原语）](https://aglaia.design/resources): 只管行为不管长相的组件原语：弹层、菜单、开关的键盘与焦点处理都替你做好了。
- [shadcn-admin 后台模板](https://aglaia.design/resources): shadcn/ui 拼出的完整后台：仪表盘、设置、聊天页都有，拆开就是现成的页面范式。
- [shadcn 落地页模板](https://aglaia.design/resources): shadcn/ui 拼的标准落地页：区块拆分清楚，照着区块清单就能拼自己的营销页。
- [shadcn/ui 组件库](https://aglaia.design/resources): 不是装进项目的库，而是把组件源码复制进你自己的仓库——改起来毫无阻力，AI 也最熟它。
- [Simple Icons 品牌图标](https://aglaia.design/resources): 各大品牌 logo 的单色 SVG 合集：放「支持的平台/合作方」时用它，别自己描品牌 logo。
- [思源黑体 Source Han Sans](https://aglaia.design/resources): 中日韩统一黑体：中文界面字体的稳妥选择，字重齐全，开源可商用。
- [SwiftUIX](https://aglaia.design/resources): 给 SwiftUI 补齐缺失的系统级组件，iOS 原生开发的常用扩展库。
- [Tabler Icons 图标](https://aglaia.design/resources): 4000+ 线性图标，数量与质量兼备，后台产品用它基本不用再找第二套。
- [Tabler 后台模板](https://aglaia.design/resources): 老牌免费后台模板：页面量级大、完成度高，后台项目可以直接站在它肩膀上。
- [Tamagui](https://aglaia.design/resources): 一套代码同时跑 Web 和 React Native，样式在编译期优化，跨端项目的种子主力。
- [TDesign（腾讯）](https://aglaia.design/resources): 腾讯出品的全栈设计系统：Web、移动、小程序、桌面都有，国内生态最完整的一套。
- [tsParticles 粒子引擎](https://aglaia.design/resources): 老牌粒子背景引擎：星空、雪花、连线网络，配置即生成，性能可控。
- [Uiverse 社区效果库](https://aglaia.design/resources): 社区共创的 CSS 效果大集市：按钮、加载、卡片效果数千个，找灵感和看实现都方便。
- [unDraw 插画（仅外链）](https://aglaia.design/resources): 最知名的开源风插画站：本站仅外链参考，不打包、不再分发其文件。
- [UX 定律实例讲义](https://aglaia.design/resources): 10 条核心定律的极简版讲义，每条都落到可执行的检查动作，适合评审前速览。
- [WCAG 2.2 无障碍规范](https://aglaia.design/resources): 无障碍的国际标准原文：对比度、焦点、目标尺寸的数字都出自这里。
- [WCAG 无障碍标准](https://aglaia.design/resources): 对比度、焦点、目标尺寸的国际标准入口：做无障碍别靠感觉，条文在这里可查可引。
- [站酷设计导航](https://aglaia.design/resources): 国内设计师的精选导航：作品、课程、赛事与资源入口，找中文语境的灵感与同行作品。

## Tokens 令牌

- [Aglaia Design Tokens](https://aglaia.design/tokens): Aglaia site design tokens (W3C DTCG): black/white/gray palette with off-white base, type scale, spacing, radius, motion.