怎么用这份词典
这个站不为教你写代码，为的是解决一件事：把「我想要那个……嗯……就是那个效果」变成一句 AI 一次就能做对的需求。
三步
找到它。知道名字就直接搜；不知道就按口语说法搜（「磨砂」「果冻」「卡片飘起来」），或者走感觉导航。
调到你要的样子。每个词条都有可交互演示和参数滑块。时长、缓动、模糊半径这些数值不是玄学，滑一遍就知道差异在哪；顺带也能换背景，因为毛玻璃、发光这类效果离开背景就不成立。
复制过去。词条页给你两版：中文需求句（带当前参数）和英文关键词（AI 最容易认的术语）。一次要加好几个效果，就去速查表勾选后整段导出。
为什么术语比形容词管用
「高级一点的卡片」是形容词，「悬停抬升 + 12px 柔和投影 + 200ms ease-out」是名词和数值。前者要 AI 猜，后者 AI 能直接对上它训练过的实现。所以每条词条都同时给出中文名、英文术语、CSS 属性名和推荐取值——你负责挑，AI 负责落。
两个常见误区
把「别搞混」当废话。这一栏专门写两个容易混的效果差在哪——它通常也是 AI 最容易做错的地方。
只要关键词不要参数。同一个效果在 150ms 和 600ms 下是两种气质，参数才是你那次审美判断的落点。
提示词模板
请用 <技术栈> 实现下面这个效果，按术语的标准做法来，不要用相近但不同的做法替代： - 效果名称：毛玻璃（Frosted Glass / backdrop blur） - 参数：模糊半径 12px，饱和度 180% - 技术要求：backdrop-filter: blur(12px) saturate(180%)，面板背景 rgba(255,255,255,0.08)， 1px 半透明白描边，面板必须叠在有内容的背景上 - 不要：用纯色半透明代替（那是「半透明」，不是毛玻璃）
让 AI 自己查
这个站还给机器发布了一份目录：AI 可以自己查，不用你把内容一段段复制进对话框。索引（别名、关键词、标签、控件默认值、现成需求句）在 catalog.json，逐条全文（什么时候用、别搞混、踩坑、推荐取值）在 catalog.md。
https://publieople.github.io/design-museum/llms.txt # 入口：两份目录 + 全部词条地址 https://publieople.github.io/design-museum/catalog.json # 索引：别名、关键词、标签、控件默认值、现成需求句 https://publieople.github.io/design-museum/catalog.md # 逐条全文：什么时候用、别搞混、踩坑、推荐取值 skills/design-museum/SKILL.md # 配套 skill：装到 ~/.dsh/skills/design-museum/
目录与页面同源，不会各说各话：这里的每条词条、别名、易混项与推荐取值，目录里都有。
继续走
许可与致谢
- 代码按 MIT 授权，文字内容按 CC BY 4.0 授权。LICENSE / LICENSE-CONTENT
- 字体本地打包、不请求外部 CDN：JetBrains Mono 与 Space Grotesk，均为 SIL Open Font License 1.1。JetBrains Mono / Space Grotesk
- 词条正文是原创归纳，只链接到 MDN、web.dev 与 W3C 规范，那些页面的版权归各自所有者。
- 第三方组件与素材清单：THIRD_PARTY_NOTICES.md