{ "accordion": { "id": "accordion", "kind": "effect", "type": "effect", "name_zh": "手风琴折叠", "name_en": "Accordion", "summary_zh": "问答一条条收起，点标题展开答案——原生 details 零 JS", "description": "Q&A rows collapse and expand — native details, zero JS", "keywords": [ "accordion", "effect", "css", "accordion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#accordion", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "animated-counter": { "id": "animated-counter", "kind": "effect", "type": "effect", "name_zh": "数字滚动计数", "name_en": "Animated Counter", "summary_zh": "数字从 0 滚到目标值，先快后慢稳稳停住", "description": "Numbers roll from 0 to the target, fast then slow, landing softly", "keywords": [ "animated counter", "effect", "css", "animated-counter" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#animated-counter", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{target}}", "type": "length", "default": "12800", "range": "100–99999", "unit": "" }, { "name": "{{duration}}", "type": "length", "default": "1600", "range": "400–3000", "unit": "ms" }, { "name": "{{easing}}", "type": "enum", "default": "out", "range": "out / inout", "unit": "" } ], "slider_params": [ { "name": "target", "label_zh": "目标数字", "label_en": "Target", "type": "length", "kind": "range", "min": 100, "max": 99999, "step": 100, "default": "12800", "unit": "" }, { "name": "duration", "label_zh": "滚动时长", "label_en": "Duration", "type": "length", "kind": "range", "min": 400, "max": 3000, "step": 100, "default": "1600", "unit": "ms" }, { "name": "easing", "label_zh": "缓动", "label_en": "Easing", "type": "enum", "kind": "select", "options": [ "out", "inout" ], "default": "out", "label_options": { "out": "先快后慢", "inout": "慢快慢" } } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "avatar-stack": { "id": "avatar-stack", "kind": "effect", "type": "effect", "name_zh": "头像堆叠", "name_en": "Avatar Stack", "summary_zh": "一排头像互相压住一部分，一眼看出「很多人参与」", "description": "Avatars overlap in a row — instant 'lots of people here' signal", "keywords": [ "avatar stack", "effect", "css", "avatar-stack" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#avatar-stack", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "button-press": { "id": "button-press", "kind": "effect", "type": "effect", "name_zh": "按钮按压感", "name_en": "Button Press Feel", "summary_zh": ":active 时按钮沉下去 3 像素，底影同步变薄", "description": "On :active the button sinks 3px and its bottom shadow thins with it", "keywords": [ "button press feel", "effect", "css", "button-press" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#button-press", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "card-lift": { "id": "card-lift", "kind": "effect", "type": "effect", "name_zh": "卡片悬停上浮", "name_en": "Card Hover Lift", "summary_zh": "鼠标一放上去，卡片抬起几像素、影子变深", "description": "Hover raises the card a few pixels and deepens its shadow", "keywords": [ "card hover lift", "effect", "css", "card-lift" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#card-lift", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "custom-checkbox": { "id": "custom-checkbox", "kind": "effect", "type": "effect", "name_zh": "自定义多选框", "name_en": "Custom Checkbox", "summary_zh": "藏起原生方框，换一个圆角方形 + 勾的自有样式", "description": "Hide the native box, show your own rounded square + check", "keywords": [ "custom checkbox", "effect", "css", "custom-checkbox" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#custom-checkbox", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "custom-range": { "id": "custom-range", "kind": "effect", "type": "effect", "name_zh": "自定义滑杆", "name_en": "Custom Range Slider", "summary_zh": "给原生 range 换上品牌样式：填充轨道 + 圆形滑块", "description": "Restyle the native range input: filled track + round thumb", "keywords": [ "custom range slider", "effect", "css", "custom-range" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#custom-range", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "custom-toggle": { "id": "custom-toggle", "kind": "effect", "type": "effect", "name_zh": "自定义开关", "name_en": "Custom Toggle", "summary_zh": "轨道 + 滑块的开关，滑块滑过去就是「开」", "description": "A track and a thumb — slide means on", "keywords": [ "custom toggle", "effect", "css", "custom-toggle" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#custom-toggle", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "dot-grid-bg": { "id": "dot-grid-bg", "kind": "effect", "type": "effect", "name_zh": "点阵背景", "name_en": "Dot Grid Background", "summary_zh": "等距小圆点铺满背景，像方格纸一样的隐形坐标系", "description": "Evenly spaced dots tile the background — graph paper for the eye", "keywords": [ "dot grid background", "effect", "css", "dot-grid-bg" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#dot-grid-bg", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "dropdown-menu": { "id": "dropdown-menu", "kind": "effect", "type": "effect", "name_zh": "下拉菜单", "name_en": "Dropdown Menu", "summary_zh": "点开一列操作项，带分组分隔线和滑入动画", "description": "A panel of actions opens with grouping separators and a slide-in", "keywords": [ "dropdown menu", "effect", "css", "dropdown-menu" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#dropdown-menu", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "entrance-motion": { "id": "entrance-motion", "kind": "effect", "type": "effect", "name_zh": "入场动效", "name_en": "Entrance Motion", "summary_zh": "一组元素逐个淡入上浮，像排队进场", "description": "A group of elements fades and rises in, one after another, like a queue", "keywords": [ "entrance motion", "effect", "css", "entrance-motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#entrance-motion", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{easing}}", "type": "enum", "default": "ease-out-expo", "range": "ease-out-expo / ease-out-back / ease-in-out / linear", "unit": "" }, { "name": "{{duration}}", "type": "length", "default": "600", "range": "200–1200", "unit": "ms" }, { "name": "{{stagger}}", "type": "length", "default": "90", "range": "0–200", "unit": "ms" }, { "name": "{{direction}}", "type": "enum", "default": "up", "range": "up / down / left / right", "unit": "" } ], "slider_params": [ { "name": "easing", "label_zh": "缓动曲线", "label_en": "Easing", "type": "enum", "kind": "select", "options": [ "ease-out-expo", "ease-out-back", "ease-in-out", "linear" ], "default": "ease-out-expo", "label_options": { "ease-out-expo": "利落落稳", "ease-out-back": "带回弹", "ease-in-out": "对称呼吸", "linear": "匀速" } }, { "name": "duration", "label_zh": "时长", "label_en": "Duration", "type": "length", "kind": "range", "min": 200, "max": 1200, "step": 50, "default": "600", "unit": "ms" }, { "name": "stagger", "label_zh": "逐个延迟", "label_en": "Stagger", "type": "length", "kind": "range", "min": 0, "max": 200, "step": 10, "default": "90", "unit": "ms" }, { "name": "direction", "label_zh": "入场方向", "label_en": "Direction", "type": "enum", "kind": "select", "options": [ "up", "down", "left", "right" ], "default": "up", "label_options": { "up": "自下而上", "down": "自上而下", "left": "自右向左", "right": "自左向右" } } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "focus-ring": { "id": "focus-ring", "kind": "effect", "type": "effect", "name_zh": "焦点环", "name_en": "Focus Ring", "summary_zh": "键盘 Tab 走到哪，哪里亮起一圈描边——无障碍的底线", "description": "Wherever Tab lands, a ring lights up — the accessibility baseline", "keywords": [ "focus ring", "effect", "css", "focus-ring" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#focus-ring", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "glassmorphism": { "id": "glassmorphism", "kind": "effect", "type": "effect", "name_zh": "毛玻璃拟态", "name_en": "Glassmorphism", "summary_zh": "半透明面板 + 背景模糊，像一块磨砂玻璃浮在画面上", "description": "A translucent panel with backdrop blur — frosted glass floating over the scene", "keywords": [ "glassmorphism", "effect", "css", "glassmorphism" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#glassmorphism", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{blur}}", "type": "length", "default": "14", "range": "0–30", "unit": "px" }, { "name": "{{opacity}}", "type": "percent", "default": "0.22", "range": "0.04–0.6", "unit": "" }, { "name": "{{radius}}", "type": "length", "default": "20", "range": "0–36", "unit": "px" }, { "name": "{{border-opacity}}", "type": "percent", "default": "0.5", "range": "0–0.9", "unit": "" } ], "slider_params": [ { "name": "blur", "label_zh": "模糊半径", "label_en": "Blur", "type": "length", "kind": "range", "min": 0, "max": 30, "step": 1, "default": "14", "unit": "px" }, { "name": "opacity", "label_zh": "底色不透明度", "label_en": "Tint opacity", "type": "percent", "kind": "range", "min": 0.04, "max": 0.6, "step": 0.02, "default": "0.22", "unit": "" }, { "name": "radius", "label_zh": "圆角", "label_en": "Radius", "type": "length", "kind": "range", "min": 0, "max": 36, "step": 1, "default": "20", "unit": "px" }, { "name": "border-opacity", "label_zh": "描边亮度", "label_en": "Border brightness", "type": "percent", "kind": "range", "min": 0, "max": 0.9, "step": 0.05, "default": "0.5", "unit": "" } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "gradient-border": { "id": "gradient-border", "kind": "effect", "type": "effect", "name_zh": "流光边框", "name_en": "Gradient Border", "summary_zh": "一圈渐变光沿着边框缓慢旋转，专为重点内容准备", "description": "A ring of gradient light slowly orbits the border — reserved for hero content", "keywords": [ "gradient border", "effect", "css", "gradient-border" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#gradient-border", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{speed}}", "type": "length", "default": "5", "range": "2–12", "unit": "s" }, { "name": "{{border-width}}", "type": "length", "default": "2", "range": "1–6", "unit": "px" }, { "name": "{{radius}}", "type": "length", "default": "16", "range": "6–30", "unit": "px" } ], "slider_params": [ { "name": "speed", "label_zh": "流光速度", "label_en": "Speed", "type": "length", "kind": "range", "min": 2, "max": 12, "step": 0.5, "default": "5", "unit": "s" }, { "name": "border-width", "label_zh": "边框宽度", "label_en": "Border width", "type": "length", "kind": "range", "min": 1, "max": 6, "step": 1, "default": "2", "unit": "px" }, { "name": "radius", "label_zh": "圆角", "label_en": "Radius", "type": "length", "kind": "range", "min": 6, "max": 30, "step": 1, "default": "16", "unit": "px" } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "grid-lines-bg": { "id": "grid-lines-bg", "kind": "effect", "type": "effect", "name_zh": "网格线背景", "name_en": "Grid Lines Background", "summary_zh": "两组淡线交叉成蓝图网格，科技感的经典垫底", "description": "Two sets of faint lines cross into a blueprint grid — the classic tech backdrop", "keywords": [ "grid lines background", "effect", "css", "grid-lines-bg" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#grid-lines-bg", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "image-zoom": { "id": "image-zoom", "kind": "effect", "type": "effect", "name_zh": "图片悬停放大", "name_en": "Image Hover Zoom", "summary_zh": "鼠标放上图片，画面在框里慢慢推近", "description": "Hover an image and the scene slowly pushes in, inside its frame", "keywords": [ "image hover zoom", "effect", "css", "image-zoom" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#image-zoom", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "marquee": { "id": "marquee", "kind": "effect", "type": "effect", "name_zh": "无缝跑马灯", "name_en": "Seamless Marquee", "summary_zh": "一排内容匀速横滚，首尾相接看不出断点", "description": "A row of content scrolls forever with no visible seam", "keywords": [ "seamless marquee", "effect", "css", "marquee" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#marquee", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{duration}}", "type": "length", "default": "18", "range": "5–40", "unit": "s" }, { "name": "{{gap}}", "type": "length", "default": "32", "range": "8–64", "unit": "px" }, { "name": "{{direction}}", "type": "enum", "default": "left", "range": "left / right", "unit": "" } ], "slider_params": [ { "name": "duration", "label_zh": "一圈时长", "label_en": "Duration", "type": "length", "kind": "range", "min": 5, "max": 40, "step": 1, "default": "18", "unit": "s" }, { "name": "gap", "label_zh": "条目间距", "label_en": "Gap", "type": "length", "kind": "range", "min": 8, "max": 64, "step": 2, "default": "32", "unit": "px" }, { "name": "direction", "label_zh": "方向", "label_en": "Direction", "type": "enum", "kind": "select", "options": [ "left", "right" ], "default": "left", "label_options": { "left": "向左", "right": "向右" } } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "mesh-gradient": { "id": "mesh-gradient", "kind": "effect", "type": "effect", "name_zh": "网格渐变背景", "name_en": "Mesh Gradient", "summary_zh": "几团柔光色块互相交融，缓慢漂移的高级感背景", "description": "Soft blobs of color melt into each other and drift slowly — a premium background", "keywords": [ "mesh gradient", "effect", "css", "mesh-gradient" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#mesh-gradient", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{speed}}", "type": "length", "default": "16", "range": "6–30", "unit": "s" }, { "name": "{{softness}}", "type": "length", "default": "42", "range": "20–80", "unit": "px" }, { "name": "{{tone}}", "type": "enum", "default": "gray", "range": "gray / warm / cool", "unit": "" } ], "slider_params": [ { "name": "speed", "label_zh": "漂移速度", "label_en": "Drift speed", "type": "length", "kind": "range", "min": 6, "max": 30, "step": 1, "default": "16", "unit": "s" }, { "name": "softness", "label_zh": "柔和程度", "label_en": "Softness (blur)", "type": "length", "kind": "range", "min": 20, "max": 80, "step": 2, "default": "42", "unit": "px" }, { "name": "tone", "label_zh": "色调", "label_en": "Tone", "type": "enum", "kind": "select", "options": [ "gray", "warm", "cool" ], "default": "gray", "label_options": { "gray": "纯灰阶", "warm": "暖灰", "cool": "冷灰" } } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "neumorphism": { "id": "neumorphism", "kind": "effect", "type": "effect", "name_zh": "新拟态", "name_en": "Neumorphism", "summary_zh": "元素像从背景里「挤」出来一样，一道亮影一道暗影塑造体积", "description": "Elements look extruded from the background — one light shadow, one dark shadow", "keywords": [ "neumorphism", "effect", "css", "neumorphism" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#neumorphism", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{distance}}", "type": "length", "default": "6", "range": "2–14", "unit": "px" }, { "name": "{{blur}}", "type": "length", "default": "12", "range": "4–30", "unit": "px" }, { "name": "{{intensity}}", "type": "percent", "default": "0.16", "range": "0.05–0.32", "unit": "" }, { "name": "{{radius}}", "type": "length", "default": "16", "range": "4–40", "unit": "px" } ], "slider_params": [ { "name": "distance", "label_zh": "阴影距离", "label_en": "Shadow distance", "type": "length", "kind": "range", "min": 2, "max": 14, "step": 1, "default": "6", "unit": "px" }, { "name": "blur", "label_zh": "阴影模糊", "label_en": "Shadow blur", "type": "length", "kind": "range", "min": 4, "max": 30, "step": 1, "default": "12", "unit": "px" }, { "name": "intensity", "label_zh": "阴影强度", "label_en": "Intensity", "type": "percent", "kind": "range", "min": 0.05, "max": 0.32, "step": 0.01, "default": "0.16", "unit": "" }, { "name": "radius", "label_zh": "圆角", "label_en": "Radius", "type": "length", "kind": "range", "min": 4, "max": 40, "step": 1, "default": "16", "unit": "px" } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "noise-texture": { "id": "noise-texture", "kind": "effect", "type": "effect", "name_zh": "噪点质感", "name_en": "Noise Texture", "summary_zh": "给大色块盖一层极细的噪点，去掉「塑料感」", "description": "A whisper of grain over flat color kills the plastic look", "keywords": [ "noise texture", "effect", "css", "noise-texture" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#noise-texture", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "progress-ring": { "id": "progress-ring", "kind": "effect", "type": "effect", "name_zh": "环形进度", "name_en": "Progress Ring", "summary_zh": "一圈 SVG 弧线画出完成度，中心放百分比", "description": "An SVG arc draws completion around a centered percentage", "keywords": [ "progress ring", "effect", "css", "progress-ring" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#progress-ring", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "pulsing-badge": { "id": "pulsing-badge", "kind": "effect", "type": "effect", "name_zh": "呼吸徽标", "name_en": "Pulsing Badge", "summary_zh": "小圆点一圈圈向外扩散波纹，专表「正在进行」", "description": "A dot ripples outward in rings — the universal 'live right now' signal", "keywords": [ "pulsing badge", "effect", "css", "pulsing-badge" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#pulsing-badge", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "shimmer-skeleton": { "id": "shimmer-skeleton", "kind": "effect", "type": "effect", "name_zh": "骨架屏微光", "name_en": "Shimmer Skeleton", "summary_zh": "数据没到之前，用灰块占位，一道微光循环扫过", "description": "Gray blocks hold the layout while data loads, swept by a passing sheen", "keywords": [ "shimmer skeleton", "effect", "css", "shimmer-skeleton" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#shimmer-skeleton", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{speed}}", "type": "length", "default": "1.6", "range": "0.8–3", "unit": "s" }, { "name": "{{sheen-width}}", "type": "percent", "default": "40", "range": "20–80", "unit": "%" }, { "name": "{{radius}}", "type": "length", "default": "8", "range": "0–16", "unit": "px" } ], "slider_params": [ { "name": "speed", "label_zh": "微光速度", "label_en": "Shimmer speed", "type": "length", "kind": "range", "min": 0.8, "max": 3, "step": 0.1, "default": "1.6", "unit": "s" }, { "name": "sheen-width", "label_zh": "微光宽度", "label_en": "Sheen width", "type": "percent", "kind": "range", "min": 20, "max": 80, "step": 5, "default": "40", "unit": "%" }, { "name": "radius", "label_zh": "骨架圆角", "label_en": "Radius", "type": "length", "kind": "range", "min": 0, "max": 16, "step": 1, "default": "8", "unit": "px" } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "sliding-tabs": { "id": "sliding-tabs", "kind": "effect", "type": "effect", "name_zh": "滑动标签页", "name_en": "Sliding Tabs", "summary_zh": "标签下的一条墨线滑到当前标签，像墨水在流动", "description": "An ink bar under the tabs glides to the active one", "keywords": [ "sliding tabs", "effect", "css", "sliding-tabs" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#sliding-tabs", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "spotlight-card": { "id": "spotlight-card", "kind": "effect", "type": "effect", "name_zh": "聚光灯卡片", "name_en": "Spotlight Card", "summary_zh": "一团光跟着鼠标在卡片上走，照到哪亮到哪", "description": "A pool of light follows the cursor across the card", "keywords": [ "spotlight card", "effect", "css", "spotlight-card" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#spotlight-card", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{glow-size}}", "type": "length", "default": "300", "range": "150–520", "unit": "px" }, { "name": "{{glow-opacity}}", "type": "percent", "default": "0.25", "range": "0.05–0.5", "unit": "" }, { "name": "{{radius}}", "type": "length", "default": "14", "range": "6–28", "unit": "px" } ], "slider_params": [ { "name": "glow-size", "label_zh": "光晕大小", "label_en": "Glow size", "type": "length", "kind": "range", "min": 150, "max": 520, "step": 10, "default": "300", "unit": "px" }, { "name": "glow-opacity", "label_zh": "光晕强度", "label_en": "Glow opacity", "type": "percent", "kind": "range", "min": 0.05, "max": 0.5, "step": 0.05, "default": "0.25", "unit": "" }, { "name": "radius", "label_zh": "圆角", "label_en": "Radius", "type": "length", "kind": "range", "min": 6, "max": 28, "step": 1, "default": "14", "unit": "px" } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "steps-indicator": { "id": "steps-indicator", "kind": "effect", "type": "effect", "name_zh": "步骤指示器", "name_en": "Steps Indicator", "summary_zh": "圆点 + 连线画出流程进度：已完成打勾，当前步高亮", "description": "Dots and connectors show flow progress: done gets a check, current gets the highlight", "keywords": [ "steps indicator", "effect", "css", "steps-indicator" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#steps-indicator", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "striped-progress": { "id": "striped-progress", "kind": "effect", "type": "effect", "name_zh": "条纹进度条", "name_en": "Striped Progress", "summary_zh": "斜条纹在填充段里持续流动，一看就知道「还在干活」", "description": "Diagonal stripes keep flowing inside the fill — 'still working' at a glance", "keywords": [ "striped progress", "effect", "css", "striped-progress" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#striped-progress", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "text-shimmer": { "id": "text-shimmer", "kind": "effect", "type": "effect", "name_zh": "文字微光", "name_en": "Text Shimmer", "summary_zh": "一道亮光扫过文字本身，常见于「AI 正在生成」的提示", "description": "A band of light sweeps across the text itself — the 'AI is generating' cue", "keywords": [ "text shimmer", "effect", "css", "text-shimmer" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#text-shimmer", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "tilt-card": { "id": "tilt-card", "kind": "effect", "type": "effect", "name_zh": "3D 倾斜卡片", "name_en": "3D Tilt Card", "summary_zh": "卡片随鼠标方向微微倾斜，像拿在手里的一张实体卡", "description": "The card tilts toward the cursor, like a physical card in your hand", "keywords": [ "3d tilt card", "effect", "css", "tilt-card" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#tilt-card", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [ { "name": "{{max-tilt}}", "type": "length", "default": "10", "range": "2–20", "unit": "deg" }, { "name": "{{scale}}", "type": "percent", "default": "1.03", "range": "1–1.1", "unit": "" }, { "name": "{{glare}}", "type": "enum", "default": "on", "range": "on / off", "unit": "" } ], "slider_params": [ { "name": "max-tilt", "label_zh": "最大倾斜角", "label_en": "Max tilt", "type": "length", "kind": "range", "min": 2, "max": 20, "step": 1, "default": "10", "unit": "deg" }, { "name": "scale", "label_zh": "悬停放大", "label_en": "Hover scale", "type": "percent", "kind": "range", "min": 1, "max": 1.1, "step": 0.01, "default": "1.03", "unit": "" }, { "name": "glare", "label_zh": "高光", "label_en": "Glare", "type": "enum", "kind": "select", "options": [ "on", "off" ], "default": "on", "label_options": { "on": "开", "off": "关" } } ], "interactive": true, "created": "2026-11-10", "updated": "2026-11-10" }, "tooltip": { "id": "tooltip", "kind": "effect", "type": "effect", "name_zh": "气泡提示", "name_en": "Tooltip", "summary_zh": "悬停或聚焦时在元素上方浮出一句小字解释", "description": "A small caption floats above an element on hover or focus", "keywords": [ "tooltip", "effect", "css", "tooltip" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "effect", "status": "published", "license": { "spdx": "MIT", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "preview_code": "src/lib/effects-data.mjs#tooltip", "code_targets": [ "html-css", "tailwind", "react" ], "applies_to": [], "parameters": [], "slider_params": [], "interactive": false, "created": "2026-11-10", "updated": "2026-11-10" }, "bottom-sheet": { "id": "bottom-sheet", "kind": "entry", "type": "component", "name_zh": "底部弹层", "name_en": "Bottom Sheet", "summary_zh": "从屏幕底部升起来的半屏面板：分享、筛选、选规格——拇指够得着，还能下拉关掉。", "description": "A panel that rises from the bottom of the screen: share, filter, pick a variant — thumb-reachable, swipe down to dismiss.", "keywords": [ "bottom sheet", "component", "overlay" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "overlay", "placements": [ "bottom-sheet" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "modals-overlays", "prompts": [ "bottom-sheet-prompt" ], "effects": [ "entrance-motion" ], "resources": [ "ant-design", "tdesign", "radix-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "breadcrumb-nav": { "id": "breadcrumb-nav", "kind": "entry", "type": "component", "name_zh": "面包屑", "name_en": "Breadcrumb", "summary_zh": "「首页 / 分类 / 当前页」一行小字：告诉你在哪一层，还能点回去。", "description": "A one-line trail — Home / Category / Current — showing your level and letting you jump back up.", "keywords": [ "breadcrumb", "component", "navigation" ], "platforms": [ "web", "desktop" ], "function": "navigation", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "breadcrumb", "prompts": [ "breadcrumb-nav-prompt" ], "effects": [], "resources": [ "primer", "carbon", "ant-design" ], "created": "2026-11-10", "updated": "2026-11-10" }, "card-basic": { "id": "card-basic", "kind": "entry", "type": "component", "name_zh": "基础卡片", "name_en": "Basic Card", "summary_zh": "一块内容一个卡：图在上、标题摘要在下，带一两个操作——商品、文章、课程都用它装。", "description": "One piece of content per card: media on top, title and summary below, one or two actions.", "keywords": [ "basic card", "component", "content" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "card", "prompts": [ "card-basic-prompt" ], "effects": [ "card-lift", "spotlight-card" ], "resources": [ "ant-design", "mantine", "magic-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "cart-item": { "id": "cart-item", "kind": "entry", "type": "component", "name_zh": "购物车条目", "name_en": "Cart Item", "summary_zh": "购物车里的一行：小图、名字、价格、数量步进器和一个勾选框，左滑还能删。", "description": "One row in the cart: thumbnail, name, price, quantity stepper, and a checkbox — swipe to delete.", "keywords": [ "cart item", "component", "commerce" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "checkout", "prompts": [ "cart-item-prompt" ], "effects": [ "custom-checkbox" ], "resources": [ "ant-design", "tdesign" ], "created": "2026-11-10", "updated": "2026-11-10" }, "checkout-form": { "id": "checkout-form", "kind": "entry", "type": "component", "name_zh": "结算表单", "name_en": "Checkout Form", "summary_zh": "付钱前最后一段路：确认商品、选地址、看优惠、选支付方式、点下单。", "description": "The last stretch before paying: review items, pick an address, apply discounts, choose payment, place the order.", "keywords": [ "checkout form", "component", "commerce" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "checkout", "prompts": [ "checkout-form-prompt" ], "effects": [ "steps-indicator", "striped-progress" ], "resources": [ "ant-design", "shadcn-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "dashboard-cards": { "id": "dashboard-cards", "kind": "entry", "type": "component", "name_zh": "仪表盘指标卡组", "name_en": "Dashboard Stat Cards", "summary_zh": "后台首页那排数字卡：今日订单、新增用户、转化率，每个带涨跌箭头和小趋势。", "description": "The row of metric cards on a dashboard home: today's orders, new users, conversion — each with a delta and a sparkline.", "keywords": [ "dashboard stat cards", "component", "data" ], "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "dashboard", "prompts": [ "dashboard-cards-prompt" ], "effects": [ "animated-counter", "progress-ring" ], "resources": [ "carbon", "tabler", "shadcn-admin" ], "created": "2026-11-10", "updated": "2026-11-10" }, "data-table": { "id": "data-table", "kind": "entry", "type": "component", "name_zh": "数据表格", "name_en": "Data Table", "summary_zh": "后台的命根子：一列一个字段，表头能排序，行尾有操作，底部分页。", "description": "The backbone of admin UIs: one field per column, sortable headers, row actions, pagination at the bottom.", "keywords": [ "data table", "component", "data" ], "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "data-display", "prompts": [ "data-table-prompt" ], "effects": [], "resources": [ "ant-design", "carbon", "mui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "detail-hero": { "id": "detail-hero", "kind": "entry", "type": "component", "name_zh": "详情页头图区", "name_en": "Detail Hero", "summary_zh": "详情页开头那块：大图或封面、标题、关键信息，再往下才是正文，底部常吸一个购买/收藏条。", "description": "The opening block of a detail page: hero media, title, key facts, then the body — often with a sticky action bar.", "keywords": [ "detail hero", "component", "content" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area", "floating" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "detail-page", "prompts": [ "detail-hero-prompt" ], "effects": [ "image-zoom", "entrance-motion" ], "resources": [ "gestalt", "astrowind" ], "created": "2026-11-10", "updated": "2026-11-10" }, "drawer-nav": { "id": "drawer-nav", "kind": "entry", "type": "component", "name_zh": "侧边导航（抽屉/侧栏）", "name_en": "Drawer / Sidebar Navigation", "summary_zh": "从左边滑出来或常驻左边的导航：一级、二级菜单都在里面，后台和复杂应用的主导航。", "description": "Navigation that slides in from the left or stays pinned there — the primary nav for dashboards and complex apps.", "keywords": [ "drawer sidebar navigation", "component", "navigation" ], "platforms": [ "web", "desktop", "tablet" ], "function": "navigation", "placements": [ "sidebar-left" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "drawer-sidebar", "prompts": [ "drawer-nav-prompt" ], "effects": [ "sliding-tabs" ], "resources": [ "ant-design", "carbon", "shadcn-admin" ], "created": "2026-11-10", "updated": "2026-11-10" }, "empty-state": { "id": "empty-state", "kind": "entry", "type": "component", "name_zh": "空状态", "name_en": "Empty State", "summary_zh": "没东西时出现的那块：一张小插画、一句说明、一个「去添加」的按钮。", "description": "What shows when there's nothing yet: a small illustration, one line of explanation, and a way to add the first item.", "keywords": [ "empty state", "component", "feedback" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "empty-states", "prompts": [ "empty-state-prompt" ], "effects": [ "entrance-motion" ], "resources": [ "open-doodles", "undraw", "lottiefiles" ], "created": "2026-11-10", "updated": "2026-11-10" }, "error-404": { "id": "error-404", "kind": "entry", "type": "component", "name_zh": "404 错误页", "name_en": "404 Error Page", "summary_zh": "走错路时看到的那页：一个大大的 404、一句人话、两个按钮（回首页、去搜索）。", "description": "The page for a wrong turn: a big 404, one line of human explanation, and buttons back home or to search.", "keywords": [ "404 error page", "component", "feedback" ], "platforms": [ "web" ], "function": "feedback", "placements": [ "full-screen" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "errors", "prompts": [ "error-404-prompt" ], "effects": [], "resources": [ "astrowind", "astro-paper" ], "created": "2026-11-10", "updated": "2026-11-10" }, "grouped-list": { "id": "grouped-list", "kind": "entry", "type": "component", "name_zh": "分组列表", "name_en": "Grouped List", "summary_zh": "带组头的列表：组名小字压在每组上方，滚动时组头吸顶，A–Z 索引还能点字母跳。", "description": "A list with group headers: small group titles above each section; headers can stick, with an A–Z index for jumping.", "keywords": [ "grouped list", "component", "content" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "list", "prompts": [ "grouped-list-prompt" ], "effects": [], "resources": [ "ant-design", "mui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "harmonyos-list": { "id": "harmonyos-list", "kind": "entry", "type": "component", "name_zh": "鸿蒙分组列表（自绘示意）", "name_en": "HarmonyOS List (Schematic)", "summary_zh": "鸿蒙设置与内容页的分组列表：按华为设计规范要点自绘示意，非官方素材。", "description": "The grouped list used across HarmonyOS settings and content pages — self-drawn schematic from published guideline points; no official assets.", "keywords": [ "harmonyos list schematic", "component", "content" ], "platforms": [ "harmonyos" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "list", "prompts": [ "harmonyos-list-prompt" ], "effects": [], "resources": [ "arkui", "harmonyos-design" ], "created": "2026-11-10", "updated": "2026-11-10" }, "harmonyos-tabs": { "id": "harmonyos-tabs", "kind": "entry", "type": "component", "name_zh": "鸿蒙底部标签栏（自绘示意）", "name_en": "HarmonyOS Bottom Tabs (Schematic)", "summary_zh": "鸿蒙 App 的底部主导航：按华为设计规范的要点自绘示意，非官方素材。", "description": "The bottom primary navigation for HarmonyOS apps — a self-drawn schematic following Huawei's published design guidelines; no official assets.", "keywords": [ "harmonyos bottom tabs schematic", "component", "navigation" ], "platforms": [ "harmonyos" ], "function": "navigation", "placements": [ "bottom-tab" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "bottom-tab-bar", "prompts": [ "harmonyos-tabs-prompt" ], "effects": [], "resources": [ "arkui", "harmonyos-design" ], "created": "2026-11-10", "updated": "2026-11-10" }, "hero-section": { "id": "hero-section", "kind": "entry", "type": "component", "name_zh": "落地页 Hero", "name_en": "Hero Section", "summary_zh": "落地页第一屏：一句大标题、一行副文案、一个大按钮，右边或下边一张产品图。", "description": "The first screen of a landing page: one big headline, one supporting line, one primary button, product visual beside or below.", "keywords": [ "hero section", "component", "marketing" ], "platforms": [ "web" ], "function": "marketing", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "marketing-landing", "prompts": [ "hero-section-prompt" ], "effects": [ "mesh-gradient", "entrance-motion", "marquee" ], "resources": [ "astrowind", "magic-ui", "shadcn-landing-page" ], "created": "2026-11-10", "updated": "2026-11-10" }, "image-carousel": { "id": "image-carousel", "kind": "entry", "type": "component", "name_zh": "图片轮播", "name_en": "Image Carousel", "summary_zh": "一排图左右滑着看：商品图、活动 banner 都住这里，下面一排小圆点报位置。", "description": "A swipeable row of images — product photos, promo banners — with dot indicators showing position.", "keywords": [ "image carousel", "component", "media" ], "platforms": [ "all" ], "function": "media", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "media", "prompts": [ "image-carousel-prompt" ], "effects": [ "image-zoom", "entrance-motion" ], "resources": [ "getwidget", "magic-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "list-item": { "id": "list-item", "kind": "entry", "type": "component", "name_zh": "基础列表行", "name_en": "List Item", "summary_zh": "最万能的内容行：左边头像或图标，中间标题与副文案，右边箭头或数值。", "description": "The universal content row: avatar or icon left, title and subtitle in the middle, chevron or value right.", "keywords": [ "list item", "component", "content" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "list", "prompts": [ "list-item-prompt" ], "effects": [], "resources": [ "ant-design", "mui", "tdesign", "getwidget" ], "created": "2026-11-10", "updated": "2026-11-10" }, "login-form": { "id": "login-form", "kind": "entry", "type": "component", "name_zh": "登录表单", "name_en": "Login Form", "summary_zh": "输账号密码（或验证码）进门的那张表单：字段少、报错清、还能第三方一键登录。", "description": "The form that gets users in: account + password or code, clear errors, optional social sign-in.", "keywords": [ "login form", "component", "account" ], "platforms": [ "all" ], "function": "account", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "auth", "prompts": [ "login-form-prompt" ], "effects": [ "focus-ring" ], "resources": [ "shadcn-ui", "mantine", "obytes-rn-template" ], "created": "2026-11-10", "updated": "2026-11-10" }, "masonry-grid": { "id": "masonry-grid", "kind": "entry", "type": "component", "name_zh": "瀑布流", "name_en": "Masonry Grid", "summary_zh": "两列错落排图：高的高矮的矮，像小红书和 Pinterest 那样越逛越上头。", "description": "Two staggered columns of images at natural heights — the Pinterest-style browsing layout.", "keywords": [ "masonry grid", "component", "content" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "grid-masonry", "prompts": [ "masonry-grid-prompt" ], "effects": [ "image-zoom" ], "resources": [ "gestalt" ], "created": "2026-11-10", "updated": "2026-11-10" }, "mobile-tab-bar": { "id": "mobile-tab-bar", "kind": "entry", "type": "component", "name_zh": "底部标签栏（移动端）", "name_en": "Bottom Tab Bar (Mobile)", "summary_zh": "App 底部那排一级入口：图标在上、文字在下，3–5 个，拇指最容易够到。", "description": "The primary navigation bar fixed at the bottom of a mobile app: 3–5 destinations, icon over label, thumb-first.", "keywords": [ "bottom tab bar mobile", "component", "navigation" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "navigation", "placements": [ "bottom-tab" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "bottom-tab-bar", "prompts": [ "mobile-tab-bar-prompt" ], "effects": [], "resources": [ "tdesign", "arkui", "material-design-3", "apple-hig" ], "created": "2026-11-10", "updated": "2026-11-10" }, "modal-dialog": { "id": "modal-dialog", "kind": "entry", "type": "component", "name_zh": "对话框（弹窗）", "name_en": "Modal Dialog", "summary_zh": "屏幕中间弹出的那个框：背景变暗，只能先处理它——确认删除、填写小表单都靠它。", "description": "A box that appears center-screen over a dimmed backdrop: confirm a deletion, fill a small form, decide now.", "keywords": [ "modal dialog", "component", "overlay" ], "platforms": [ "all" ], "function": "overlay", "placements": [ "overlay" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "modals-overlays", "prompts": [ "modal-dialog-prompt" ], "effects": [ "entrance-motion" ], "resources": [ "radix-ui", "shadcn-ui", "chakra-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "notification-list": { "id": "notification-list", "kind": "entry", "type": "component", "name_zh": "通知列表", "name_en": "Notification List", "summary_zh": "消息中心的那一列：谁在什么时候发了什么，未读的有红点，看完能一键全标已读。", "description": "The message center list: who sent what and when, red dots for unread, mark-all-read at hand.", "keywords": [ "notification list", "component", "personal" ], "platforms": [ "all" ], "function": "personal", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "messages", "prompts": [ "notification-list-prompt" ], "effects": [ "pulsing-badge" ], "resources": [ "ant-design", "shadcn-admin" ], "created": "2026-11-10", "updated": "2026-11-10" }, "onboarding-carousel": { "id": "onboarding-carousel", "kind": "entry", "type": "component", "name_zh": "新手引导轮播", "name_en": "Onboarding Carousel", "summary_zh": "第一次打开 App 时的那几屏：大图、一个卖点、一排圆点，最后落到「开始使用」。", "description": "The first-run screens of an app: big illustration, one benefit per screen, dot indicator, ending in a Get Started button.", "keywords": [ "onboarding carousel", "component", "onboarding" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "onboarding", "placements": [ "full-screen" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "onboarding", "prompts": [ "onboarding-carousel-prompt" ], "effects": [ "entrance-motion" ], "resources": [ "open-doodles", "open-peeps", "obytes-rn-template" ], "created": "2026-11-10", "updated": "2026-11-10" }, "picker-select": { "id": "picker-select", "kind": "entry", "type": "component", "name_zh": "选择器", "name_en": "Picker / Select", "summary_zh": "点一下弹出一列选项让你挑：城市、日期、分类——不用打字，从现成的里选。", "description": "Tap to open a list of options — city, date, category: choose from what exists instead of typing.", "keywords": [ "picker select", "component", "form" ], "platforms": [ "all" ], "function": "form", "placements": [ "bottom-sheet", "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "forms", "prompts": [ "picker-select-prompt" ], "effects": [ "dropdown-menu", "sliding-tabs" ], "resources": [ "ant-design", "mantine", "radix-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "pricing-table": { "id": "pricing-table", "kind": "entry", "type": "component", "name_zh": "定价表", "name_en": "Pricing Table", "summary_zh": "三列套餐并排比：免费、专业、企业，中间那列放大加框写着「最受欢迎」。", "description": "Three plans side by side — Free, Pro, Enterprise — with the middle one enlarged and badged Most Popular.", "keywords": [ "pricing table", "component", "marketing" ], "platforms": [ "web" ], "function": "marketing", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "marketing-landing", "prompts": [ "pricing-table-prompt" ], "effects": [ "gradient-border", "custom-toggle" ], "resources": [ "astrowind", "shadcn-landing-page" ], "created": "2026-11-10", "updated": "2026-11-10" }, "product-card": { "id": "product-card", "kind": "entry", "type": "component", "name_zh": "商品卡", "name_en": "Product Card", "summary_zh": "卖货的卡：商品图、名字、价格、销量或评价，点进去就是详情。", "description": "The selling card: product image, name, price, and sales or rating — tap through to the detail page.", "keywords": [ "product card", "component", "commerce" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "card", "prompts": [ "product-card-prompt" ], "effects": [ "card-lift", "image-zoom" ], "resources": [ "gestalt", "magic-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "profile-header": { "id": "profile-header", "kind": "entry", "type": "component", "name_zh": "个人中心头部", "name_en": "Profile Header", "summary_zh": "「我的」页面最上面那块：头像、昵称、一行数据（关注/粉丝/积分）和编辑按钮。", "description": "The top block of a Me page: avatar, nickname, a row of stats, and an edit button.", "keywords": [ "profile header", "component", "personal" ], "platforms": [ "ios", "android", "harmonyos", "web" ], "function": "personal", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "profile", "prompts": [ "profile-header-prompt" ], "effects": [ "avatar-stack" ], "resources": [ "tdesign", "ant-design" ], "created": "2026-11-10", "updated": "2026-11-10" }, "search-bar": { "id": "search-bar", "kind": "entry", "type": "component", "name_zh": "搜索框", "name_en": "Search Bar", "summary_zh": "带放大镜的那个输入框：圆角胶囊、浅灰底，里面写着「搜你想要的」。", "description": "The search input: magnifier icon, pill shape, light background, placeholder hinting what to search.", "keywords": [ "search bar", "component", "search" ], "platforms": [ "all" ], "function": "search", "placements": [ "top-nav", "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "search", "prompts": [ "search-bar-prompt" ], "effects": [ "focus-ring" ], "resources": [ "ant-design", "tdesign", "mui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "search-results": { "id": "search-results", "kind": "entry", "type": "component", "name_zh": "搜索结果页", "name_en": "Search Results", "summary_zh": "搜完看到的那一页：顶部留着搜索词，下面结果列表，带筛选、排序和「没找到」的兜底。", "description": "The page after searching: the query stays on top, results below, with filters, sorting, and a no-results fallback.", "keywords": [ "search results", "component", "search" ], "platforms": [ "all" ], "function": "search", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "search", "prompts": [ "search-results-prompt" ], "effects": [], "resources": [ "ant-design", "mui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "segmented-control": { "id": "segmented-control", "kind": "entry", "type": "component", "name_zh": "分段控制 / 标签页", "name_en": "Segmented Control & Tabs", "summary_zh": "同屏切换内容分组的小控件：像药丸的是分段控制，带下划线的是标签页。", "description": "A compact control for switching content groups in place: pill-shaped segmented control, or tabs with an underline.", "keywords": [ "segmented control tabs", "component", "navigation" ], "platforms": [ "all" ], "function": "navigation", "placements": [ "content-area", "top-nav" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "tabs-segmented", "prompts": [ "segmented-control-prompt" ], "effects": [ "sliding-tabs" ], "resources": [ "shadcn-ui", "mui", "ant-design" ], "created": "2026-11-10", "updated": "2026-11-10" }, "settings-list": { "id": "settings-list", "kind": "entry", "type": "component", "name_zh": "设置列表", "name_en": "Settings List", "summary_zh": "一屏开关和选项的集合：分组排列，每行左边是名字、右边是开关、箭头或当前值。", "description": "A grouped list of options: each row has a name on the left and a switch, chevron, or current value on the right.", "keywords": [ "settings list", "component", "personal" ], "platforms": [ "all" ], "function": "personal", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "settings", "prompts": [ "settings-list-prompt" ], "effects": [ "custom-toggle", "custom-checkbox" ], "resources": [ "ant-design", "tdesign", "shadcn-admin" ], "created": "2026-11-10", "updated": "2026-11-10" }, "skeleton-screen": { "id": "skeleton-screen", "kind": "entry", "type": "component", "name_zh": "骨架屏", "name_en": "Skeleton Screen", "summary_zh": "数据来之前先摆出的灰色轮廓：标题是灰条、图是灰块，一道微光扫过表示在加载。", "description": "Gray placeholder shapes shown while data loads: bars for text, blocks for images, a sheen sweeping across.", "keywords": [ "skeleton screen", "component", "feedback" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "loading-feedback", "prompts": [ "skeleton-screen-prompt" ], "effects": [ "shimmer-skeleton" ], "resources": [ "css-loaders", "magic-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "switch-row": { "id": "switch-row", "kind": "entry", "type": "component", "name_zh": "开关行", "name_en": "Switch Row", "summary_zh": "左边一行字、右边一个开关的设置行：点一下立刻生效，不需要保存按钮。", "description": "A settings row with text on the left and a switch on the right — changes apply instantly, no save button.", "keywords": [ "switch row", "component", "form" ], "platforms": [ "all" ], "function": "form", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "forms", "prompts": [ "switch-row-prompt" ], "effects": [ "custom-toggle" ], "resources": [ "ant-design", "tdesign" ], "created": "2026-11-10", "updated": "2026-11-10" }, "text-field": { "id": "text-field", "kind": "entry", "type": "component", "name_zh": "文本输入框", "name_en": "Text Field", "summary_zh": "填字的框：上面是标签，下面是输入区，有提示、有报错，是表单的最小单位。", "description": "The text input: a label above, the field below, hints and errors — the atom of every form.", "keywords": [ "text field", "component", "form" ], "platforms": [ "all" ], "function": "form", "placements": [ "content-area" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "forms", "prompts": [ "text-field-prompt" ], "effects": [ "focus-ring" ], "resources": [ "shadcn-ui", "mui", "chakra-ui" ], "created": "2026-11-10", "updated": "2026-11-10" }, "toast": { "id": "toast", "kind": "entry", "type": "component", "name_zh": "轻提示 Toast", "name_en": "Toast", "summary_zh": "屏幕边上飘一下就消失的小条：「已保存」「复制成功」——不打断你手上的事。", "description": "A small bar that floats in and fades out — 'Saved', 'Copied' — without interrupting the task.", "keywords": [ "toast", "component", "feedback" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "floating", "overlay" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "loading-feedback", "prompts": [ "toast-prompt" ], "effects": [ "entrance-motion" ], "resources": [ "shadcn-ui", "mantine" ], "created": "2026-11-10", "updated": "2026-11-10" }, "top-app-bar": { "id": "top-app-bar", "kind": "entry", "type": "component", "name_zh": "顶部应用栏", "name_en": "Top App Bar", "summary_zh": "页面最上面那条：返回、标题、常用操作，一眼看清「我在哪、能干嘛」。", "description": "The bar at the very top of a page: back button, title, and the page's key actions.", "keywords": [ "top app bar", "component", "navigation" ], "platforms": [ "all" ], "function": "navigation", "placements": [ "top-nav" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "top-navigation", "prompts": [ "top-app-bar-prompt" ], "effects": [ "focus-ring" ], "resources": [ "ant-design", "mui", "tdesign" ], "created": "2026-11-10", "updated": "2026-11-10" }, "web-header": { "id": "web-header", "kind": "entry", "type": "component", "name_zh": "网站页眉导航", "name_en": "Website Header", "summary_zh": "网站最上面那条横栏：Logo 在左，导航在中，登录/注册按钮在右，滚动时常吸顶。", "description": "The header of a website: logo left, nav in the middle, sign-in / sign-up actions right — often sticky.", "keywords": [ "website header", "component", "navigation" ], "platforms": [ "web" ], "function": "navigation", "placements": [ "top-nav" ], "granularity": "component", "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "pattern": "top-navigation", "prompts": [ "web-header-prompt" ], "effects": [], "resources": [ "shadcn-ui", "astrowind", "shadcn-landing-page" ], "created": "2026-11-10", "updated": "2026-11-10" }, "auth": { "id": "auth", "kind": "pattern", "type": "guide", "name_zh": "登录与注册", "name_en": "Auth / Login & Sign Up", "summary_zh": "账号入口这一整套：登录、注册、验证码、第三方登录、忘记密码、协议确认。", "description": "The full account entry set: sign in, sign up, verification codes, social login, password reset, and terms consent.", "keywords": [ "auth login sign up", "pattern", "account" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "account", "definition_zh": "账号入口这一整套：登录、注册、验证码、第三方登录、忘记密码、协议确认。", "definition_en": "The full account entry set: sign in, sign up, verification codes, social login, password reset, and terms consent.", "misconceptions_zh": "注册时一次问全所有资料——先让用户进来，资料在用到时再补，转化率差好几倍。", "platforms": [ "all" ], "function": "account", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "blog-content": { "id": "blog-content", "kind": "pattern", "type": "guide", "name_zh": "博客与内容", "name_en": "Blog & Content", "summary_zh": "文章型内容的组织：文章列表、文章页、标签、作者、订阅入口。", "description": "How article content is organized: post lists, article pages, tags, authors, subscribe entries.", "keywords": [ "blog content", "pattern", "marketing" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "marketing", "definition_zh": "文章型内容的组织：文章列表、文章页、标签、作者、订阅入口。", "definition_en": "How article content is organized: post lists, article pages, tags, authors, subscribe entries.", "misconceptions_zh": "文章页塞满弹窗和侧栏推广——阅读体验是内容站的命，推广让位给正文。", "platforms": [ "web" ], "function": "marketing", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "bottom-tab-bar": { "id": "bottom-tab-bar", "kind": "pattern", "type": "guide", "name_zh": "底部标签栏", "name_en": "Bottom Tab Bar", "summary_zh": "App 底部固定的一排图标+文字，3–5 个一级入口，拇指一伸就够得到，是移动 App 最常用的主导航。", "description": "A fixed bar at the bottom of an app with 3–5 top-level destinations, reachable by thumb — the most common primary navigation on mobile.", "keywords": [ "bottom tab bar", "pattern", "navigation" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "navigation", "definition_zh": "App 底部固定的一排图标+文字，3–5 个一级入口，拇指一伸就够得到，是移动 App 最常用的主导航。", "definition_en": "A fixed bar at the bottom of an app with 3–5 top-level destinations, reachable by thumb — the most common primary navigation on mobile.", "misconceptions_zh": "塞 6 个以上入口，或把「发布/购物车」这类动作按钮也当标签放进来——标签是目的地，不是动作。", "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "navigation", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "breadcrumb": { "id": "breadcrumb", "kind": "pattern", "type": "guide", "name_zh": "面包屑", "name_en": "Breadcrumb", "summary_zh": "一行「首页 / 分类 / 当前页」的小字，告诉用户自己在网站层级里的哪一层，并能一键跳回上层。", "description": "A trail like Home / Category / Current page that shows where you are in the site hierarchy and lets you jump back up.", "keywords": [ "breadcrumb", "pattern", "navigation" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "navigation", "definition_zh": "一行「首页 / 分类 / 当前页」的小字，告诉用户自己在网站层级里的哪一层，并能一键跳回上层。", "definition_en": "A trail like Home / Category / Current page that shows where you are in the site hierarchy and lets you jump back up.", "misconceptions_zh": "只有两层还硬上面包屑，或者面包屑和浏览器后退键打架——层级 ≤2 时它只是噪音。", "platforms": [ "web", "desktop" ], "function": "navigation", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "card": { "id": "card", "kind": "pattern", "type": "guide", "name_zh": "卡片", "name_en": "Card", "summary_zh": "一块内容一个卡：图、标题、摘要、操作圈在一张「卡片」里，是商品、文章、用户信息最常用的容器。", "description": "One chunk of content per card — image, title, summary, actions in one container; the default vessel for products, articles, and people.", "keywords": [ "card", "pattern", "content" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "content", "definition_zh": "一块内容一个卡：图、标题、摘要、操作圈在一张「卡片」里，是商品、文章、用户信息最常用的容器。", "definition_en": "One chunk of content per card — image, title, summary, actions in one container; the default vessel for products, articles, and people.", "misconceptions_zh": "卡片套卡片、卡片里再放卡片——层级超过两层就糊了；卡片是终点容器，不是俄罗斯套娃。", "platforms": [ "all" ], "function": "content", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "checkout": { "id": "checkout", "kind": "pattern", "type": "guide", "name_zh": "支付与结算", "name_en": "Checkout & Payment", "summary_zh": "从购物车到付款成功的一段路：清单确认、地址、优惠、支付方式、订单结果。", "description": "The path from cart to paid: item review, address, discounts, payment method, and the order result.", "keywords": [ "checkout payment", "pattern", "commerce" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "commerce", "definition_zh": "从购物车到付款成功的一段路：清单确认、地址、优惠、支付方式、订单结果。", "definition_en": "The path from cart to paid: item review, address, discounts, payment method, and the order result.", "misconceptions_zh": "结算中途弹营销弹窗、加购推荐——临门一脚只谈钱和确认，其他都等付完再说。", "platforms": [ "all" ], "function": "commerce", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "dashboard": { "id": "dashboard", "kind": "pattern", "type": "guide", "name_zh": "仪表盘", "name_en": "Dashboard", "summary_zh": "数据工作的首页：关键指标卡片打头，图表和数据表跟上，一眼看清现在怎么样。", "description": "The home of data work: key metric cards first, charts and tables after — the state of things at a glance.", "keywords": [ "dashboard", "pattern", "data" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "data", "definition_zh": "数据工作的首页：关键指标卡片打头，图表和数据表跟上，一眼看清现在怎么样。", "definition_en": "The home of data work: key metric cards first, charts and tables after — the state of things at a glance.", "misconceptions_zh": "把所有图表都堆上首屏——仪表盘要回答问题，不是展示库存；先定问题再选图。", "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "data-display": { "id": "data-display", "kind": "pattern", "type": "guide", "name_zh": "数据展示", "name_en": "Data Display", "summary_zh": "把数据给人看的组件族：表格、统计数字、时间线、徽章、标签、树形结构。", "description": "The component family for presenting data: tables, statistics, timelines, badges, tags, trees.", "keywords": [ "data display", "pattern", "data" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "data", "definition_zh": "把数据给人看的组件族：表格、统计数字、时间线、徽章、标签、树形结构。", "definition_en": "The component family for presenting data: tables, statistics, timelines, badges, tags, trees.", "misconceptions_zh": "表格里塞操作按钮阵列——一行超过 2 个行内操作就该收进「更多」菜单。", "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "detail-page": { "id": "detail-page", "kind": "pattern", "type": "guide", "name_zh": "详情页", "name_en": "Detail Page", "summary_zh": "单个对象的完整页面：商品详情、文章详情、个人主页——大图/标题开头，信息全面展开，底部放行动按钮。", "description": "The full page for a single object — product, article, profile: hero media and title first, complete information, action buttons at the end.", "keywords": [ "detail page", "pattern", "content" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "content", "definition_zh": "单个对象的完整页面：商品详情、文章详情、个人主页——大图/标题开头，信息全面展开，底部放行动按钮。", "definition_en": "The full page for a single object — product, article, profile: hero media and title first, complete information, action buttons at the end.", "misconceptions_zh": "详情页做成第二个首页——它只服务「看清这一个 + 做决定」，别把推荐流无限堆下去。", "platforms": [ "all" ], "function": "content", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "drawer-sidebar": { "id": "drawer-sidebar", "kind": "pattern", "type": "guide", "name_zh": "侧边抽屉", "name_en": "Drawer / Sidebar", "summary_zh": "从屏幕侧边滑出的导航面板：移动端藏在汉堡菜单后，桌面端常驻为左侧栏。", "description": "A navigation panel that slides in from the side: hidden behind a hamburger on mobile, pinned as a sidebar on desktop.", "keywords": [ "drawer sidebar", "pattern", "navigation" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "navigation", "definition_zh": "从屏幕侧边滑出的导航面板：移动端藏在汉堡菜单后，桌面端常驻为左侧栏。", "definition_en": "A navigation panel that slides in from the side: hidden behind a hamburger on mobile, pinned as a sidebar on desktop.", "misconceptions_zh": "一级入口也藏进抽屉——用户看不见就等于没有；抽屉只放二级及以下导航。", "platforms": [ "all" ], "function": "navigation", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "ecommerce": { "id": "ecommerce", "kind": "pattern", "type": "guide", "name_zh": "电商", "name_en": "E-commerce", "summary_zh": "卖货的一套组合：店铺首页、商品列表、商品卡、购物车、结算，与「交易」功能组紧密相连。", "description": "The selling set: shop home, product lists, product cards, cart, checkout — tightly bound to the commerce function group.", "keywords": [ "e commerce", "pattern", "commerce" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "commerce", "definition_zh": "卖货的一套组合：店铺首页、商品列表、商品卡、购物车、结算，与「交易」功能组紧密相连。", "definition_en": "The selling set: shop home, product lists, product cards, cart, checkout — tightly bound to the commerce function group.", "misconceptions_zh": "商品卡只放图不放价——价格是电商卡片的第一信息，和图同等重要。", "platforms": [ "all" ], "function": "commerce", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "effects-backgrounds": { "id": "effects-backgrounds", "kind": "pattern", "type": "guide", "name_zh": "动效与背景", "name_en": "Effects & Backgrounds", "summary_zh": "让界面动起来、衬起来的那一层：玻璃拟态、渐变、粒子、转场——本站「效果」板块的主场。", "description": "The layer that makes interfaces move and glow: glassmorphism, gradients, particles, transitions — home turf of this site's Effects section.", "keywords": [ "effects backgrounds", "pattern", "motion" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "motion", "definition_zh": "让界面动起来、衬起来的那一层：玻璃拟态、渐变、粒子、转场——本站「效果」板块的主场。", "definition_en": "The layer that makes interfaces move and glow: glassmorphism, gradients, particles, transitions — home turf of this site's Effects section.", "misconceptions_zh": "动效当主角——动效是仆人不是主人，抢过内容的风头就是灾难。", "platforms": [ "web", "web-mobile" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "empty-states": { "id": "empty-states", "kind": "pattern", "type": "guide", "name_zh": "空状态", "name_en": "Empty States", "summary_zh": "没有东西时给人看的那一屏：无数据、无网络、无搜索结果、无权限——都要有说法、有下一步。", "description": "What people see when there's nothing: no data, no network, no results, no permission — each needs an explanation and a next step.", "keywords": [ "empty states", "pattern", "feedback" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "feedback", "definition_zh": "没有东西时给人看的那一屏：无数据、无网络、无搜索结果、无权限——都要有说法、有下一步。", "definition_en": "What people see when there's nothing: no data, no network, no results, no permission — each needs an explanation and a next step.", "misconceptions_zh": "空状态只写「暂无数据」四个字——说清为什么空、用户能做什么，才是合格的空状态。", "platforms": [ "all" ], "function": "feedback", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "errors": { "id": "errors", "kind": "pattern", "type": "guide", "name_zh": "错误页", "name_en": "Errors", "summary_zh": "出错时给人看的页面：404、网络错误、权限不足、表单报错——说清发生了什么和能做什么。", "description": "Pages for when things go wrong: 404, network errors, permission denied, form errors — what happened and what to do.", "keywords": [ "errors", "pattern", "feedback" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "feedback", "definition_zh": "出错时给人看的页面：404、网络错误、权限不足、表单报错——说清发生了什么和能做什么。", "definition_en": "Pages for when things go wrong: 404, network errors, permission denied, form errors — what happened and what to do.", "misconceptions_zh": "错误页只写代码不写人话（Error 500）——用户需要的是原因和出路，不是编号。", "platforms": [ "all" ], "function": "feedback", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "forms": { "id": "forms", "kind": "pattern", "type": "guide", "name_zh": "表单", "name_en": "Forms", "summary_zh": "让用户输入和选择的一整套控件：输入框、选择器、开关、单选多选、滑杆、日期、评分、步进器。", "description": "The full set of input controls: text fields, pickers, switches, radios, checkboxes, sliders, dates, ratings, steppers.", "keywords": [ "forms", "pattern", "form" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "form", "definition_zh": "让用户输入和选择的一整套控件：输入框、选择器、开关、单选多选、滑杆、日期、评分、步进器。", "definition_en": "The full set of input controls: text fields, pickers, switches, radios, checkboxes, sliders, dates, ratings, steppers.", "misconceptions_zh": "一屏堆二十个字段还全是必填——按任务分组、只问必要的、能默认就默认。", "platforms": [ "all" ], "function": "form", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "grid-masonry": { "id": "grid-masonry", "kind": "pattern", "type": "guide", "name_zh": "宫格与瀑布流", "name_en": "Grid & Masonry", "summary_zh": "多列排布图片或卡片：宫格等高对齐，瀑布流按内容高度错落，适合逛和发现。", "description": "Multi-column layouts for images or cards: grids align to equal heights, masonry staggers by content height — made for browsing and discovery.", "keywords": [ "grid masonry", "pattern", "content" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "content", "definition_zh": "多列排布图片或卡片：宫格等高对齐，瀑布流按内容高度错落，适合逛和发现。", "definition_en": "Multi-column layouts for images or cards: grids align to equal heights, masonry staggers by content height — made for browsing and discovery.", "misconceptions_zh": "瀑布流里放需要按顺序读的内容——错落排布没有阅读顺序，重要信息会被跳过。", "platforms": [ "all" ], "function": "content", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "icons": { "id": "icons", "kind": "pattern", "type": "guide", "name_zh": "图标", "name_en": "Icons", "summary_zh": "小而关键的图形语言：系统图标、品牌图标、状态图标，一套图标必须风格统一。", "description": "The small but crucial graphic language: system icons, brand icons, status icons — one set, one consistent style.", "keywords": [ "icons", "pattern", "assets" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "assets", "definition_zh": "小而关键的图形语言：系统图标、品牌图标、状态图标，一套图标必须风格统一。", "definition_en": "The small but crucial graphic language: system icons, brand icons, status icons — one set, one consistent style.", "misconceptions_zh": "一个界面混用三套图标库——线宽、圆角、风格全打架，用户说不出哪不对但就是觉得糙。", "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "illustrations": { "id": "illustrations", "kind": "pattern", "type": "guide", "name_zh": "插画", "name_en": "Illustrations", "summary_zh": "场景插画、人物、占位图：给空状态、引导页、营销页补上人味和画面感。", "description": "Scene illustrations, characters, placeholders: the human touch for empty states, onboarding, and marketing pages.", "keywords": [ "illustrations", "pattern", "assets" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "assets", "definition_zh": "场景插画、人物、占位图：给空状态、引导页、营销页补上人味和画面感。", "definition_en": "Scene illustrations, characters, placeholders: the human touch for empty states, onboarding, and marketing pages.", "misconceptions_zh": "插画风格每页一个样——定一套插画系统（人物比例、配色、线条）再批量画。", "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "list": { "id": "list", "kind": "pattern", "type": "guide", "name_zh": "列表", "name_en": "List", "summary_zh": "内容最基础的组织方式：一行一条，可单行可多行，可分组，可带左滑操作和右侧配件。", "description": "The most basic way to organize content: one row per item — single or multi-line, grouped, with swipe actions and accessories.", "keywords": [ "list", "pattern", "content" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "content", "definition_zh": "内容最基础的组织方式：一行一条，可单行可多行，可分组，可带左滑操作和右侧配件。", "definition_en": "The most basic way to organize content: one row per item — single or multi-line, grouped, with swipe actions and accessories.", "misconceptions_zh": "什么都用列表——图片为主的内容该用宫格，强对比的内容该用卡片，列表会把它们压扁。", "platforms": [ "all" ], "function": "content", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "loading-feedback": { "id": "loading-feedback", "kind": "pattern", "type": "guide", "name_zh": "加载与反馈", "name_en": "Loading & Feedback", "summary_zh": "系统状态的传话筒：加载动画、骨架屏、进度条、Toast、成功/失败提示、徽章。", "description": "The messengers of system state: loaders, skeletons, progress bars, toasts, success/failure notices, badges.", "keywords": [ "loading feedback", "pattern", "feedback" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "feedback", "definition_zh": "系统状态的传话筒：加载动画、骨架屏、进度条、Toast、成功/失败提示、徽章。", "definition_en": "The messengers of system state: loaders, skeletons, progress bars, toasts, success/failure notices, badges.", "misconceptions_zh": "转圈超过 1 秒还不给骨架或进度——等待可以，装作没在加载不行。", "platforms": [ "all" ], "function": "feedback", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "marketing-landing": { "id": "marketing-landing", "kind": "pattern", "type": "guide", "name_zh": "营销页", "name_en": "Marketing / Landing", "summary_zh": "说服访客行动的单页：Hero 讲清价值，特性、社会证明、定价、FAQ 层层推进，最后落到 CTA。", "description": "A page that persuades visitors to act: a hero that states the value, then features, social proof, pricing, FAQ — all leading to the CTA.", "keywords": [ "marketing landing", "pattern", "marketing" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "marketing", "definition_zh": "说服访客行动的单页：Hero 讲清价值，特性、社会证明、定价、FAQ 层层推进，最后落到 CTA。", "definition_en": "A page that persuades visitors to act: a hero that states the value, then features, social proof, pricing, FAQ — all leading to the CTA.", "misconceptions_zh": "Hero 里放三段公司介绍——访客只关心「这对我有什么用」，3 秒说不清就走了。", "platforms": [ "web" ], "function": "marketing", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "media": { "id": "media", "kind": "pattern", "type": "guide", "name_zh": "媒体", "name_en": "Media", "summary_zh": "图片与音视频的呈现：轮播、画廊、视频播放器、音频条、封面图。", "description": "How images and audio/video are presented: carousels, galleries, video players, audio bars, cover art.", "keywords": [ "media", "pattern", "media" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "media", "definition_zh": "图片与音视频的呈现：轮播、画廊、视频播放器、音频条、封面图。", "definition_en": "How images and audio/video are presented: carousels, galleries, video players, audio bars, cover art.", "misconceptions_zh": "轮播自动播放还停不下来——自动轮播必须可暂停，且别超过 5 张。", "platforms": [ "all" ], "function": "media", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "messages": { "id": "messages", "kind": "pattern", "type": "guide", "name_zh": "消息与通知", "name_en": "Messages & Notifications", "summary_zh": "聊天与系统消息的归宿：会话列表、通知列表、消息中心，带未读角标和已读状态。", "description": "Where chats and system messages live: conversation lists, notification lists, message centers, with unread badges and read states.", "keywords": [ "messages notifications", "pattern", "personal" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "personal", "definition_zh": "聊天与系统消息的归宿：会话列表、通知列表、消息中心，带未读角标和已读状态。", "definition_en": "Where chats and system messages live: conversation lists, notification lists, message centers, with unread badges and read states.", "misconceptions_zh": "所有推送都进消息中心堆着——分清「要处理的」和「知道就行」，前者才配红点。", "platforms": [ "all" ], "function": "personal", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "modals-overlays": { "id": "modals-overlays", "kind": "pattern", "type": "guide", "name_zh": "弹窗与浮层", "name_en": "Modals & Overlays", "summary_zh": "浮在当前页面之上的层：对话框、底部弹层、抽屉、气泡菜单——打断或补充当前任务。", "description": "Layers that float above the page: dialogs, bottom sheets, drawers, popover menus — interrupting or supplementing the current task.", "keywords": [ "modals overlays", "pattern", "overlay" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "overlay", "definition_zh": "浮在当前页面之上的层：对话框、底部弹层、抽屉、气泡菜单——打断或补充当前任务。", "definition_en": "Layers that float above the page: dialogs, bottom sheets, drawers, popover menus — interrupting or supplementing the current task.", "misconceptions_zh": "弹层里再弹层、关闭按钮找不到——浮层最多套一层，关闭永远在右上或明确按钮。", "platforms": [ "all" ], "function": "overlay", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "onboarding": { "id": "onboarding", "kind": "pattern", "type": "guide", "name_zh": "新手引导", "name_en": "Onboarding / Walkthrough", "summary_zh": "新用户第一次打开时看到的几屏介绍或分步设置：讲清价值、拿到必要信息、送用户到第一个「啊哈」时刻。", "description": "The first-run screens or step-by-step setup a new user sees: explain the value, collect what's needed, and get them to the first aha moment.", "keywords": [ "onboarding walkthrough", "pattern", "onboarding" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "onboarding", "definition_zh": "新用户第一次打开时看到的几屏介绍或分步设置：讲清价值、拿到必要信息、送用户到第一个「啊哈」时刻。", "definition_en": "The first-run screens or step-by-step setup a new user sees: explain the value, collect what's needed, and get them to the first aha moment.", "misconceptions_zh": "把产品说明书做成 7 屏轮播——用户只想快点开始；引导要短、能跳过、最好边做边学。", "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "onboarding", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "profile": { "id": "profile", "kind": "pattern", "type": "guide", "name_zh": "个人中心", "name_en": "Profile", "summary_zh": "「我的」页面：头像与资料打头，下面是订单、收藏、成就等属于用户自己的入口集合。", "description": "The 'Me' page: avatar and profile up top, then the user's own entries — orders, favorites, achievements.", "keywords": [ "profile", "pattern", "personal" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "personal", "definition_zh": "「我的」页面：头像与资料打头，下面是订单、收藏、成就等属于用户自己的入口集合。", "definition_en": "The 'Me' page: avatar and profile up top, then the user's own entries — orders, favorites, achievements.", "misconceptions_zh": "个人中心做成第二个首页塞满运营位——用户来这是来找自己的东西的。", "platforms": [ "all" ], "function": "personal", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "search": { "id": "search", "kind": "pattern", "type": "guide", "name_zh": "搜索", "name_en": "Search", "summary_zh": "让用户主动找东西的一套：搜索框、联想词、历史记录、结果页、筛选与排序。", "description": "The set that lets users actively find things: search box, suggestions, history, results page, filters, and sorting.", "keywords": [ "search", "pattern", "search" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "search", "definition_zh": "让用户主动找东西的一套：搜索框、联想词、历史记录、结果页、筛选与排序。", "definition_en": "The set that lets users actively find things: search box, suggestions, history, results page, filters, and sorting.", "misconceptions_zh": "只给一个空框——没有联想、没有历史、没有热门词，等于让用户对着白墙说话。", "platforms": [ "all" ], "function": "search", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "settings": { "id": "settings", "kind": "pattern", "type": "guide", "name_zh": "设置", "name_en": "Settings", "summary_zh": "账号、通知、隐私、外观、关于——所有「不常用但必须有」的开关和选项的归宿。", "description": "The home for infrequent but essential options: account, notifications, privacy, appearance, about.", "keywords": [ "settings", "pattern", "personal" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "personal", "definition_zh": "账号、通知、隐私、外观、关于——所有「不常用但必须有」的开关和选项的归宿。", "definition_en": "The home for infrequent but essential options: account, notifications, privacy, appearance, about.", "misconceptions_zh": "把常用功能也埋进设置——设置是收纳盒不是黑洞，高频功能要有正门。", "platforms": [ "all" ], "function": "personal", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "tabs-segmented": { "id": "tabs-segmented", "kind": "pattern", "type": "guide", "name_zh": "标签页与分段控制", "name_en": "Tabs / Segmented Control", "summary_zh": "同一屏里切换内容分组的控件：标签页偏「换一组内容」，分段控制偏「换一种视图」，外形像药丸或下划线。", "description": "Controls that switch content groups within one screen: tabs swap content sets, segmented controls swap views — pill-shaped or underlined.", "keywords": [ "tabs segmented control", "pattern", "navigation" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "navigation", "definition_zh": "同一屏里切换内容分组的控件：标签页偏「换一组内容」，分段控制偏「换一种视图」，外形像药丸或下划线。", "definition_en": "Controls that switch content groups within one screen: tabs swap content sets, segmented controls swap views — pill-shaped or underlined.", "misconceptions_zh": "用标签页装没有关系的页面（那该用导航），或者分段里放 5 个以上选项（该用下拉或标签页）。", "platforms": [ "all" ], "function": "navigation", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "theme-tokens": { "id": "theme-tokens", "kind": "pattern", "type": "guide", "name_zh": "主题与令牌", "name_en": "Theme & Tokens", "summary_zh": "全站长相的源头：颜色、字阶、间距、圆角、深色模式——都收敛成一组可复用的令牌。", "description": "The source of a site's whole look: colors, type scale, spacing, radii, dark mode — converged into reusable tokens.", "keywords": [ "theme tokens", "pattern", "theming" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "theming", "definition_zh": "全站长相的源头：颜色、字阶、间距、圆角、深色模式——都收敛成一组可复用的令牌。", "definition_en": "The source of a site's whole look: colors, type scale, spacing, radii, dark mode — converged into reusable tokens.", "misconceptions_zh": "每个页面各写各的颜色值——改一次全站要改一百处；令牌就是为了只改一处。", "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "top-navigation": { "id": "top-navigation", "kind": "pattern", "type": "guide", "name_zh": "顶部导航", "name_en": "Top Navigation / App Bar", "summary_zh": "页面顶部的一条横栏：左边返回或菜单，中间标题，右边放当前页最常用的操作。", "description": "The bar at the top of a page: back or menu on the left, title in the middle, the page's most common actions on the right.", "keywords": [ "top navigation app bar", "pattern", "navigation" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "navigation", "definition_zh": "页面顶部的一条横栏：左边返回或菜单，中间标题，右边放当前页最常用的操作。", "definition_en": "The bar at the top of a page: back or menu on the left, title in the middle, the page's most common actions on the right.", "misconceptions_zh": "把全站导航、面包屑、搜索、用户菜单全塞进顶栏——顶栏只服务当前页，全站导航另有其位。", "platforms": [ "all" ], "function": "navigation", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "typography": { "id": "typography", "kind": "pattern", "type": "guide", "name_zh": "排版", "name_en": "Typography", "summary_zh": "文字的秩序：标题层级、正文字号行高、数字、引用、代码——读得舒服全靠它。", "description": "The order of text: heading levels, body size and line height, numbers, quotes, code — readability lives here.", "keywords": [ "typography", "pattern", "theming" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "function_group": "theming", "definition_zh": "文字的秩序：标题层级、正文字号行高、数字、引用、代码——读得舒服全靠它。", "definition_en": "The order of text: heading levels, body size and line height, numbers, quotes, code — readability lives here.", "misconceptions_zh": "正文小于 14px、行高小于 1.4——排版没有捷径，挤在一起的字没人读。", "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "created": "2026-11-10", "updated": "2026-11-10" }, "bottom-sheet-prompt": { "id": "bottom-sheet-prompt", "kind": "prompt", "type": "prompt", "name_zh": "底部弹层 · 提示词", "name_en": "Bottom Sheet Prompt", "summary_zh": "生成「底部弹层」的填空式提示词", "description": "Fill-in prompt that generates a Bottom Sheet component", "keywords": [ "prompt", "component", "bottom-sheet" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "overlay", "placements": [ "bottom-sheet" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "bottom-sheet", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{height}}", "type": "enum", "default": "自适应（≤70%）", "range": "半屏 / 自适应 / 近全屏", "unit": "" }, { "name": "{{drag-handle}}", "type": "enum", "default": "有拖拽条", "range": "有 / 无", "unit": "" }, { "name": "{{expandable}}", "type": "enum", "default": "可上拉展开", "range": "可 / 不可", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "breadcrumb-nav-prompt": { "id": "breadcrumb-nav-prompt", "kind": "prompt", "type": "prompt", "name_zh": "面包屑 · 提示词", "name_en": "Breadcrumb Prompt", "summary_zh": "生成「面包屑」的填空式提示词", "description": "Fill-in prompt that generates a Breadcrumb component", "keywords": [ "prompt", "component", "breadcrumb-nav" ], "platforms": [ "web", "desktop" ], "function": "navigation", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "breadcrumb-nav", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{separator}}", "type": "enum", "default": "/", "range": "/ / > / ·", "unit": "" }, { "name": "{{levels}}", "type": "enum", "default": "3", "range": "2–5 层", "unit": "" }, { "name": "{{collapse-middle}}", "type": "enum", "default": "折叠中间层", "range": "折叠 / 全部展开", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "card-basic-prompt": { "id": "card-basic-prompt", "kind": "prompt", "type": "prompt", "name_zh": "基础卡片 · 提示词", "name_en": "Basic Card Prompt", "summary_zh": "生成「基础卡片」的填空式提示词", "description": "Fill-in prompt that generates a Basic Card component", "keywords": [ "prompt", "component", "card-basic" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "card-basic", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{media-ratio}}", "type": "enum", "default": "16:9", "range": "16:9 / 4:3 / 1:1 / 无图", "unit": "" }, { "name": "{{padding}}", "type": "length", "default": "16", "range": "12–24", "unit": "px" }, { "name": "{{actions}}", "type": "text", "default": "查看详情", "range": "0–2 个", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "cart-item-prompt": { "id": "cart-item-prompt", "kind": "prompt", "type": "prompt", "name_zh": "购物车条目 · 提示词", "name_en": "Cart Item Prompt", "summary_zh": "生成「购物车条目」的填空式提示词", "description": "Fill-in prompt that generates a Cart Item component", "keywords": [ "prompt", "component", "cart-item" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "cart-item", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{stepper}}", "type": "enum", "default": "数量步进器", "range": "步进器样式", "unit": "" }, { "name": "{{swipe-delete}}", "type": "enum", "default": "左滑删除", "range": "有 / 无", "unit": "" }, { "name": "{{select-all}}", "type": "enum", "default": "底部全选+合计", "range": "有", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "checkout-form-prompt": { "id": "checkout-form-prompt", "kind": "prompt", "type": "prompt", "name_zh": "结算表单 · 提示词", "name_en": "Checkout Form Prompt", "summary_zh": "生成「结算表单」的填空式提示词", "description": "Fill-in prompt that generates a Checkout Form component", "keywords": [ "prompt", "component", "checkout-form" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "checkout-form", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{steps}}", "type": "enum", "default": "单页完成", "range": "单页 / 分步（地址→支付→确认）", "unit": "" }, { "name": "{{summary}}", "type": "enum", "default": "右侧/底部金额明细", "range": "明细位置", "unit": "" }, { "name": "{{payment-methods}}", "type": "text", "default": "微信、支付宝、银行卡", "range": "2–4 种", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "dashboard-cards-prompt": { "id": "dashboard-cards-prompt", "kind": "prompt", "type": "prompt", "name_zh": "仪表盘指标卡组 · 提示词", "name_en": "Dashboard Stat Cards Prompt", "summary_zh": "生成「仪表盘指标卡组」的填空式提示词", "description": "Fill-in prompt that generates a Dashboard Stat Cards component", "keywords": [ "prompt", "component", "dashboard-cards" ], "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "dashboard-cards", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{card-count}}", "type": "enum", "default": "4", "range": "3–5 张", "unit": "" }, { "name": "{{delta}}", "type": "enum", "default": "环比涨跌", "range": "环比 / 同比", "unit": "" }, { "name": "{{sparkline}}", "type": "enum", "default": "带迷你折线", "range": "有 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "data-table-prompt": { "id": "data-table-prompt", "kind": "prompt", "type": "prompt", "name_zh": "数据表格 · 提示词", "name_en": "Data Table Prompt", "summary_zh": "生成「数据表格」的填空式提示词", "description": "Fill-in prompt that generates a Data Table component", "keywords": [ "prompt", "component", "data-table" ], "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "data-table", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{row-actions}}", "type": "enum", "default": "行尾文字按钮×2", "range": "1–3 个 + 更多菜单", "unit": "" }, { "name": "{{pagination}}", "type": "enum", "default": "分页", "range": "分页 / 无限滚动", "unit": "" }, { "name": "{{density}}", "type": "enum", "default": "标准", "range": "紧凑 / 标准 / 宽松", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "detail-hero-prompt": { "id": "detail-hero-prompt", "kind": "prompt", "type": "prompt", "name_zh": "详情页头图区 · 提示词", "name_en": "Detail Hero Prompt", "summary_zh": "生成「详情页头图区」的填空式提示词", "description": "Fill-in prompt that generates a Detail Hero component", "keywords": [ "prompt", "component", "detail-hero" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area", "floating" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "detail-hero", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{media-ratio}}", "type": "enum", "default": "4:3", "range": "16:9 / 4:3 / 1:1", "unit": "" }, { "name": "{{sticky-cta}}", "type": "enum", "default": "底部吸底操作条", "range": "有 / 无", "unit": "" }, { "name": "{{meta-items}}", "type": "text", "default": "作者、时间、评分", "range": "2–4 项", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "drawer-nav-prompt": { "id": "drawer-nav-prompt", "kind": "prompt", "type": "prompt", "name_zh": "侧边导航（抽屉/侧栏） · 提示词", "name_en": "Drawer / Sidebar Navigation Prompt", "summary_zh": "生成「侧边导航（抽屉/侧栏）」的填空式提示词", "description": "Fill-in prompt that generates a Drawer / Sidebar Navigation component", "keywords": [ "prompt", "component", "drawer-nav" ], "platforms": [ "web", "desktop", "tablet" ], "function": "navigation", "placements": [ "sidebar-left" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "drawer-nav", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{width}}", "type": "length", "default": "260", "range": "200–320", "unit": "px" }, { "name": "{{collapsible}}", "type": "enum", "default": "可折叠成图标条", "range": "可折叠 / 不可折叠", "unit": "" }, { "name": "{{group-count}}", "type": "enum", "default": "3", "range": "1–6 组", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "empty-state-prompt": { "id": "empty-state-prompt", "kind": "prompt", "type": "prompt", "name_zh": "空状态 · 提示词", "name_en": "Empty State Prompt", "summary_zh": "生成「空状态」的填空式提示词", "description": "Fill-in prompt that generates a Empty State component", "keywords": [ "prompt", "component", "empty-state" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "empty-state", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{illustration}}", "type": "text", "default": "线性插画", "range": "插画风格", "unit": "" }, { "name": "{{action}}", "type": "text", "default": "去添加第一条", "range": "按钮文案或无", "unit": "" }, { "name": "{{tone}}", "type": "enum", "default": "平静说明", "range": "平静 / 轻松幽默", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "error-404-prompt": { "id": "error-404-prompt", "kind": "prompt", "type": "prompt", "name_zh": "404 错误页 · 提示词", "name_en": "404 Error Page Prompt", "summary_zh": "生成「404 错误页」的填空式提示词", "description": "Fill-in prompt that generates a 404 Error Page component", "keywords": [ "prompt", "component", "error-404" ], "platforms": [ "web" ], "function": "feedback", "placements": [ "full-screen" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "error-404", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{illustration}}", "type": "text", "default": "大数字或插画", "range": "风格", "unit": "" }, { "name": "{{actions}}", "type": "text", "default": "回首页 / 去搜索", "range": "按钮组合", "unit": "" }, { "name": "{{report-link}}", "type": "enum", "default": "有「报告死链」入口", "range": "有 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-accordion": { "id": "fx-accordion", "kind": "prompt", "type": "prompt", "name_zh": "手风琴折叠 · 提示词", "name_en": "Accordion Prompt", "summary_zh": "生成「手风琴折叠」效果的填空式提示词", "description": "Fill-in prompt that generates the Accordion effect", "keywords": [ "prompt", "effect", "accordion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "accordion", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-animated-counter": { "id": "fx-animated-counter", "kind": "prompt", "type": "prompt", "name_zh": "数字滚动计数 · 提示词", "name_en": "Animated Counter Prompt", "summary_zh": "生成「数字滚动计数」效果的填空式提示词", "description": "Fill-in prompt that generates the Animated Counter effect", "keywords": [ "prompt", "effect", "animated-counter" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "animated-counter", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{target}}", "type": "length", "default": "12800", "range": "100–99999", "unit": "" }, { "name": "{{duration}}", "type": "length", "default": "1600", "range": "400–3000", "unit": "ms" }, { "name": "{{easing}}", "type": "enum", "default": "out", "range": "out / inout", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-avatar-stack": { "id": "fx-avatar-stack", "kind": "prompt", "type": "prompt", "name_zh": "头像堆叠 · 提示词", "name_en": "Avatar Stack Prompt", "summary_zh": "生成「头像堆叠」效果的填空式提示词", "description": "Fill-in prompt that generates the Avatar Stack effect", "keywords": [ "prompt", "effect", "avatar-stack" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "avatar-stack", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-button-press": { "id": "fx-button-press", "kind": "prompt", "type": "prompt", "name_zh": "按钮按压感 · 提示词", "name_en": "Button Press Feel Prompt", "summary_zh": "生成「按钮按压感」效果的填空式提示词", "description": "Fill-in prompt that generates the Button Press Feel effect", "keywords": [ "prompt", "effect", "button-press" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "button-press", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-card-lift": { "id": "fx-card-lift", "kind": "prompt", "type": "prompt", "name_zh": "卡片悬停上浮 · 提示词", "name_en": "Card Hover Lift Prompt", "summary_zh": "生成「卡片悬停上浮」效果的填空式提示词", "description": "Fill-in prompt that generates the Card Hover Lift effect", "keywords": [ "prompt", "effect", "card-lift" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "card-lift", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-custom-checkbox": { "id": "fx-custom-checkbox", "kind": "prompt", "type": "prompt", "name_zh": "自定义多选框 · 提示词", "name_en": "Custom Checkbox Prompt", "summary_zh": "生成「自定义多选框」效果的填空式提示词", "description": "Fill-in prompt that generates the Custom Checkbox effect", "keywords": [ "prompt", "effect", "custom-checkbox" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "custom-checkbox", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-custom-range": { "id": "fx-custom-range", "kind": "prompt", "type": "prompt", "name_zh": "自定义滑杆 · 提示词", "name_en": "Custom Range Slider Prompt", "summary_zh": "生成「自定义滑杆」效果的填空式提示词", "description": "Fill-in prompt that generates the Custom Range Slider effect", "keywords": [ "prompt", "effect", "custom-range" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "custom-range", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-custom-toggle": { "id": "fx-custom-toggle", "kind": "prompt", "type": "prompt", "name_zh": "自定义开关 · 提示词", "name_en": "Custom Toggle Prompt", "summary_zh": "生成「自定义开关」效果的填空式提示词", "description": "Fill-in prompt that generates the Custom Toggle effect", "keywords": [ "prompt", "effect", "custom-toggle" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "custom-toggle", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-dot-grid-bg": { "id": "fx-dot-grid-bg", "kind": "prompt", "type": "prompt", "name_zh": "点阵背景 · 提示词", "name_en": "Dot Grid Background Prompt", "summary_zh": "生成「点阵背景」效果的填空式提示词", "description": "Fill-in prompt that generates the Dot Grid Background effect", "keywords": [ "prompt", "effect", "dot-grid-bg" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "dot-grid-bg", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-dropdown-menu": { "id": "fx-dropdown-menu", "kind": "prompt", "type": "prompt", "name_zh": "下拉菜单 · 提示词", "name_en": "Dropdown Menu Prompt", "summary_zh": "生成「下拉菜单」效果的填空式提示词", "description": "Fill-in prompt that generates the Dropdown Menu effect", "keywords": [ "prompt", "effect", "dropdown-menu" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "dropdown-menu", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-entrance-motion": { "id": "fx-entrance-motion", "kind": "prompt", "type": "prompt", "name_zh": "入场动效 · 提示词", "name_en": "Entrance Motion Prompt", "summary_zh": "生成「入场动效」效果的填空式提示词", "description": "Fill-in prompt that generates the Entrance Motion effect", "keywords": [ "prompt", "effect", "entrance-motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "entrance-motion", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{easing}}", "type": "enum", "default": "ease-out-expo", "range": "ease-out-expo / ease-out-back / ease-in-out / linear", "unit": "" }, { "name": "{{duration}}", "type": "length", "default": "600", "range": "200–1200", "unit": "ms" }, { "name": "{{stagger}}", "type": "length", "default": "90", "range": "0–200", "unit": "ms" }, { "name": "{{direction}}", "type": "enum", "default": "up", "range": "up / down / left / right", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-focus-ring": { "id": "fx-focus-ring", "kind": "prompt", "type": "prompt", "name_zh": "焦点环 · 提示词", "name_en": "Focus Ring Prompt", "summary_zh": "生成「焦点环」效果的填空式提示词", "description": "Fill-in prompt that generates the Focus Ring effect", "keywords": [ "prompt", "effect", "focus-ring" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "focus-ring", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-glassmorphism": { "id": "fx-glassmorphism", "kind": "prompt", "type": "prompt", "name_zh": "毛玻璃拟态 · 提示词", "name_en": "Glassmorphism Prompt", "summary_zh": "生成「毛玻璃拟态」效果的填空式提示词", "description": "Fill-in prompt that generates the Glassmorphism effect", "keywords": [ "prompt", "effect", "glassmorphism" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "glassmorphism", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{blur}}", "type": "length", "default": "14", "range": "0–30", "unit": "px" }, { "name": "{{opacity}}", "type": "percent", "default": "0.22", "range": "0.04–0.6", "unit": "" }, { "name": "{{radius}}", "type": "length", "default": "20", "range": "0–36", "unit": "px" }, { "name": "{{border-opacity}}", "type": "percent", "default": "0.5", "range": "0–0.9", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-gradient-border": { "id": "fx-gradient-border", "kind": "prompt", "type": "prompt", "name_zh": "流光边框 · 提示词", "name_en": "Gradient Border Prompt", "summary_zh": "生成「流光边框」效果的填空式提示词", "description": "Fill-in prompt that generates the Gradient Border effect", "keywords": [ "prompt", "effect", "gradient-border" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "gradient-border", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{speed}}", "type": "length", "default": "5", "range": "2–12", "unit": "s" }, { "name": "{{border-width}}", "type": "length", "default": "2", "range": "1–6", "unit": "px" }, { "name": "{{radius}}", "type": "length", "default": "16", "range": "6–30", "unit": "px" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-grid-lines-bg": { "id": "fx-grid-lines-bg", "kind": "prompt", "type": "prompt", "name_zh": "网格线背景 · 提示词", "name_en": "Grid Lines Background Prompt", "summary_zh": "生成「网格线背景」效果的填空式提示词", "description": "Fill-in prompt that generates the Grid Lines Background effect", "keywords": [ "prompt", "effect", "grid-lines-bg" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "grid-lines-bg", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-image-zoom": { "id": "fx-image-zoom", "kind": "prompt", "type": "prompt", "name_zh": "图片悬停放大 · 提示词", "name_en": "Image Hover Zoom Prompt", "summary_zh": "生成「图片悬停放大」效果的填空式提示词", "description": "Fill-in prompt that generates the Image Hover Zoom effect", "keywords": [ "prompt", "effect", "image-zoom" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "image-zoom", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-marquee": { "id": "fx-marquee", "kind": "prompt", "type": "prompt", "name_zh": "无缝跑马灯 · 提示词", "name_en": "Seamless Marquee Prompt", "summary_zh": "生成「无缝跑马灯」效果的填空式提示词", "description": "Fill-in prompt that generates the Seamless Marquee effect", "keywords": [ "prompt", "effect", "marquee" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "marquee", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{duration}}", "type": "length", "default": "18", "range": "5–40", "unit": "s" }, { "name": "{{gap}}", "type": "length", "default": "32", "range": "8–64", "unit": "px" }, { "name": "{{direction}}", "type": "enum", "default": "left", "range": "left / right", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-mesh-gradient": { "id": "fx-mesh-gradient", "kind": "prompt", "type": "prompt", "name_zh": "网格渐变背景 · 提示词", "name_en": "Mesh Gradient Prompt", "summary_zh": "生成「网格渐变背景」效果的填空式提示词", "description": "Fill-in prompt that generates the Mesh Gradient effect", "keywords": [ "prompt", "effect", "mesh-gradient" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "mesh-gradient", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{speed}}", "type": "length", "default": "16", "range": "6–30", "unit": "s" }, { "name": "{{softness}}", "type": "length", "default": "42", "range": "20–80", "unit": "px" }, { "name": "{{tone}}", "type": "enum", "default": "gray", "range": "gray / warm / cool", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-neumorphism": { "id": "fx-neumorphism", "kind": "prompt", "type": "prompt", "name_zh": "新拟态 · 提示词", "name_en": "Neumorphism Prompt", "summary_zh": "生成「新拟态」效果的填空式提示词", "description": "Fill-in prompt that generates the Neumorphism effect", "keywords": [ "prompt", "effect", "neumorphism" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "neumorphism", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{distance}}", "type": "length", "default": "6", "range": "2–14", "unit": "px" }, { "name": "{{blur}}", "type": "length", "default": "12", "range": "4–30", "unit": "px" }, { "name": "{{intensity}}", "type": "percent", "default": "0.16", "range": "0.05–0.32", "unit": "" }, { "name": "{{radius}}", "type": "length", "default": "16", "range": "4–40", "unit": "px" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-noise-texture": { "id": "fx-noise-texture", "kind": "prompt", "type": "prompt", "name_zh": "噪点质感 · 提示词", "name_en": "Noise Texture Prompt", "summary_zh": "生成「噪点质感」效果的填空式提示词", "description": "Fill-in prompt that generates the Noise Texture effect", "keywords": [ "prompt", "effect", "noise-texture" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "noise-texture", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-progress-ring": { "id": "fx-progress-ring", "kind": "prompt", "type": "prompt", "name_zh": "环形进度 · 提示词", "name_en": "Progress Ring Prompt", "summary_zh": "生成「环形进度」效果的填空式提示词", "description": "Fill-in prompt that generates the Progress Ring effect", "keywords": [ "prompt", "effect", "progress-ring" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "progress-ring", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-pulsing-badge": { "id": "fx-pulsing-badge", "kind": "prompt", "type": "prompt", "name_zh": "呼吸徽标 · 提示词", "name_en": "Pulsing Badge Prompt", "summary_zh": "生成「呼吸徽标」效果的填空式提示词", "description": "Fill-in prompt that generates the Pulsing Badge effect", "keywords": [ "prompt", "effect", "pulsing-badge" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "pulsing-badge", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-shimmer-skeleton": { "id": "fx-shimmer-skeleton", "kind": "prompt", "type": "prompt", "name_zh": "骨架屏微光 · 提示词", "name_en": "Shimmer Skeleton Prompt", "summary_zh": "生成「骨架屏微光」效果的填空式提示词", "description": "Fill-in prompt that generates the Shimmer Skeleton effect", "keywords": [ "prompt", "effect", "shimmer-skeleton" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "shimmer-skeleton", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{speed}}", "type": "length", "default": "1.6", "range": "0.8–3", "unit": "s" }, { "name": "{{sheen-width}}", "type": "percent", "default": "40", "range": "20–80", "unit": "%" }, { "name": "{{radius}}", "type": "length", "default": "8", "range": "0–16", "unit": "px" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-sliding-tabs": { "id": "fx-sliding-tabs", "kind": "prompt", "type": "prompt", "name_zh": "滑动标签页 · 提示词", "name_en": "Sliding Tabs Prompt", "summary_zh": "生成「滑动标签页」效果的填空式提示词", "description": "Fill-in prompt that generates the Sliding Tabs effect", "keywords": [ "prompt", "effect", "sliding-tabs" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "sliding-tabs", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-spotlight-card": { "id": "fx-spotlight-card", "kind": "prompt", "type": "prompt", "name_zh": "聚光灯卡片 · 提示词", "name_en": "Spotlight Card Prompt", "summary_zh": "生成「聚光灯卡片」效果的填空式提示词", "description": "Fill-in prompt that generates the Spotlight Card effect", "keywords": [ "prompt", "effect", "spotlight-card" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "spotlight-card", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{glow-size}}", "type": "length", "default": "300", "range": "150–520", "unit": "px" }, { "name": "{{glow-opacity}}", "type": "percent", "default": "0.25", "range": "0.05–0.5", "unit": "" }, { "name": "{{radius}}", "type": "length", "default": "14", "range": "6–28", "unit": "px" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-steps-indicator": { "id": "fx-steps-indicator", "kind": "prompt", "type": "prompt", "name_zh": "步骤指示器 · 提示词", "name_en": "Steps Indicator Prompt", "summary_zh": "生成「步骤指示器」效果的填空式提示词", "description": "Fill-in prompt that generates the Steps Indicator effect", "keywords": [ "prompt", "effect", "steps-indicator" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "steps-indicator", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-striped-progress": { "id": "fx-striped-progress", "kind": "prompt", "type": "prompt", "name_zh": "条纹进度条 · 提示词", "name_en": "Striped Progress Prompt", "summary_zh": "生成「条纹进度条」效果的填空式提示词", "description": "Fill-in prompt that generates the Striped Progress effect", "keywords": [ "prompt", "effect", "striped-progress" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "striped-progress", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-text-shimmer": { "id": "fx-text-shimmer", "kind": "prompt", "type": "prompt", "name_zh": "文字微光 · 提示词", "name_en": "Text Shimmer Prompt", "summary_zh": "生成「文字微光」效果的填空式提示词", "description": "Fill-in prompt that generates the Text Shimmer effect", "keywords": [ "prompt", "effect", "text-shimmer" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "text-shimmer", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-tilt-card": { "id": "fx-tilt-card", "kind": "prompt", "type": "prompt", "name_zh": "3D 倾斜卡片 · 提示词", "name_en": "3D Tilt Card Prompt", "summary_zh": "生成「3D 倾斜卡片」效果的填空式提示词", "description": "Fill-in prompt that generates the 3D Tilt Card effect", "keywords": [ "prompt", "effect", "tilt-card" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "tilt-card", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{max-tilt}}", "type": "length", "default": "10", "range": "2–20", "unit": "deg" }, { "name": "{{scale}}", "type": "percent", "default": "1.03", "range": "1–1.1", "unit": "" }, { "name": "{{glare}}", "type": "enum", "default": "on", "range": "on / off", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "fx-tooltip": { "id": "fx-tooltip", "kind": "prompt", "type": "prompt", "name_zh": "气泡提示 · 提示词", "name_en": "Tooltip Prompt", "summary_zh": "生成「气泡提示」效果的填空式提示词", "description": "Fill-in prompt that generates the Tooltip effect", "keywords": [ "prompt", "effect", "tooltip" ], "platforms": [ "all" ], "function": "motion", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "effect": "tooltip", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "grouped-list-prompt": { "id": "grouped-list-prompt", "kind": "prompt", "type": "prompt", "name_zh": "分组列表 · 提示词", "name_en": "Grouped List Prompt", "summary_zh": "生成「分组列表」的填空式提示词", "description": "Fill-in prompt that generates a Grouped List component", "keywords": [ "prompt", "component", "grouped-list" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "grouped-list", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{group-header}}", "type": "enum", "default": "吸顶", "range": "吸顶 / 不吸顶", "unit": "" }, { "name": "{{index-bar}}", "type": "enum", "default": "无", "range": "有 A–Z 索引 / 无", "unit": "" }, { "name": "{{group-count}}", "type": "enum", "default": "4", "range": "2–10 组", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "harmonyos-list-prompt": { "id": "harmonyos-list-prompt", "kind": "prompt", "type": "prompt", "name_zh": "鸿蒙分组列表（自绘示意） · 提示词", "name_en": "HarmonyOS List (Schematic) Prompt", "summary_zh": "生成「鸿蒙分组列表（自绘示意）」的填空式提示词", "description": "Fill-in prompt that generates a HarmonyOS List (Schematic) component", "keywords": [ "prompt", "component", "harmonyos-list" ], "platforms": [ "harmonyos" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "harmonyos-list", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{group-style}}", "type": "enum", "default": "卡片式分组", "range": "卡片式 / 通栏式", "unit": "" }, { "name": "{{row-height}}", "type": "length", "default": "56", "range": "48–64", "unit": "px" }, { "name": "{{trailing}}", "type": "enum", "default": "箭头/开关/值", "range": "配件类型", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "harmonyos-tabs-prompt": { "id": "harmonyos-tabs-prompt", "kind": "prompt", "type": "prompt", "name_zh": "鸿蒙底部标签栏（自绘示意） · 提示词", "name_en": "HarmonyOS Bottom Tabs (Schematic) Prompt", "summary_zh": "生成「鸿蒙底部标签栏（自绘示意）」的填空式提示词", "description": "Fill-in prompt that generates a HarmonyOS Bottom Tabs (Schematic) component", "keywords": [ "prompt", "component", "harmonyos-tabs" ], "platforms": [ "harmonyos" ], "function": "navigation", "placements": [ "bottom-tab" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "harmonyos-tabs", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{tab-count}}", "type": "enum", "default": "4", "range": "3–5", "unit": "" }, { "name": "{{style-note}}", "type": "text", "default": "按规范要点自绘", "range": "示意说明", "unit": "" }, { "name": "{{safe-area}}", "type": "enum", "default": "适配手势条", "range": "适配", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "hero-section-prompt": { "id": "hero-section-prompt", "kind": "prompt", "type": "prompt", "name_zh": "落地页 Hero · 提示词", "name_en": "Hero Section Prompt", "summary_zh": "生成「落地页 Hero」的填空式提示词", "description": "Fill-in prompt that generates a Hero Section component", "keywords": [ "prompt", "component", "hero-section" ], "platforms": [ "web" ], "function": "marketing", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "hero-section", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{layout}}", "type": "enum", "default": "左文右图", "range": "左文右图 / 居中 / 图下置", "unit": "" }, { "name": "{{cta}}", "type": "text", "default": "免费开始", "range": "主按钮文案", "unit": "" }, { "name": "{{proof}}", "type": "enum", "default": "按钮下小字社会证明", "range": "评分/用户数/无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "image-carousel-prompt": { "id": "image-carousel-prompt", "kind": "prompt", "type": "prompt", "name_zh": "图片轮播 · 提示词", "name_en": "Image Carousel Prompt", "summary_zh": "生成「图片轮播」的填空式提示词", "description": "Fill-in prompt that generates a Image Carousel component", "keywords": [ "prompt", "component", "image-carousel" ], "platforms": [ "all" ], "function": "media", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "image-carousel", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{autoplay}}", "type": "enum", "default": "不自动播放", "range": "自动 / 不自动", "unit": "" }, { "name": "{{indicator}}", "type": "enum", "default": "圆点", "range": "圆点 / 数字（2/5）", "unit": "" }, { "name": "{{ratio}}", "type": "enum", "default": "16:9", "range": "16:9 / 4:3 / 1:1", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "list-item-prompt": { "id": "list-item-prompt", "kind": "prompt", "type": "prompt", "name_zh": "基础列表行 · 提示词", "name_en": "List Item Prompt", "summary_zh": "生成「基础列表行」的填空式提示词", "description": "Fill-in prompt that generates a List Item component", "keywords": [ "prompt", "component", "list-item" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "list-item", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{leading}}", "type": "enum", "default": "图标", "range": "头像 / 图标 / 无", "unit": "" }, { "name": "{{lines}}", "type": "enum", "default": "双行", "range": "单行 / 双行", "unit": "" }, { "name": "{{trailing}}", "type": "enum", "default": "箭头", "range": "箭头 / 开关 / 文字 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "login-form-prompt": { "id": "login-form-prompt", "kind": "prompt", "type": "prompt", "name_zh": "登录表单 · 提示词", "name_en": "Login Form Prompt", "summary_zh": "生成「登录表单」的填空式提示词", "description": "Fill-in prompt that generates a Login Form component", "keywords": [ "prompt", "component", "login-form" ], "platforms": [ "all" ], "function": "account", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "login-form", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{methods}}", "type": "enum", "default": "密码 + 验证码 + 第三方", "range": "密码 / 验证码 / 第三方组合", "unit": "" }, { "name": "{{agreement}}", "type": "enum", "default": "含协议勾选", "range": "含 / 不含", "unit": "" }, { "name": "{{error-style}}", "type": "enum", "default": "字段下方红字", "range": "字段下方 / 顶部汇总", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "masonry-grid-prompt": { "id": "masonry-grid-prompt", "kind": "prompt", "type": "prompt", "name_zh": "瀑布流 · 提示词", "name_en": "Masonry Grid Prompt", "summary_zh": "生成「瀑布流」的填空式提示词", "description": "Fill-in prompt that generates a Masonry Grid component", "keywords": [ "prompt", "component", "masonry-grid" ], "platforms": [ "all" ], "function": "content", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "masonry-grid", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{columns}}", "type": "enum", "default": "2", "range": "2–4", "unit": "" }, { "name": "{{gap}}", "type": "length", "default": "12", "range": "8–16", "unit": "px" }, { "name": "{{caption}}", "type": "enum", "default": "图下标题+作者", "range": "标题 / 标题+作者 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "mobile-tab-bar-prompt": { "id": "mobile-tab-bar-prompt", "kind": "prompt", "type": "prompt", "name_zh": "底部标签栏（移动端） · 提示词", "name_en": "Bottom Tab Bar (Mobile) Prompt", "summary_zh": "生成「底部标签栏（移动端）」的填空式提示词", "description": "Fill-in prompt that generates a Bottom Tab Bar (Mobile) component", "keywords": [ "prompt", "component", "mobile-tab-bar" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "navigation", "placements": [ "bottom-tab" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "mobile-tab-bar", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{tab-count}}", "type": "enum", "default": "4", "range": "3 / 4 / 5", "unit": "" }, { "name": "{{bar-height}}", "type": "length", "default": "56", "range": "48–64", "unit": "px" }, { "name": "{{icon-size}}", "type": "length", "default": "24", "range": "20–28", "unit": "px" }, { "name": "{{show-badge}}", "type": "enum", "default": "是", "range": "是 / 否", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "modal-dialog-prompt": { "id": "modal-dialog-prompt", "kind": "prompt", "type": "prompt", "name_zh": "对话框（弹窗） · 提示词", "name_en": "Modal Dialog Prompt", "summary_zh": "生成「对话框（弹窗）」的填空式提示词", "description": "Fill-in prompt that generates a Modal Dialog component", "keywords": [ "prompt", "component", "modal-dialog" ], "platforms": [ "all" ], "function": "overlay", "placements": [ "overlay" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "modal-dialog", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{size}}", "type": "enum", "default": "中（480px）", "range": "小 / 中 / 大", "unit": "" }, { "name": "{{dismissible}}", "type": "enum", "default": "点遮罩可关", "range": "可关 / 必须选按钮", "unit": "" }, { "name": "{{actions}}", "type": "text", "default": "取消 / 确认删除", "range": "按钮组", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "notification-list-prompt": { "id": "notification-list-prompt", "kind": "prompt", "type": "prompt", "name_zh": "通知列表 · 提示词", "name_en": "Notification List Prompt", "summary_zh": "生成「通知列表」的填空式提示词", "description": "Fill-in prompt that generates a Notification List component", "keywords": [ "prompt", "component", "notification-list" ], "platforms": [ "all" ], "function": "personal", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "notification-list", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{unread-style}}", "type": "enum", "default": "红点 + 加粗", "range": "红点 / 数字角标 / 仅加粗", "unit": "" }, { "name": "{{time-format}}", "type": "enum", "default": "相对时间", "range": "相对时间 / 绝对日期", "unit": "" }, { "name": "{{group-by-type}}", "type": "enum", "default": "按类型分组", "range": "分组 / 混排", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "onboarding-carousel-prompt": { "id": "onboarding-carousel-prompt", "kind": "prompt", "type": "prompt", "name_zh": "新手引导轮播 · 提示词", "name_en": "Onboarding Carousel Prompt", "summary_zh": "生成「新手引导轮播」的填空式提示词", "description": "Fill-in prompt that generates a Onboarding Carousel component", "keywords": [ "prompt", "component", "onboarding-carousel" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "onboarding", "placements": [ "full-screen" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "onboarding-carousel", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{page-count}}", "type": "enum", "default": "3", "range": "3–4 屏", "unit": "" }, { "name": "{{illustration}}", "type": "text", "default": "统一风格插画", "range": "插画来源/风格", "unit": "" }, { "name": "{{skippable}}", "type": "enum", "default": "可跳过", "range": "可跳过 / 不可跳边", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "picker-select-prompt": { "id": "picker-select-prompt", "kind": "prompt", "type": "prompt", "name_zh": "选择器 · 提示词", "name_en": "Picker / Select Prompt", "summary_zh": "生成「选择器」的填空式提示词", "description": "Fill-in prompt that generates a Picker / Select component", "keywords": [ "prompt", "component", "picker-select" ], "platforms": [ "all" ], "function": "form", "placements": [ "bottom-sheet", "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "picker-select", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{mode}}", "type": "enum", "default": "单选", "range": "单选 / 多选", "unit": "" }, { "name": "{{presentation}}", "type": "enum", "default": "底部弹层", "range": "底部弹层 / 下拉 / 全屏页", "unit": "" }, { "name": "{{searchable}}", "type": "enum", "default": "选项多时可搜索", "range": "可搜索 / 不可搜索", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "pricing-table-prompt": { "id": "pricing-table-prompt", "kind": "prompt", "type": "prompt", "name_zh": "定价表 · 提示词", "name_en": "Pricing Table Prompt", "summary_zh": "生成「定价表」的填空式提示词", "description": "Fill-in prompt that generates a Pricing Table component", "keywords": [ "prompt", "component", "pricing-table" ], "platforms": [ "web" ], "function": "marketing", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "pricing-table", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{tier-count}}", "type": "enum", "default": "3", "range": "2–4 档", "unit": "" }, { "name": "{{featured}}", "type": "enum", "default": "中间档推荐", "range": "推荐档位置", "unit": "" }, { "name": "{{billing-toggle}}", "type": "enum", "default": "月付/年付切换", "range": "有 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "product-card-prompt": { "id": "product-card-prompt", "kind": "prompt", "type": "prompt", "name_zh": "商品卡 · 提示词", "name_en": "Product Card Prompt", "summary_zh": "生成「商品卡」的填空式提示词", "description": "Fill-in prompt that generates a Product Card component", "keywords": [ "prompt", "component", "product-card" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "product-card", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{price-style}}", "type": "enum", "default": "现价 + 划线原价", "range": "仅现价 / 现价+原价", "unit": "" }, { "name": "{{badge}}", "type": "enum", "default": "左上角促销角标", "range": "角标文案或无", "unit": "" }, { "name": "{{ratio}}", "type": "enum", "default": "1:1", "range": "1:1 / 3:4", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "profile-header-prompt": { "id": "profile-header-prompt", "kind": "prompt", "type": "prompt", "name_zh": "个人中心头部 · 提示词", "name_en": "Profile Header Prompt", "summary_zh": "生成「个人中心头部」的填空式提示词", "description": "Fill-in prompt that generates a Profile Header component", "keywords": [ "prompt", "component", "profile-header" ], "platforms": [ "ios", "android", "harmonyos", "web" ], "function": "personal", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "profile-header", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{stats}}", "type": "text", "default": "关注、粉丝、获赞", "range": "3–4 个数据", "unit": "" }, { "name": "{{edit-entry}}", "type": "enum", "default": "编辑资料按钮", "range": "按钮 / 点整行进入", "unit": "" }, { "name": "{{member-badge}}", "type": "enum", "default": "有会员标识", "range": "有 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "search-bar-prompt": { "id": "search-bar-prompt", "kind": "prompt", "type": "prompt", "name_zh": "搜索框 · 提示词", "name_en": "Search Bar Prompt", "summary_zh": "生成「搜索框」的填空式提示词", "description": "Fill-in prompt that generates a Search Bar component", "keywords": [ "prompt", "component", "search-bar" ], "platforms": [ "all" ], "function": "search", "placements": [ "top-nav", "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "search-bar", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{shape}}", "type": "enum", "default": "胶囊", "range": "胶囊 / 圆角方形", "unit": "" }, { "name": "{{trailing}}", "type": "enum", "default": "语音+扫码", "range": "语音 / 扫码 / 无", "unit": "" }, { "name": "{{hot-word}}", "type": "enum", "default": "占位符轮播热词", "range": "有 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "search-results-prompt": { "id": "search-results-prompt", "kind": "prompt", "type": "prompt", "name_zh": "搜索结果页 · 提示词", "name_en": "Search Results Prompt", "summary_zh": "生成「搜索结果页」的填空式提示词", "description": "Fill-in prompt that generates a Search Results component", "keywords": [ "prompt", "component", "search-results" ], "platforms": [ "all" ], "function": "search", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "search-results", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{layout}}", "type": "enum", "default": "列表", "range": "列表 / 宫格", "unit": "" }, { "name": "{{filters}}", "type": "text", "default": "分类、价格、评分", "range": "2–5 个维度", "unit": "" }, { "name": "{{highlight}}", "type": "enum", "default": "命中词加粗", "range": "加粗 / 标色", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "segmented-control-prompt": { "id": "segmented-control-prompt", "kind": "prompt", "type": "prompt", "name_zh": "分段控制 / 标签页 · 提示词", "name_en": "Segmented Control & Tabs Prompt", "summary_zh": "生成「分段控制 / 标签页」的填空式提示词", "description": "Fill-in prompt that generates a Segmented Control & Tabs component", "keywords": [ "prompt", "component", "segmented-control" ], "platforms": [ "all" ], "function": "navigation", "placements": [ "content-area", "top-nav" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "segmented-control", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{segments}}", "type": "text", "default": "全部、进行中、已完成", "range": "2–5 段", "unit": "" }, { "name": "{{style}}", "type": "enum", "default": "药丸", "range": "药丸 / 下划线", "unit": "" }, { "name": "{{ink-animation}}", "type": "enum", "default": "滑动", "range": "滑动 / 直接切换", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "settings-list-prompt": { "id": "settings-list-prompt", "kind": "prompt", "type": "prompt", "name_zh": "设置列表 · 提示词", "name_en": "Settings List Prompt", "summary_zh": "生成「设置列表」的填空式提示词", "description": "Fill-in prompt that generates a Settings List component", "keywords": [ "prompt", "component", "settings-list" ], "platforms": [ "all" ], "function": "personal", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "settings-list", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{groups}}", "type": "text", "default": "账号、通知、通用、关于", "range": "3–5 组", "unit": "" }, { "name": "{{danger-zone}}", "type": "enum", "default": "末组红色退出/注销", "range": "有 / 无", "unit": "" }, { "name": "{{row-height}}", "type": "length", "default": "52", "range": "48–60", "unit": "px" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "skeleton-screen-prompt": { "id": "skeleton-screen-prompt", "kind": "prompt", "type": "prompt", "name_zh": "骨架屏 · 提示词", "name_en": "Skeleton Screen Prompt", "summary_zh": "生成「骨架屏」的填空式提示词", "description": "Fill-in prompt that generates a Skeleton Screen component", "keywords": [ "prompt", "component", "skeleton-screen" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "skeleton-screen", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{layout}}", "type": "enum", "default": "列表", "range": "列表 / 详情 / 卡片网格", "unit": "" }, { "name": "{{shimmer}}", "type": "enum", "default": "微光扫过", "range": "微光 / 呼吸 / 静态", "unit": "" }, { "name": "{{max-wait}}", "type": "enum", "default": "超过 3 秒切空/错误态", "range": "兜底策略", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "switch-row-prompt": { "id": "switch-row-prompt", "kind": "prompt", "type": "prompt", "name_zh": "开关行 · 提示词", "name_en": "Switch Row Prompt", "summary_zh": "生成「开关行」的填空式提示词", "description": "Fill-in prompt that generates a Switch Row component", "keywords": [ "prompt", "component", "switch-row" ], "platforms": [ "all" ], "function": "form", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "switch-row", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{description}}", "type": "enum", "default": "带一行副文案", "range": "有 / 无", "unit": "" }, { "name": "{{default-state}}", "type": "enum", "default": "开", "range": "开 / 关", "unit": "" }, { "name": "{{confirm-when-off}}", "type": "enum", "default": "重要项关闭需确认", "range": "需要 / 不需要", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "text-field-prompt": { "id": "text-field-prompt", "kind": "prompt", "type": "prompt", "name_zh": "文本输入框 · 提示词", "name_en": "Text Field Prompt", "summary_zh": "生成「文本输入框」的填空式提示词", "description": "Fill-in prompt that generates a Text Field component", "keywords": [ "prompt", "component", "text-field" ], "platforms": [ "all" ], "function": "form", "placements": [ "content-area" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "text-field", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{label-style}}", "type": "enum", "default": "上方标签", "range": "上方 / 浮动 / 行内", "unit": "" }, { "name": "{{helper}}", "type": "enum", "default": "下方提示文案", "range": "有 / 无", "unit": "" }, { "name": "{{clear-btn}}", "type": "enum", "default": "有清除按钮", "range": "有 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "toast-prompt": { "id": "toast-prompt", "kind": "prompt", "type": "prompt", "name_zh": "轻提示 Toast · 提示词", "name_en": "Toast Prompt", "summary_zh": "生成「轻提示 Toast」的填空式提示词", "description": "Fill-in prompt that generates a Toast component", "keywords": [ "prompt", "component", "toast" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "floating", "overlay" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "toast", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{position}}", "type": "enum", "default": "底部居中", "range": "顶部 / 底部居中", "unit": "" }, { "name": "{{duration}}", "type": "length", "default": "2500", "range": "1500–4000", "unit": "ms" }, { "name": "{{with-action}}", "type": "enum", "default": "带撤销", "range": "带操作 / 纯提示", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "top-app-bar-prompt": { "id": "top-app-bar-prompt", "kind": "prompt", "type": "prompt", "name_zh": "顶部应用栏 · 提示词", "name_en": "Top App Bar Prompt", "summary_zh": "生成「顶部应用栏」的填空式提示词", "description": "Fill-in prompt that generates a Top App Bar component", "keywords": [ "prompt", "component", "top-app-bar" ], "platforms": [ "all" ], "function": "navigation", "placements": [ "top-nav" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "top-app-bar", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{title-align}}", "type": "enum", "default": "左对齐", "range": "左对齐 / 居中", "unit": "" }, { "name": "{{actions}}", "type": "text", "default": "搜索、更多", "range": "0–3 个图标按钮", "unit": "" }, { "name": "{{divider}}", "type": "enum", "default": "分隔线", "range": "分隔线 / 阴影 / 无", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "web-header-prompt": { "id": "web-header-prompt", "kind": "prompt", "type": "prompt", "name_zh": "网站页眉导航 · 提示词", "name_en": "Website Header Prompt", "summary_zh": "生成「网站页眉导航」的填空式提示词", "description": "Fill-in prompt that generates a Website Header component", "keywords": [ "prompt", "component", "web-header" ], "platforms": [ "web" ], "function": "navigation", "placements": [ "top-nav" ], "granularity": "component", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "component", "entry": "web-header", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "parameters": [ { "name": "{{nav-items}}", "type": "text", "default": "产品、价格、文档、关于", "range": "4–6 个", "unit": "" }, { "name": "{{sticky}}", "type": "enum", "default": "吸顶", "range": "吸顶 / 不吸顶", "unit": "" }, { "name": "{{cta-text}}", "type": "text", "default": "免费开始", "range": "按钮文案", "unit": "" } ], "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "adminlte": { "id": "adminlte", "kind": "resource", "type": "template", "name_zh": "AdminLTE 后台模板", "name_en": "AdminLTE", "summary_zh": "Bootstrap 系后台模板的常青树：稳重、齐全，企业内部系统常用。", "description": "The evergreen Bootstrap admin template — complete and dependable.", "keywords": [ "adminlte", "template", "data" ], "platforms": [ "all" ], "function": "data", "placements": [ "na" ], "granularity": "block", "url": "https://adminlte.io", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "dashboard", "drawer-sidebar" ], "status": "published", "license": { "spdx": "MIT", "author": "AdminLTE", "source_url": "https://adminlte.io", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "animista": { "id": "animista", "kind": "resource", "type": "resource", "name_zh": "Animista 动画预设", "name_en": "Animista", "summary_zh": "CSS 动画预设原型站：点选预设、调参数、复制代码，入场/强调动画的灵感库。", "description": "A CSS animation preset playground — pick, tune, copy the code.", "keywords": [ "animista", "tool", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://animista.net", "usage": "tool", "reference_only": false, "fee_note_zh": "免费使用（站内许可）", "patterns": [ "effects-backgrounds" ], "status": "published", "license": { "spdx": "NOASSERTION", "author": "Animista", "source_url": "https://animista.net", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "ant-design": { "id": "ant-design", "kind": "resource", "type": "resource", "name_zh": "Ant Design（蚂蚁）", "name_en": "Ant Design", "summary_zh": "国内中后台的事实标准：表格、表单、列表都是行业参照物。", "description": "The de-facto standard for admin interfaces in China — tables, forms, lists.", "keywords": [ "ant design", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://ant.design", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "data-display", "forms", "list", "settings" ], "status": "published", "license": { "spdx": "MIT", "author": "Ant Group", "source_url": "https://ant.design", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "apple-hig": { "id": "apple-hig", "kind": "resource", "type": "resource", "name_zh": "Apple 人机界面指南 HIG（仅参考）", "name_en": "Apple Human Interface Guidelines", "summary_zh": "iOS 设计的官方规范：只读、只参考。本站绝不打包 Apple 官方套件与 SF Pro 字体。", "description": "Apple's official iOS design guidelines — read and reference only. This site never bundles Apple kits or SF Pro.", "keywords": [ "apple human interface guidelines", "spec", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://developer.apple.com/design/human-interface-guidelines", "usage": "spec", "reference_only": true, "fee_note_zh": "免费查阅（仅参考）", "patterns": [ "bottom-tab-bar", "top-navigation" ], "status": "published", "license": { "spdx": "NOASSERTION", "author": "Apple", "source_url": "https://developer.apple.com/design/human-interface-guidelines", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "arkui": { "id": "arkui", "kind": "resource", "type": "resource", "name_zh": "ArkUI（鸿蒙）", "name_en": "ArkUI", "summary_zh": "HarmonyOS 的官方 UI 框架底座（开源部分）：做鸿蒙界面先看它，声明式写法与 ArkTS 配套。", "description": "The open-source UI framework base of HarmonyOS, paired with ArkTS declarative syntax.", "keywords": [ "arkui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/openharmony/arkui_ace_engine", "usage": "library", "reference_only": false, "fee_note_zh": "免费（Apache-2.0）", "patterns": [ "bottom-tab-bar", "list" ], "status": "published", "license": { "spdx": "Apache-2.0", "author": "OpenHarmony", "source_url": "https://github.com/openharmony/arkui_ace_engine", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "astro-paper": { "id": "astro-paper", "kind": "resource", "type": "template", "name_zh": "Astro Paper 博客模板", "name_en": "Astro Paper", "summary_zh": "极简博客模板的范本：排版干净、性能满分，写博客直接开用。", "description": "A minimal, typography-first blog template with top performance scores.", "keywords": [ "astro paper", "template", "marketing" ], "platforms": [ "all" ], "function": "marketing", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/satnaing/astro-paper", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "blog-content", "typography" ], "status": "published", "license": { "spdx": "MIT", "author": "satnaing", "source_url": "https://github.com/satnaing/astro-paper", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "astrowind": { "id": "astrowind", "kind": "resource", "type": "template", "name_zh": "AstroWind 落地页模板", "name_en": "AstroWind", "summary_zh": "Astro + Tailwind 的落地页与博客范式：Hero、特性、定价、FAQ 一应俱全。", "description": "An Astro + Tailwind landing page and blog template with all the standard sections.", "keywords": [ "astrowind", "template", "marketing" ], "platforms": [ "all" ], "function": "marketing", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/onwidget/astrowind", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "marketing-landing", "blog-content" ], "status": "published", "license": { "spdx": "MIT", "author": "onWidget", "source_url": "https://github.com/onwidget/astrowind", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "bolt-diy": { "id": "bolt-diy", "kind": "resource", "type": "resource", "name_zh": "bolt.diy（开源 AI 建站）", "name_en": "bolt.diy", "summary_zh": "开源 AI 建站工具：它的系统提示词（prompts.ts）是学「怎么让 AI 写界面」的最佳范本。", "description": "An open-source AI site builder — its system prompt (prompts.ts) is a masterclass in directing AI to build UIs.", "keywords": [ "bolt diy", "reference", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/stackblitz-labs/bolt.diy", "usage": "reference", "reference_only": true, "fee_note_zh": "免费（MIT）", "patterns": [], "status": "published", "license": { "spdx": "MIT", "author": "StackBlitz Labs", "source_url": "https://github.com/stackblitz-labs/bolt.diy", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "carbon": { "id": "carbon", "kind": "resource", "type": "resource", "name_zh": "Carbon（IBM）", "name_en": "Carbon Design System", "summary_zh": "IBM 的设计系统：Token 体系与数据密集型界面的标杆，后台产品必读参考。", "description": "IBM's design system — a benchmark for token systems and data-dense interfaces.", "keywords": [ "carbon design system", "library", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://carbondesignsystem.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（Apache-2.0）", "patterns": [ "dashboard", "data-display", "theme-tokens" ], "status": "published", "license": { "spdx": "Apache-2.0", "author": "IBM", "source_url": "https://carbondesignsystem.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "chakra-ui": { "id": "chakra-ui", "kind": "resource", "type": "resource", "name_zh": "Chakra UI", "name_en": "Chakra UI", "summary_zh": "以可访问性为底线的 React 组件库：样式用 props 写，上手快。", "description": "An accessibility-first React component library with prop-based styling.", "keywords": [ "chakra ui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://chakra-ui.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "forms", "modals-overlays" ], "status": "published", "license": { "spdx": "MIT", "author": "Chakra UI", "source_url": "https://chakra-ui.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "coolors": { "id": "coolors", "kind": "resource", "type": "resource", "name_zh": "Coolors 配色生成器", "name_en": "Coolors 配色生成器", "summary_zh": "空格连打生成配色的国民工具：锁定主色再迭代，导出色板给设计与开发共用。", "description": "空格连打生成配色的国民工具：锁定主色再迭代，导出色板给设计与开发共用。", "keywords": [ "visual", "reference", "coolors" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://coolors.co/palette/000814-001d3d-003566-ffc300-ffd60a", "usage": "tool", "reference_only": true, "fee_note_zh": "免费为主", "status": "published", "license": { "spdx": "NOASSERTION", "author": "Coolors", "source_url": "https://coolors.co/palette/000814-001d3d-003566-ffc300-ffd60a", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "css-loaders": { "id": "css-loaders", "kind": "resource", "type": "resource", "name_zh": "CSS Loaders 加载动画集", "name_en": "CSS Loaders", "summary_zh": "纯 CSS 加载动画合集：600+ 个 spinner 与 loader，复制一段 CSS 就能用。", "description": "600+ pure-CSS loading spinners and loaders — copy one snippet and go.", "keywords": [ "css loaders", "tool", "feedback" ], "platforms": [ "all" ], "function": "feedback", "placements": [ "na" ], "granularity": "block", "url": "https://cssloaders.github.io", "usage": "tool", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "loading-feedback" ], "status": "published", "license": { "spdx": "MIT", "author": "CSS Loaders", "source_url": "https://cssloaders.github.io", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "dotlottie": { "id": "dotlottie", "kind": "resource", "type": "resource", "name_zh": "dotLottie 运行时", "name_en": "dotLottie", "summary_zh": "Lottie 的现代运行时：一个 .lottie 文件打包动画与资源，各端播放一致。", "description": "The modern Lottie runtime — one .lottie file bundles animation and assets for every platform.", "keywords": [ "dotlottie", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/LottieFiles/dotlottie-web", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "loading-feedback" ], "status": "published", "license": { "spdx": "MIT", "author": "LottieFiles", "source_url": "https://github.com/LottieFiles/dotlottie-web", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "easings-net": { "id": "easings-net", "kind": "resource", "type": "resource", "name_zh": "Easings 缓动速查", "name_en": "Easings 缓动速查", "summary_zh": "30 种缓动函数的可视化对照：点开任意一条看曲线、动画预览与 CSS / 代码实现。", "description": "30 种缓动函数的可视化对照：点开任意一条看曲线、动画预览与 CSS / 代码实现。", "keywords": [ "motion", "reference", "easings-net" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "token", "url": "https://easings.net/en?hidden=true", "usage": "tool", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "easings.net", "source_url": "https://easings.net/en?hidden=true", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "figma-beginner-resources": { "id": "figma-beginner-resources", "kind": "resource", "type": "resource", "name_zh": "Figma 入门学习资源", "name_en": "Figma 入门学习资源", "summary_zh": "从官方 Playground 文件到系统课程的路径整理，按「练什么技能」而不是按热度排。", "description": "从官方 Playground 文件到系统课程的路径整理，按「练什么技能」而不是按热度排。", "keywords": [ "UI/UX", "reference", "figma-beginner-resources" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "page", "url": "https://www.uiguides.com/best/figma-resources-for-beginners", "usage": "reference", "reference_only": true, "fee_note_zh": "免费为主", "status": "published", "license": { "spdx": "NOASSERTION", "author": "UI Guides", "source_url": "https://www.uiguides.com/best/figma-resources-for-beginners", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "figma-free-templates": { "id": "figma-free-templates", "kind": "resource", "type": "resource", "name_zh": "Figma 免费模板精选", "name_en": "Figma 免费模板精选", "summary_zh": "UI Kit、线框 kit、图标集与设计系统起步文件的精选清单，标注每个文件的确切获取位置。", "description": "UI Kit、线框 kit、图标集与设计系统起步文件的精选清单，标注每个文件的确切获取位置。", "keywords": [ "UI/UX", "reference", "figma-free-templates" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "page", "url": "https://www.uiguides.com/best/free-figma-templates", "usage": "template", "reference_only": true, "fee_note_zh": "免费为主", "status": "published", "license": { "spdx": "NOASSERTION", "author": "UI Guides", "source_url": "https://www.uiguides.com/best/free-figma-templates", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "fluent-2": { "id": "fluent-2", "kind": "resource", "type": "resource", "name_zh": "Fluent 2（微软）", "name_en": "Fluent 2", "summary_zh": "微软的设计语言：桌面与办公场景的规范参照，Token 与主题做法值得学。", "description": "Microsoft's design language — the reference for desktop and productivity scenarios.", "keywords": [ "fluent 2", "spec", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://fluent2.microsoft.design", "usage": "spec", "reference_only": true, "fee_note_zh": "免费（MIT）", "patterns": [ "theme-tokens", "dashboard" ], "status": "published", "license": { "spdx": "MIT", "author": "Microsoft", "source_url": "https://fluent2.microsoft.design", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "flutter-shadcn-ui": { "id": "flutter-shadcn-ui", "kind": "resource", "type": "resource", "name_zh": "flutter-shadcn-ui", "name_en": "flutter-shadcn-ui", "summary_zh": "把 shadcn/ui 的组件语言搬进 Flutter：同一套设计，两端落地。", "description": "shadcn/ui's component language ported to Flutter.", "keywords": [ "flutter shadcn ui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/nank1ro/flutter-shadcn-ui", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "card", "dashboard" ], "status": "published", "license": { "spdx": "MIT", "author": "flutter-shadcn-ui", "source_url": "https://github.com/nank1ro/flutter-shadcn-ui", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "forui": { "id": "forui", "kind": "resource", "type": "resource", "name_zh": "Forui（Flutter）", "name_en": "Forui", "summary_zh": "给 Flutter 用的极简风组件库，气质接近 shadcn，桌面与移动通吃。", "description": "Minimalist Flutter components in the spirit of shadcn, for desktop and mobile.", "keywords": [ "forui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://forui.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "card", "forms" ], "status": "published", "license": { "spdx": "MIT", "author": "Forui", "source_url": "https://forui.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "gestalt": { "id": "gestalt", "kind": "resource", "type": "resource", "name_zh": "Gestalt（Pinterest）", "name_en": "Gestalt", "summary_zh": "Pinterest 的设计系统：瀑布流 Masonry 的出处，图片型产品的排布参照。", "description": "Pinterest's design system — the home of the Masonry layout and image-first patterns.", "keywords": [ "gestalt", "spec", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://gestalt.pinterest.com", "usage": "spec", "reference_only": true, "fee_note_zh": "免费（Apache-2.0）", "patterns": [ "grid-masonry", "card" ], "status": "published", "license": { "spdx": "Apache-2.0", "author": "Pinterest", "source_url": "https://gestalt.pinterest.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "getwidget": { "id": "getwidget", "kind": "resource", "type": "resource", "name_zh": "GetWidget（Flutter）", "name_en": "GetWidget", "summary_zh": "Flutter 老牌组件库，组件数量多、文档全，列表与卡片是强项。", "description": "A long-running Flutter component library with broad coverage and full docs.", "keywords": [ "getwidget", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://getwidget.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（官网标注 MIT，未复核）", "patterns": [ "list", "card", "media" ], "status": "published", "license": { "spdx": "MIT", "author": "GetWidget", "source_url": "https://getwidget.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "gluestack-ui": { "id": "gluestack-ui", "kind": "resource", "type": "resource", "name_zh": "gluestack-ui", "name_en": "gluestack-ui", "summary_zh": "可复制源码的跨端组件库（React Native / Web），思路与 shadcn 相近。", "description": "Copy-paste cross-platform components for React Native and web, shadcn-style.", "keywords": [ "gluestack ui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://gluestack.io", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "card", "forms" ], "status": "published", "license": { "spdx": "MIT", "author": "gluestack", "source_url": "https://gluestack.io", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "google-fonts": { "id": "google-fonts", "kind": "resource", "type": "resource", "name_zh": "Google Fonts 字体库", "name_en": "Google Fonts 字体库", "summary_zh": "1,900+ 开源字体家族在线试排：按分类、语言与可变字体筛选，中英文字体搭配先来这里试。", "description": "1,900+ 开源字体家族在线试排：按分类、语言与可变字体筛选，中英文字体搭配先来这里试。", "keywords": [ "visual", "reference", "google-fonts" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://fonts.google.com/?hl=de", "usage": "library", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "Google", "source_url": "https://fonts.google.com/?hl=de", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "harmonyos-design": { "id": "harmonyos-design", "kind": "resource", "type": "resource", "name_zh": "HarmonyOS 设计指南（仅参考）", "name_en": "HarmonyOS Design Guidelines", "summary_zh": "鸿蒙官方设计指南：只读、只参考。官方资源在取得书面许可前不打包，本站鸿蒙条目为自绘示意 + 规范要点。", "description": "Huawei's official HarmonyOS design guidelines — reference only. No official assets are bundled without written permission; this site's HarmonyOS entries are self-drawn schematics plus spec notes.", "keywords": [ "harmonyos design guidelines", "spec", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://developer.huawei.com/consumer/cn/design/", "usage": "spec", "reference_only": true, "fee_note_zh": "免费查阅（仅参考）", "patterns": [ "bottom-tab-bar", "list" ], "status": "published", "license": { "spdx": "NOASSERTION", "author": "Huawei", "source_url": "https://developer.huawei.com/consumer/cn/design/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "iconify": { "id": "iconify", "kind": "resource", "type": "asset", "name_zh": "Iconify 图标检索底座", "name_en": "Iconify", "summary_zh": "把上百套图标集统一成一个检索与调用接口：工作台找图标的中枢。", "description": "One search and API over 100+ icon sets — the hub for finding icons.", "keywords": [ "iconify", "tool", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://iconify.design", "usage": "tool", "reference_only": false, "fee_note_zh": "免费（MIT 框架，各图标集许可独立）", "patterns": [ "icons" ], "status": "published", "license": { "spdx": "MIT", "author": "Iconify", "source_url": "https://iconify.design", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "inter-font": { "id": "inter-font", "kind": "resource", "type": "asset", "name_zh": "Inter 字体", "name_en": "Inter", "summary_zh": "为屏幕而生的西文字体：界面里的英文和数字用它基本不会错，本站正文字体。", "description": "A typeface made for screens — the safe default for UI Latin text and numbers.", "keywords": [ "inter", "library", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "token", "url": "https://rsms.me/inter/", "usage": "library", "reference_only": false, "fee_note_zh": "免费（OFL-1.1）", "patterns": [ "typography" ], "status": "published", "license": { "spdx": "OFL-1.1", "author": "Rasmus Andersson", "source_url": "https://rsms.me/inter/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "jetbrains-mono": { "id": "jetbrains-mono", "kind": "resource", "type": "asset", "name_zh": "JetBrains Mono 等宽字体", "name_en": "JetBrains Mono", "summary_zh": "代码与数字的等宽字体：本站代码字体，数字滚动时不跳宽靠它。", "description": "A monospace font for code and numbers — this site's code font.", "keywords": [ "jetbrains mono", "library", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "token", "url": "https://www.jetbrains.com/lp/mono/", "usage": "library", "reference_only": false, "fee_note_zh": "免费（OFL-1.1）", "patterns": [ "typography" ], "status": "published", "license": { "spdx": "OFL-1.1", "author": "JetBrains", "source_url": "https://www.jetbrains.com/lp/mono/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "langgpt": { "id": "langgpt", "kind": "resource", "type": "resource", "name_zh": "LangGPT 提示词结构", "name_en": "LangGPT", "summary_zh": "像写代码一样写提示词的结构框架：角色、规则、工作流分节——本站七段式与它同源同理。", "description": "A framework for writing prompts like code — roles, rules, workflows in sections.", "keywords": [ "langgpt", "reference", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/yzfly/LangGPT", "usage": "reference", "reference_only": true, "fee_note_zh": "免费（目录标注 Apache-2.0，未复核）", "patterns": [], "status": "published", "license": { "spdx": "Apache-2.0", "author": "LangGPT", "source_url": "https://github.com/yzfly/LangGPT", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "laws-of-ux-index": { "id": "laws-of-ux-index", "kind": "resource", "type": "resource", "name_zh": "Laws of UX 定律索引", "name_en": "Laws of UX 定律索引", "summary_zh": "定律官网的全量索引：30 条原则逐条链接到定义、要点与延伸阅读，查一条只要十秒。", "description": "定律官网的全量索引：30 条原则逐条链接到定义、要点与延伸阅读，查一条只要十秒。", "keywords": [ "interaction", "reference", "laws-of-ux-index" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "component", "url": "https://lawsofux.com/llms.txt", "usage": "reference", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "Jon Yablonski", "source_url": "https://lawsofux.com/llms.txt", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "laws-of-ux-nulab": { "id": "laws-of-ux-nulab", "kind": "resource", "type": "resource", "name_zh": "Laws of UX 全解", "name_en": "Laws of UX 全解", "summary_zh": "28 条定律的图文讲解版：每条给定义、来源与网页设计中的实际例子，适合系统补课。", "description": "28 条定律的图文讲解版：每条给定义、来源与网页设计中的实际例子，适合系统补课。", "keywords": [ "interaction", "reference", "laws-of-ux-nulab" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "component", "url": "https://nulab.com/learn/design-and-ux/laws-of-ux/", "usage": "reference", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "Nulab Learn", "source_url": "https://nulab.com/learn/design-and-ux/laws-of-ux/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "lottiefiles": { "id": "lottiefiles", "kind": "resource", "type": "resource", "name_zh": "LottieFiles 免费动画库", "name_en": "LottieFiles Free Library", "summary_zh": "最大的 Lottie 动画集市：免费库可商用，下载 JSON 就能在 App 和网页里播。", "description": "The largest Lottie animation library; the free tier is usable commercially as JSON animations.", "keywords": [ "lottiefiles free library", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://lottiefiles.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费库可用（Lottie 简单许可）", "patterns": [ "loading-feedback", "empty-states" ], "status": "published", "license": { "spdx": "NOASSERTION", "author": "LottieFiles", "source_url": "https://lottiefiles.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "lucide": { "id": "lucide", "kind": "resource", "type": "asset", "name_zh": "Lucide 图标", "name_en": "Lucide Icons", "summary_zh": "最干净的一套线性图标：线宽统一、风格克制，Web 与 App 都能用，本站图标首选参照。", "description": "The cleanest line icon set — consistent strokes, restrained style, for web and apps.", "keywords": [ "lucide icons", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://lucide.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（ISC）", "patterns": [ "icons" ], "status": "published", "license": { "spdx": "ISC", "author": "Lucide", "source_url": "https://lucide.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "magic-ui": { "id": "magic-ui", "kind": "resource", "type": "resource", "name_zh": "Magic UI 动效组件", "name_en": "Magic UI", "summary_zh": "React + Tailwind 的动效组件集：跑马灯、光晕、数字滚动都有，本站效果库的重要参考生态。", "description": "Animated components for React + Tailwind — marquees, glows, counters; a key reference ecosystem for this site's effects.", "keywords": [ "magic ui", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://magicui.design", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "effects-backgrounds", "loading-feedback" ], "status": "published", "license": { "spdx": "MIT", "author": "Magic UI", "source_url": "https://magicui.design", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "mantine": { "id": "mantine", "kind": "resource", "type": "resource", "name_zh": "Mantine", "name_en": "Mantine", "summary_zh": "React 组件与 hooks 大礼包：100+ 组件，连日期选择这种难啃的都有。", "description": "A batteries-included React library: 100+ components and hooks, even date pickers.", "keywords": [ "mantine", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://mantine.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "forms", "card" ], "status": "published", "license": { "spdx": "MIT", "author": "Mantine", "source_url": "https://mantine.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "material-design-3": { "id": "material-design-3", "kind": "resource", "type": "resource", "name_zh": "Material Design 3 规范", "name_en": "Material Design 3", "summary_zh": "Google 的设计语言全文：Android 与跨端项目的规范源头，Token 体系的参照系。", "description": "Google's design language in full — the spec source for Android and cross-platform work.", "keywords": [ "material design 3", "spec", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://m3.material.io", "usage": "spec", "reference_only": true, "fee_note_zh": "免费（代码 Apache-2.0）", "patterns": [ "theme-tokens", "bottom-tab-bar" ], "status": "published", "license": { "spdx": "Apache-2.0", "author": "Google", "source_url": "https://m3.material.io", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "material-design-primer": { "id": "material-design-primer", "kind": "resource", "type": "resource", "name_zh": "Material Design 入门导览", "name_en": "Material Design 入门导览", "summary_zh": "Google Material 体系的导读：主题、色彩角色、组件与动效规范，配实现提示，适合快速建立框架。", "description": "Google Material 体系的导读：主题、色彩角色、组件与动效规范，配实现提示，适合快速建立框架。", "keywords": [ "UI/UX", "reference", "material-design-primer" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "token", "url": "https://guides.codepath.org/android/Material-Design-Primer", "usage": "spec", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "CodePath Guides", "source_url": "https://guides.codepath.org/android/Material-Design-Primer", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "material-symbols": { "id": "material-symbols", "kind": "resource", "type": "asset", "name_zh": "Material Symbols 图标", "name_en": "Material Symbols", "summary_zh": "Google 的可变图标字体：粗细、填充可调，Android 与 Material 体系项目的默认图标。", "description": "Google's variable icon font — adjustable weight and fill; the default for Material projects.", "keywords": [ "material symbols", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://fonts.google.com/icons", "usage": "library", "reference_only": false, "fee_note_zh": "免费（Apache-2.0）", "patterns": [ "icons" ], "status": "published", "license": { "spdx": "Apache-2.0", "author": "Google", "source_url": "https://fonts.google.com/icons", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "mobbin-guide": { "id": "mobbin-guide", "kind": "resource", "type": "resource", "name_zh": "Mobbin 模式库导览", "name_en": "Mobbin 模式库导览", "summary_zh": "真实上线产品的界面模式库如何用：按屏、按元素、按流程检索，找参考别再翻截图文件夹。", "description": "真实上线产品的界面模式库如何用：按屏、按元素、按流程检索，找参考别再翻截图文件夹。", "keywords": [ "interaction", "reference", "mobbin-guide" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "page", "url": "https://stack.liuhuo.org/en/discover/mobbin", "usage": "reference", "reference_only": true, "fee_note_zh": "免费导览", "status": "published", "license": { "spdx": "NOASSERTION", "author": "Liuhuo Stack", "source_url": "https://stack.liuhuo.org/en/discover/mobbin", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "motion": { "id": "motion", "kind": "resource", "type": "resource", "name_zh": "Motion 动画引擎", "name_en": "Motion", "summary_zh": "现代 Web 动画引擎（Framer Motion 的延续）：声明式动画、滚动驱动、手势都拿手。本站动效只用这类 MIT 引擎，不用 GSAP。", "description": "The modern web animation engine (successor to Framer Motion). This site uses MIT engines like this — never GSAP.", "keywords": [ "motion", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://motion.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "effects-backgrounds" ], "status": "published", "license": { "spdx": "MIT", "author": "Motion", "source_url": "https://motion.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "mui": { "id": "mui", "kind": "resource", "type": "resource", "name_zh": "MUI（Material UI）", "name_en": "MUI", "summary_zh": "React 生态最老牌的 Material 组件库：组件全、文档厚、AI 生成命中率最高之一。", "description": "The most established Material component library for React.", "keywords": [ "mui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://mui.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT，核心）", "patterns": [ "forms", "data-display", "top-navigation" ], "status": "published", "license": { "spdx": "MIT", "author": "MUI", "source_url": "https://mui.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "nativewind": { "id": "nativewind", "kind": "resource", "type": "resource", "name_zh": "NativeWind", "name_en": "NativeWind", "summary_zh": "让 React Native 用上 Tailwind 的写法：类名写样式，原生端终于和 Web 端一个心智。", "description": "Tailwind-style utility classes for React Native.", "keywords": [ "nativewind", "library", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://www.nativewind.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "theme-tokens" ], "status": "published", "license": { "spdx": "MIT", "author": "NativeWind", "source_url": "https://www.nativewind.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "nng-articles": { "id": "nng-articles", "kind": "resource", "type": "resource", "name_zh": "NN/g 文章库", "name_en": "NN/g 文章库", "summary_zh": "可用性研究的源头：十大原则、用户研究方法、眼动与表单研究，评审时引依据来这里。", "description": "可用性研究的源头：十大原则、用户研究方法、眼动与表单研究，评审时引依据来这里。", "keywords": [ "UI/UX", "reference", "nng-articles" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "component", "url": "https://www.nngroup.com/articles/?asset=articles", "usage": "reference", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "Nielsen Norman Group", "source_url": "https://www.nngroup.com/articles/?asset=articles", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "obytes-rn-template": { "id": "obytes-rn-template", "kind": "resource", "type": "template", "name_zh": "React Native 模板（Obytes）", "name_en": "React Native Template Obytes", "summary_zh": "Expo 移动 App 的生产级脚手架：导航、状态、表单、测试都预置好，移动模板的分层标杆。", "description": "A production-grade Expo starter: navigation, state, forms, and tests preconfigured.", "keywords": [ "react native template obytes", "template", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/obytes/react-native-template-obytes", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "auth", "bottom-tab-bar" ], "status": "published", "license": { "spdx": "MIT", "author": "Obytes", "source_url": "https://github.com/obytes/react-native-template-obytes", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "open-doodles": { "id": "open-doodles", "kind": "resource", "type": "asset", "name_zh": "Open Doodles 插画", "name_en": "Open Doodles", "summary_zh": "手绘风免费插画：涂鸦人物与场景，空状态和引导页的常用粮草。", "description": "Hand-drawn free illustrations — doodle people and scenes for empty states and onboarding.", "keywords": [ "open doodles", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://www.opendoodles.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（CC0）", "patterns": [ "illustrations", "empty-states" ], "status": "published", "license": { "spdx": "CC0-1.0", "author": "Pablo Stanley", "source_url": "https://www.opendoodles.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "open-lovable": { "id": "open-lovable", "kind": "resource", "type": "resource", "name_zh": "Open Lovable", "name_en": "Open Lovable", "summary_zh": "开源版 AI 建站流程：从一句话到可预览网站的全链路，学流程拆解看它。", "description": "An open-source AI website builder — the full prompt-to-preview pipeline, open to study.", "keywords": [ "open lovable", "reference", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/firecrawl/open-lovable", "usage": "reference", "reference_only": true, "fee_note_zh": "免费（MIT）", "patterns": [], "status": "published", "license": { "spdx": "MIT", "author": "Firecrawl", "source_url": "https://github.com/firecrawl/open-lovable", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "open-peeps": { "id": "open-peeps", "kind": "resource", "type": "asset", "name_zh": "Open Peeps 人物插画", "name_en": "Open Peeps", "summary_zh": "可拼装的人物插画系统：脸、发型、姿势自由组合，人物一致性难题的现成解。", "description": "A mix-and-match character illustration system — faces, hair, poses combine freely.", "keywords": [ "open peeps", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://www.openpeeps.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（CC0）", "patterns": [ "illustrations" ], "status": "published", "license": { "spdx": "CC0-1.0", "author": "Pablo Stanley", "source_url": "https://www.openpeeps.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "paper-shaders": { "id": "paper-shaders", "kind": "resource", "type": "resource", "name_zh": "Paper Shaders 着色器", "name_en": "Paper Shaders", "summary_zh": "现成的 WebGL 着色器背景：网格渐变、波纹、光晕，不写 GLSL 也能用高级背景。", "description": "Ready-made WebGL shader backgrounds — mesh gradients, waves, glows without writing GLSL.", "keywords": [ "paper shaders", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/paper-design/shaders", "usage": "library", "reference_only": false, "fee_note_zh": "免费（Apache-2.0）", "patterns": [ "effects-backgrounds" ], "status": "published", "license": { "spdx": "Apache-2.0", "author": "Paper", "source_url": "https://github.com/paper-design/shaders", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "penpot-files": { "id": "penpot-files", "kind": "resource", "type": "template", "name_zh": "Penpot 官方模板文件库", "name_en": "Penpot Libraries & Templates", "summary_zh": "少有的原生设计文件批量来源：能直接下 .penpot 文件拆解学习，模板入库的种子。", "description": "A rare source of native design files — downloadable .penpot templates to study and reuse.", "keywords": [ "penpot libraries templates", "template", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://penpot.app/libraries-templates", "usage": "template", "reference_only": false, "fee_note_zh": "免费（CC BY 4.0）", "patterns": [ "marketing-landing", "dashboard" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Penpot", "source_url": "https://penpot.app/libraries-templates", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "primer": { "id": "primer", "kind": "resource", "type": "resource", "name_zh": "Primer（GitHub）", "name_en": "Primer", "summary_zh": "GitHub 自家设计系统：克制、工程化，面包屑与数据展示值得抄作业。", "description": "GitHub's own design system — restrained and engineering-minded.", "keywords": [ "primer", "library", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://primer.style", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "breadcrumb", "data-display" ], "status": "published", "license": { "spdx": "MIT", "author": "GitHub", "source_url": "https://primer.style", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "radix-ui": { "id": "radix-ui", "kind": "resource", "type": "resource", "name_zh": "Radix UI（无样式原语）", "name_en": "Radix UI", "summary_zh": "只管行为不管长相的组件原语：弹层、菜单、开关的键盘与焦点处理都替你做好了。", "description": "Unstyled primitives that get behavior right: keyboard, focus, and ARIA for overlays and controls.", "keywords": [ "radix ui", "library", "overlay" ], "platforms": [ "all" ], "function": "overlay", "placements": [ "na" ], "granularity": "block", "url": "https://www.radix-ui.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "modals-overlays", "forms" ], "status": "published", "license": { "spdx": "MIT", "author": "WorkOS", "source_url": "https://www.radix-ui.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "shadcn-admin": { "id": "shadcn-admin", "kind": "resource", "type": "template", "name_zh": "shadcn-admin 后台模板", "name_en": "shadcn-admin", "summary_zh": "shadcn/ui 拼出的完整后台：仪表盘、设置、聊天页都有，拆开就是现成的页面范式。", "description": "A complete admin dashboard built with shadcn/ui — dashboard, settings, chat pages included.", "keywords": [ "shadcn admin", "template", "data" ], "platforms": [ "all" ], "function": "data", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/satnaing/shadcn-admin", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "dashboard", "settings", "messages" ], "status": "published", "license": { "spdx": "MIT", "author": "satnaing", "source_url": "https://github.com/satnaing/shadcn-admin", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "shadcn-landing-page": { "id": "shadcn-landing-page", "kind": "resource", "type": "template", "name_zh": "shadcn 落地页模板", "name_en": "shadcn Landing Page", "summary_zh": "shadcn/ui 拼的标准落地页：区块拆分清楚，照着区块清单就能拼自己的营销页。", "description": "A standard landing page assembled from shadcn/ui, cleanly split into sections.", "keywords": [ "shadcn landing page", "template", "marketing" ], "platforms": [ "all" ], "function": "marketing", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/leoMirandaa/shadcn-landing-page", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "marketing-landing" ], "status": "published", "license": { "spdx": "MIT", "author": "leoMirandaa", "source_url": "https://github.com/leoMirandaa/shadcn-landing-page", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "shadcn-ui": { "id": "shadcn-ui", "kind": "resource", "type": "resource", "name_zh": "shadcn/ui 组件库", "name_en": "shadcn/ui", "summary_zh": "不是装进项目的库，而是把组件源码复制进你自己的仓库——改起来毫无阻力，AI 也最熟它。", "description": "Copy-paste component source built on Radix and Tailwind — you own the code, and AI tools know it best.", "keywords": [ "shadcn ui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://ui.shadcn.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "forms", "modals-overlays", "top-navigation" ], "status": "published", "license": { "spdx": "MIT", "author": "shadcn", "source_url": "https://ui.shadcn.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "simple-icons": { "id": "simple-icons", "kind": "resource", "type": "asset", "name_zh": "Simple Icons 品牌图标", "name_en": "Simple Icons", "summary_zh": "各大品牌 logo 的单色 SVG 合集：放「支持的平台/合作方」时用它，别自己描品牌 logo。", "description": "Monochrome SVG brand logos — use these instead of tracing brand marks yourself.", "keywords": [ "simple icons", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://simpleicons.org", "usage": "library", "reference_only": false, "fee_note_zh": "免费（CC0）", "patterns": [ "icons" ], "status": "published", "license": { "spdx": "CC0-1.0", "author": "Simple Icons", "source_url": "https://simpleicons.org", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "source-han-sans": { "id": "source-han-sans", "kind": "resource", "type": "asset", "name_zh": "思源黑体 Source Han Sans", "name_en": "Source Han Sans", "summary_zh": "中日韩统一黑体：中文界面字体的稳妥选择，字重齐全，开源可商用。", "description": "The unified CJK sans — the dependable choice for Chinese UI text, full weight range, open license.", "keywords": [ "source han sans", "library", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "token", "url": "https://github.com/adobe-fonts/source-han-sans", "usage": "library", "reference_only": false, "fee_note_zh": "免费（OFL-1.1）", "patterns": [ "typography" ], "status": "published", "license": { "spdx": "OFL-1.1", "author": "Adobe & Google", "source_url": "https://github.com/adobe-fonts/source-han-sans", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "swiftuix": { "id": "swiftuix", "kind": "resource", "type": "resource", "name_zh": "SwiftUIX", "name_en": "SwiftUIX", "summary_zh": "给 SwiftUI 补齐缺失的系统级组件，iOS 原生开发的常用扩展库。", "description": "Fills the gaps in SwiftUI with system-level components Apple didn't ship.", "keywords": [ "swiftuix", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://github.com/SwiftUIX/SwiftUIX", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "list", "forms" ], "status": "published", "license": { "spdx": "MIT", "author": "SwiftUIX", "source_url": "https://github.com/SwiftUIX/SwiftUIX", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "tabler-icons": { "id": "tabler-icons", "kind": "resource", "type": "asset", "name_zh": "Tabler Icons 图标", "name_en": "Tabler Icons", "summary_zh": "4000+ 线性图标，数量与质量兼备，后台产品用它基本不用再找第二套。", "description": "4,000+ line icons — quantity and quality together.", "keywords": [ "tabler icons", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://tabler.io/icons", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "icons" ], "status": "published", "license": { "spdx": "MIT", "author": "Tabler", "source_url": "https://tabler.io/icons", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "tabler": { "id": "tabler", "kind": "resource", "type": "template", "name_zh": "Tabler 后台模板", "name_en": "Tabler", "summary_zh": "老牌免费后台模板：页面量级大、完成度高，后台项目可以直接站在它肩膀上。", "description": "A long-running free admin template with many polished pages.", "keywords": [ "tabler", "template", "data" ], "platforms": [ "all" ], "function": "data", "placements": [ "na" ], "granularity": "block", "url": "https://tabler.io", "usage": "template", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "dashboard", "data-display" ], "status": "published", "license": { "spdx": "MIT", "author": "Tabler", "source_url": "https://tabler.io", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "tamagui": { "id": "tamagui", "kind": "resource", "type": "resource", "name_zh": "Tamagui", "name_en": "Tamagui", "summary_zh": "一套代码同时跑 Web 和 React Native，样式在编译期优化，跨端项目的种子主力。", "description": "One codebase for web and React Native with compile-time style optimization.", "keywords": [ "tamagui", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://tamagui.dev", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "card", "list" ], "status": "published", "license": { "spdx": "MIT", "author": "Tamagui", "source_url": "https://tamagui.dev", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "tdesign": { "id": "tdesign", "kind": "resource", "type": "resource", "name_zh": "TDesign（腾讯）", "name_en": "TDesign", "summary_zh": "腾讯出品的全栈设计系统：Web、移动、小程序、桌面都有，国内生态最完整的一套。", "description": "Tencent's full-stack design system covering web, mobile, mini-programs, and desktop.", "keywords": [ "tdesign", "library", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "block", "url": "https://tdesign.tencent.com", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "bottom-tab-bar", "forms", "dashboard" ], "status": "published", "license": { "spdx": "MIT", "author": "Tencent", "source_url": "https://tdesign.tencent.com", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "tsparticles": { "id": "tsparticles", "kind": "resource", "type": "resource", "name_zh": "tsParticles 粒子引擎", "name_en": "tsParticles", "summary_zh": "老牌粒子背景引擎：星空、雪花、连线网络，配置即生成，性能可控。", "description": "The classic particle background engine — stars, snow, networks, all config-driven.", "keywords": [ "tsparticles", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://particles.js.org", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT）", "patterns": [ "effects-backgrounds" ], "status": "published", "license": { "spdx": "MIT", "author": "tsParticles", "source_url": "https://particles.js.org", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "uiverse": { "id": "uiverse", "kind": "resource", "type": "resource", "name_zh": "Uiverse 社区效果库", "name_en": "Uiverse", "summary_zh": "社区共创的 CSS 效果大集市：按钮、加载、卡片效果数千个，找灵感和看实现都方便。", "description": "A community marketplace of thousands of CSS effects — buttons, loaders, cards.", "keywords": [ "uiverse", "library", "motion" ], "platforms": [ "all" ], "function": "motion", "placements": [ "na" ], "granularity": "block", "url": "https://uiverse.io", "usage": "library", "reference_only": false, "fee_note_zh": "免费（MIT，逐条以页面标注为准）", "patterns": [ "effects-backgrounds", "loading-feedback" ], "status": "published", "license": { "spdx": "MIT", "author": "Uiverse", "source_url": "https://uiverse.io", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "undraw": { "id": "undraw", "kind": "resource", "type": "asset", "name_zh": "unDraw 插画（仅外链）", "name_en": "unDraw", "summary_zh": "最知名的开源风插画站：本站仅外链参考，不打包、不再分发其文件。", "description": "The best-known open-style illustration site — linked for reference only, never bundled or redistributed here.", "keywords": [ "undraw", "reference", "assets" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "token", "url": "https://undraw.co", "usage": "reference", "reference_only": true, "fee_note_zh": "免费使用（站内条款，不可再分发）", "patterns": [ "illustrations", "empty-states" ], "status": "published", "license": { "spdx": "NOASSERTION", "author": "unDraw", "source_url": "https://undraw.co", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "ux-laws-uxfolio": { "id": "ux-laws-uxfolio", "kind": "resource", "type": "resource", "name_zh": "UX 定律实例讲义", "name_en": "UX 定律实例讲义", "summary_zh": "10 条核心定律的极简版讲义，每条都落到可执行的检查动作，适合评审前速览。", "description": "10 条核心定律的极简版讲义，每条都落到可执行的检查动作，适合评审前速览。", "keywords": [ "interaction", "reference", "ux-laws-uxfolio" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "component", "url": "https://blog.uxfol.io/ux-laws/", "usage": "reference", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "UXfolio Blog", "source_url": "https://blog.uxfol.io/ux-laws/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "wcag-22": { "id": "wcag-22", "kind": "resource", "type": "resource", "name_zh": "WCAG 2.2 无障碍规范", "name_en": "WCAG 2.2", "summary_zh": "无障碍的国际标准原文：对比度、焦点、目标尺寸的数字都出自这里。", "description": "The international accessibility standard — the source of contrast, focus, and target-size numbers.", "keywords": [ "wcag 2 2", "spec", "theming" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "block", "url": "https://www.w3.org/TR/WCAG22/", "usage": "spec", "reference_only": true, "fee_note_zh": "免费查阅（W3C 文档许可）", "patterns": [ "theme-tokens", "forms" ], "status": "published", "license": { "spdx": "NOASSERTION", "author": "W3C", "source_url": "https://www.w3.org/TR/WCAG22/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "wcag-wai": { "id": "wcag-wai", "kind": "resource", "type": "resource", "name_zh": "WCAG 无障碍标准", "name_en": "WCAG 无障碍标准", "summary_zh": "对比度、焦点、目标尺寸的国际标准入口：做无障碍别靠感觉，条文在这里可查可引。", "description": "对比度、焦点、目标尺寸的国际标准入口：做无障碍别靠感觉，条文在这里可查可引。", "keywords": [ "visual", "reference", "wcag-wai" ], "platforms": [ "all" ], "function": "theming", "placements": [ "na" ], "granularity": "token", "url": "https://www.w3.org/WAI/standards-guidelines/", "usage": "spec", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "W3C WAI", "source_url": "https://www.w3.org/WAI/standards-guidelines/", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "zcool-navigation": { "id": "zcool-navigation", "kind": "resource", "type": "resource", "name_zh": "站酷设计导航", "name_en": "站酷设计导航", "summary_zh": "国内设计师的精选导航：作品、课程、赛事与资源入口，找中文语境的灵感与同行作品。", "description": "国内设计师的精选导航：作品、课程、赛事与资源入口，找中文语境的灵感与同行作品。", "keywords": [ "visual", "reference", "zcool-navigation" ], "platforms": [ "all" ], "function": "assets", "placements": [ "na" ], "granularity": "page", "url": "https://www.zcool.com.cn/navigation", "usage": "reference", "reference_only": true, "fee_note_zh": "免费", "status": "published", "license": { "spdx": "NOASSERTION", "author": "站酷 ZCOOL", "source_url": "https://www.zcool.com.cn/navigation", "verified": false }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-admin-dashboard": { "id": "scene-admin-dashboard", "kind": "scene", "type": "prompt", "name_zh": "后台仪表盘", "name_en": "Admin Dashboard", "summary_zh": "管理后台首页：侧边导航 + 指标卡组 + 数据表格的经典三件套。", "description": "The admin home trio: sidebar navigation, stat cards, and a data table.", "keywords": [ "scene", "prompt", "data" ], "platforms": [ "web", "desktop" ], "function": "data", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "drawer-nav-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "dashboard-cards-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "data-table-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "top-app-bar-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "drawer-nav", "dashboard-cards", "data-table", "top-app-bar" ], "layout_zh": "左导航常驻（可折叠），右区顶部应用栏（标题 + 搜索 + 账号），内容区第一行 4 张指标卡，第二行数据表格占满剩余高度，表格底部分页。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-app-core": { "id": "scene-app-core", "kind": "scene", "type": "prompt", "name_zh": "App 三屏骨架（首页+列表+详情）", "name_en": "App Three-Screen Skeleton", "summary_zh": "移动 App 最常见的三屏：底部标签栏框架 + 列表首页 + 内容详情。", "description": "The classic three-screen app skeleton: tab bar shell, list home, content detail.", "keywords": [ "scene", "prompt", "content" ], "platforms": [ "ios", "android", "harmonyos" ], "function": "content", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "mobile-tab-bar-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "list-item-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "detail-hero-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "card-basic-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "mobile-tab-bar", "list-item", "detail-hero", "card-basic" ], "layout_zh": "全局框架：底部标签栏常驻 4 个入口。首页为列表（列表行 + 穿插卡片），点任意行进详情页：头图区在上、正文滚动、底部操作条吸底；返回保留列表滚动位置。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-auth-flow": { "id": "scene-auth-flow", "kind": "scene", "type": "prompt", "name_zh": "登录注册流程", "name_en": "Sign-in / Sign-up Flow", "summary_zh": "从打开 App 到登录成功的一整套：登录表单 + 输入规范 + 结果反馈。", "description": "The full sign-in flow: login form, field rules, and result feedback.", "keywords": [ "scene", "prompt", "account" ], "platforms": [ "ios", "android", "harmonyos", "web" ], "function": "account", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "login-form-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "text-field-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "toast-prompt", "version": "1.0.0", "overrides": { "{{position}}": "顶部居中" } } ], "entries": [ "login-form", "text-field", "toast" ], "layout_zh": "整屏单列：顶部品牌区（Logo + 一句欢迎），中部登录表单，第三方登录在分隔线下方，协议勾选贴表单底部；登录成功用 Toast 回执并跳转首页，失败在字段下方报错，不弹 Toast。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-checkout": { "id": "scene-checkout", "kind": "scene", "type": "prompt", "name_zh": "结算流程", "name_en": "Checkout Flow", "summary_zh": "从购物车到下单成功：条目确认、结算表单、步骤指示与结果反馈。", "description": "From cart to order placed: cart items, checkout form, step indicator, result feedback.", "keywords": [ "scene", "prompt", "commerce" ], "platforms": [ "all" ], "function": "commerce", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "cart-item-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "checkout-form-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "toast-prompt", "version": "1.0.0", "overrides": { "{{with-action}}": "纯提示" } } ], "entries": [ "cart-item", "checkout-form", "toast" ], "layout_zh": "两页一回执：购物车页（条目列表 + 底部合计条）→ 结算页（地址、商品确认、优惠、支付方式自上而下，提交按钮带总价）→ 下单成功 Toast + 订单详情入口。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-content-detail": { "id": "scene-content-detail", "kind": "scene", "type": "prompt", "name_zh": "内容详情页", "name_en": "Content Detail Page", "summary_zh": "文章/内容详情整页：顶栏、头图区、正文与底部操作弹层。", "description": "A full content detail page: app bar, hero block, body, and a bottom-sheet action menu.", "keywords": [ "scene", "prompt", "content" ], "platforms": [ "ios", "android", "harmonyos", "web" ], "function": "content", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "top-app-bar-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "detail-hero-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "bottom-sheet-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "top-app-bar", "detail-hero", "bottom-sheet" ], "layout_zh": "顶部应用栏（返回/标题/分享）；头图区后接正文；点分享升起底部分享弹层；底部操作条吸底（收藏 + 评论入口）。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-landing-page": { "id": "scene-landing-page", "kind": "scene", "type": "prompt", "name_zh": "产品落地页", "name_en": "Product Landing Page", "summary_zh": "官网落地页整页：页眉、Hero、定价表的转化三段式。", "description": "A full landing page: header, hero, and pricing — the conversion trio.", "keywords": [ "scene", "prompt", "marketing" ], "platforms": [ "web" ], "function": "marketing", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "web-header-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "hero-section-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "pricing-table-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "web-header", "hero-section", "pricing-table" ], "layout_zh": "页眉吸顶；Hero 左文右图、主 CTA 唯一；中段可插特性与评价（复用卡片组件）；定价表三档居中推荐；页脚收尾再放一个 CTA。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-onboarding-flow": { "id": "scene-onboarding-flow", "kind": "scene", "type": "prompt", "name_zh": "新手引导流程", "name_en": "Onboarding Flow", "summary_zh": "首启三屏引导 + 登录的完整首访路径，讲完价值再要账号。", "description": "First-run path: three onboarding screens into sign-in — value first, account second.", "keywords": [ "scene", "prompt", "onboarding" ], "platforms": [ "ios", "android", "harmonyos" ], "function": "onboarding", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "onboarding-carousel-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "login-form-prompt", "version": "1.0.0", "overrides": { "{{methods}}": "验证码 + 第三方" } } ], "entries": [ "onboarding-carousel", "login-form" ], "layout_zh": "全屏轮播 3 屏（可跳过）→ 最后一屏按钮进登录页；登录成功直达首页，引导只在首启出现一次，版本号变更时可重现。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-profile-center": { "id": "scene-profile-center", "kind": "scene", "type": "prompt", "name_zh": "个人中心", "name_en": "Profile Center", "summary_zh": "「我的」整页：头部资料、通知入口与设置列表的标准组合。", "description": "The full Me page: profile header, notification entry, and settings list.", "keywords": [ "scene", "prompt", "personal" ], "platforms": [ "ios", "android", "harmonyos", "web" ], "function": "personal", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "profile-header-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "settings-list-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "notification-list-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "profile-header", "notification-list", "settings-list" ], "layout_zh": "单列滚动：头部（头像/昵称/数据行）→ 订单与资产快捷入口一行 → 设置分组列表；通知入口在头部右上角带角标，通知列表为独立页。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-settings-page": { "id": "scene-settings-page", "kind": "scene", "type": "prompt", "name_zh": "设置页", "name_en": "Settings Page", "summary_zh": "完整设置页：分组列表与开关行的组合，含危险区。", "description": "A complete settings page: grouped lists and switch rows, with a danger zone.", "keywords": [ "scene", "prompt", "personal" ], "platforms": [ "all" ], "function": "personal", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "settings-list-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "switch-row-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "list-item-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "settings-list", "switch-row", "list-item" ], "layout_zh": "单列分组：账号组（列表行进二级页）、通知组（开关行即时生效）、通用组、关于组；退出登录与注销账号沉底分开放置，注销红色并二次确认。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "scene-shop-home": { "id": "scene-shop-home", "kind": "scene", "type": "prompt", "name_zh": "商城首页", "name_en": "Shop Home", "summary_zh": "电商 App 首页：搜索、轮播、商品瀑布与底部导航的完整组合。", "description": "An e-commerce home: search bar, carousel, product masonry, and bottom tabs.", "keywords": [ "scene", "prompt", "commerce" ], "platforms": [ "ios", "android", "harmonyos", "web-mobile" ], "function": "commerce", "placements": [ "full-screen" ], "granularity": "flow", "status": "stale", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "level": "scene", "version": "1.0.0", "targets": [ "html-css", "tailwind", "react" ], "refs": [ { "prompt": "search-bar-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "image-carousel-prompt", "version": "1.0.0", "overrides": { "{{autoplay}}": "自动（可暂停）" } }, { "prompt": "product-card-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "masonry-grid-prompt", "version": "1.0.0", "overrides": {} }, { "prompt": "mobile-tab-bar-prompt", "version": "1.0.0", "overrides": {} } ], "entries": [ "search-bar", "image-carousel", "product-card", "masonry-grid", "mobile-tab-bar" ], "layout_zh": "自上而下单列滚动：搜索框吸顶 → 轮播（≤5 张）→ 快捷分类一行 → 商品瀑布流；底部标签栏常驻，购物车标签带角标。", "verification": { "last_verified_model": "", "last_verified_date": "", "verified_by": "", "result": "" }, "created": "2026-11-10", "updated": "2026-11-10" }, "checklist-books": { "id": "checklist-books", "kind": "guide", "guide_type": "checklist", "discipline": "ui", "name_zh": "设计评审清单与书单", "name_en": "Design Review Checklist & Reading List", "summary_zh": "交付前过一遍 18 项评审清单；想再往深走，六本书按顺序读。", "description": "An 18-item pre-delivery design review checklist plus a six-book reading list, ordered beginner to advanced.", "keywords": [ "checklist", "design review", "books", "reading list" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "discipline-interaction": { "id": "discipline-interaction", "kind": "guide", "guide_type": "discipline", "discipline": "interaction", "name_zh": "交互设计", "name_en": "Interaction Design", "summary_zh": "管「人和系统如何对话」：别让用户多想、多等、多记。", "description": "How humans and systems converse: feedback loops, gestures, navigation and mental models.", "keywords": [ "interaction", "affordance", "feedback", "mental model", "fitts" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "discipline-motion": { "id": "discipline-motion", "kind": "guide", "guide_type": "discipline", "discipline": "motion", "name_zh": "动效设计", "name_en": "Motion Design", "summary_zh": "动效不是装饰，是解释：东西从哪来、到哪去、为什么变。", "description": "Motion explains where things come from, where they go, and why they change; duration and easing are its punctuation.", "keywords": [ "motion", "easing", "animation duration", "choreography", "transition" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "discipline-ui-ux": { "id": "discipline-ui-ux", "kind": "guide", "guide_type": "discipline", "discipline": "ui", "name_zh": "UI / UX 设计", "name_en": "Interface & Experience Design", "summary_zh": "UX 回答「这件事对用户成不成立」，UI 回答「这一屏长什么样、怎么操作」——先验证流程，再打磨界面。", "description": "UX validates whether the flow works for users; UI decides how each screen looks and operates.", "keywords": [ "ui", "ux", "usability", "information architecture", "user flow" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "discipline-visual": { "id": "discipline-visual", "kind": "guide", "guide_type": "discipline", "discipline": "visual", "name_zh": "视觉设计", "name_en": "Visual Design", "summary_zh": "管「眼睛如何组织信息」：视觉层级是阅读顺序的工程，不是审美偏好。", "description": "How eyes organize information: Gestalt grouping, color, type scale and whitespace as reading-order engineering.", "keywords": [ "visual", "gestalt", "contrast", "wcag", "type scale", "color" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "lab-contrast": { "id": "lab-contrast", "kind": "guide", "guide_type": "lab", "discipline": "visual", "name_zh": "对比度检查：好看之前，先要看得清", "name_en": "Contrast Checker (WCAG)", "summary_zh": "选文字色和背景色，实时按 WCAG 公式算对比度，正文 ≥ 4.5:1 才算看得清。", "description": "Interactive WCAG contrast checker: pick foreground/background colors, get the live contrast ratio and AA/AAA verdicts.", "keywords": [ "contrast", "wcag", "accessibility", "color lab" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "lab-easing": { "id": "lab-easing", "kind": "guide", "guide_type": "lab", "discipline": "motion", "name_zh": "动效实验室：缓动曲线", "name_en": "Easing Curve Lab", "summary_zh": "选一条曲线看小球如何走完同一段路——进场 ease-out、离场 ease-in，匀速只适合进度与旋转。", "description": "Interactive easing-curve instrument: pick a cubic-bezier preset and a duration, watch the ball's speed character, copy the CSS.", "keywords": [ "easing", "cubic-bezier", "motion lab", "animation" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "lab-fitts": { "id": "lab-fitts", "kind": "guide", "guide_type": "lab", "discipline": "interaction", "name_zh": "费茨定律：到达时间 = 距离 ÷ 尺寸", "name_en": "Fitts's Law Lab", "summary_zh": "轮流点小目标和大目标各测一轮，亲手量出「目标越大越近越快」。", "description": "Interactive Fitts's law instrument: time yourself hitting a 44px target vs a 118px target and compare averages.", "keywords": [ "fitts law", "target size", "interaction lab", "touch target" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "lab-type-scale": { "id": "lab-type-scale", "kind": "guide", "guide_type": "lab", "discipline": "visual", "name_zh": "字阶生成：标题不是「调大一点」", "name_en": "Type Scale Lab", "summary_zh": "拖动基准字号，看整组字号如何按 1.25 的比例一起呼吸。", "description": "Interactive type-scale instrument: drag the base size and watch a 1.25-ratio scale (Caption to H1) move together.", "keywords": [ "type scale", "typography", "modular scale", "visual lab" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "aesthetic-minimalism": { "id": "aesthetic-minimalism", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "美学与极简", "name_en": "Aesthetic and Minimalist Design", "summary_zh": "界面不放无关信息——每多一个元素，都在和重要信息抢注意力。", "description": "界面不放无关信息——每多一个元素，都在和重要信息抢注意力。", "keywords": [ "aesthetic and minimalist design", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "aesthetic-usability-effect": { "id": "aesthetic-usability-effect", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "美即好用效应", "name_en": "Aesthetic-Usability Effect", "summary_zh": "好看的界面会被认为更好用——第一印象的宽容度来自审美。", "description": "好看的界面会被认为更好用——第一印象的宽容度来自审美。", "keywords": [ "aesthetic usability effect", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "closure": { "id": "closure", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "闭合", "name_en": "Closure", "summary_zh": "大脑会自动补全缺失的部分，把残缺图形看成整体。", "description": "大脑会自动补全缺失的部分，把残缺图形看成整体。", "keywords": [ "closure", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "common-fate": { "id": "common-fate", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "共同命运", "name_en": "Common Fate", "summary_zh": "一起动的元素会被看成一组。", "description": "一起动的元素会被看成一组。", "keywords": [ "common fate", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "consistency-standards": { "id": "consistency-standards", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "一致性与标准", "name_en": "Consistency and Standards", "summary_zh": "同一件事只用一种说法、一个位置、一个手势。", "description": "同一件事只用一种说法、一个位置、一个手势。", "keywords": [ "consistency and standards", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "continuity": { "id": "continuity", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "连续", "name_en": "Continuity", "summary_zh": "眼睛会沿着线条和对齐轴继续看下去。", "description": "眼睛会沿着线条和对齐轴继续看下去。", "keywords": [ "continuity", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "doherty-threshold": { "id": "doherty-threshold", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "Doherty 阈值", "name_en": "Doherty Threshold", "summary_zh": "系统在 400ms 内响应，用户才不会出戏；超过就掉注意力。", "description": "系统在 400ms 内响应，用户才不会出戏；超过就掉注意力。", "keywords": [ "doherty threshold", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "error-prevention": { "id": "error-prevention", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "防错优于纠错", "name_en": "Error Prevention", "summary_zh": "与其写好报错文案，不如让错误根本没机会发生。", "description": "与其写好报错文案，不如让错误根本没机会发生。", "keywords": [ "error prevention", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "error-recovery-help": { "id": "error-recovery-help", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "帮用户识别并改错", "name_en": "Help Users Recognize, Diagnose, and Recover from Errors", "summary_zh": "报错用 plain language：说清出了什么问题、怎么解决，不用错误码吓人。", "description": "报错用 plain language：说清出了什么问题、怎么解决，不用错误码吓人。", "keywords": [ "help users recognize diagnose and recover from errors", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "figure-ground": { "id": "figure-ground", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "图底关系", "name_en": "Figure-Ground", "summary_zh": "人会自动区分主体与背景，靠的是对比和层级。", "description": "人会自动区分主体与背景，靠的是对比和层级。", "keywords": [ "figure ground", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "fitts-law": { "id": "fitts-law", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "费茨定律", "name_en": "Fitts's Law", "summary_zh": "到达目标的时间由距离和大小决定：目标越大、越近，越易点中。", "description": "到达目标的时间由距离和大小决定：目标越大、越近，越易点中。", "keywords": [ "fitts s law", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "flexibility-efficiency": { "id": "flexibility-efficiency", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "灵活与效率", "name_en": "Flexibility and Efficiency of Use", "summary_zh": "为新手保持简单，也给熟手留加速器：快捷键、默认值、最近使用。", "description": "为新手保持简单，也给熟手留加速器：快捷键、默认值、最近使用。", "keywords": [ "flexibility and efficiency of use", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "help-documentation": { "id": "help-documentation", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "帮助与文档", "name_en": "Help and Documentation", "summary_zh": "最好不用文档也能上手；真需要时，文档要可搜、按任务组织、篇幅短。", "description": "最好不用文档也能上手；真需要时，文档要可搜、按任务组织、篇幅短。", "keywords": [ "help and documentation", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "hicks-law": { "id": "hicks-law", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "希克定律", "name_en": "Hick's Law", "summary_zh": "选项越多、越复杂，做决定越慢。", "description": "选项越多、越复杂，做决定越慢。", "keywords": [ "hick s law", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "jakobs-law": { "id": "jakobs-law", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "雅各布定律", "name_en": "Jakob's Law", "summary_zh": "用户大部分时间在别人的产品上，他们希望你的产品也长那样。", "description": "用户大部分时间在别人的产品上，他们希望你的产品也长那样。", "keywords": [ "jakob s law", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "match-real-world": { "id": "match-real-world", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "贴合真实世界", "name_en": "Match Between System and the Real World", "summary_zh": "用用户的语言和现实中的概念说话，而不是系统内部术语。", "description": "用用户的语言和现实中的概念说话，而不是系统内部术语。", "keywords": [ "match between system and the real world", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "millers-law": { "id": "millers-law", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "米勒定律", "name_en": "Miller's Law", "summary_zh": "工作记忆一次只能装下约 7（±2）个信息块。", "description": "工作记忆一次只能装下约 7（±2）个信息块。", "keywords": [ "miller s law", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "occams-razor": { "id": "occams-razor", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "奥卡姆剃刀", "name_en": "Occam's Razor", "summary_zh": "如无必要，勿增实体：最简单的方案通常是对的。", "description": "如无必要，勿增实体：最简单的方案通常是对的。", "keywords": [ "occam s razor", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "peak-end-rule": { "id": "peak-end-rule", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "峰终定律", "name_en": "Peak-End Rule", "summary_zh": "人们对体验的记忆，取决于峰值时刻和结束时刻，而非全程平均。", "description": "人们对体验的记忆，取决于峰值时刻和结束时刻，而非全程平均。", "keywords": [ "peak end rule", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "pragnanz": { "id": "pragnanz", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "简洁", "name_en": "Prägnanz", "summary_zh": "大脑倾向于把复杂图形理解成最简单的整体。", "description": "大脑倾向于把复杂图形理解成最简单的整体。", "keywords": [ "pr gnanz", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "proximity": { "id": "proximity", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "邻近", "name_en": "Proximity", "summary_zh": "挨得近的元素会被看成一组——分组先靠距离，不靠框线。", "description": "挨得近的元素会被看成一组——分组先靠距离，不靠框线。", "keywords": [ "proximity", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "recognition-over-recall": { "id": "recognition-over-recall", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "识别优于回忆", "name_en": "Recognition Rather than Recall", "summary_zh": "把选项和信息摆出来，别让用户靠脑子记上一步。", "description": "把选项和信息摆出来，别让用户靠脑子记上一步。", "keywords": [ "recognition rather than recall", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "similarity": { "id": "similarity", "kind": "guide", "guide_type": "principle", "group": "gestalt", "discipline": "visual", "name_zh": "相似", "name_en": "Similarity", "summary_zh": "长得像的元素会被认为功能相关。", "description": "长得像的元素会被认为功能相关。", "keywords": [ "similarity", "gestalt" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "teslers-law": { "id": "teslers-law", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "泰斯勒定律", "name_en": "Tesler's Law", "summary_zh": "每个系统的复杂度守恒，只能转移，不能消灭。", "description": "每个系统的复杂度守恒，只能转移，不能消灭。", "keywords": [ "tesler s law", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "user-control-freedom": { "id": "user-control-freedom", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "用户控制与自由", "name_en": "User Control and Freedom", "summary_zh": "用户常点错——给他们一个明确的「紧急出口」和撤销。", "description": "用户常点错——给他们一个明确的「紧急出口」和撤销。", "keywords": [ "user control and freedom", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "visibility-of-system-status": { "id": "visibility-of-system-status", "kind": "guide", "guide_type": "principle", "group": "nielsen", "discipline": "ui", "name_zh": "系统状态可见", "name_en": "Visibility of System Status", "summary_zh": "通过及时反馈，让用户始终知道系统正在发生什么。", "description": "通过及时反馈，让用户始终知道系统正在发生什么。", "keywords": [ "visibility of system status", "nielsen" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "von-restorff-effect": { "id": "von-restorff-effect", "kind": "guide", "guide_type": "principle", "group": "laws-of-ux", "discipline": "interaction", "name_zh": "冯·雷斯托夫效应", "name_en": "Von Restorff Effect", "summary_zh": "与众不同者被记住：一堆相似元素里，异类最先被看见。", "description": "与众不同者被记住：一堆相似元素里，异类最先被看见。", "keywords": [ "von restorff effect", "laws-of-ux" ], "status": "published", "license": { "spdx": "CC-BY-4.0", "author": "Aglaia", "source_url": "aglaia.design", "verified": true }, "created": "2026-11-10", "updated": "2026-11-10" }, "aglaia-tokens": { "id": "aglaia-tokens", "kind": "token-set", "file": "tokens/tokens.json" } }