~/design/ ls
✦ 设计灵感库
平时觉得好看、自己和 Agent 一起做出来的网页小东西，都收在这儿。每条都是一个能单独打开的 HTML 页面：在线试一试，一键复制源码，或者把「给 Agent 的提示词」整段丢给你的 Agent，让它照着复现。按 MIT 开源。
$ 给 Agent 读： index.md（整个灵感库的目录）
印章按钮按下去像盖章：往下一压、轻轻一拧，松手后纸上留下一枚带颗粒感、慢慢淡掉的红印。html · css · js
荧光笔划过链接和按钮被荧光笔从左往右涂一道：笔头是斜的、位置偏低、跨行每行单独划，离开时往右擦掉。纯 CSS。html · css
一键复制按钮复制成功：两张纸收起、画出对勾、文字往上换成「已复制」；失败：变红抖一下。还会念给读屏软件听。html · css · svg · js
磁吸按钮鼠标靠近，按钮被「吸」过去，里面的字跟得更多，像有厚度；移开时用弹簧弹回原位。JS 只写两个变量。html · css · js
会变形的下拉框：神灯 / 退潮 / 像素下拉框的展开 / 收起三选一：神灯（像 Mac 最小化，菜单弯成漏斗被吸进名字）、退潮（带浪花的波浪线向上把菜单冲走）、像素溶解。html · css · svg · canvas · js
会睡觉的 Agent 卡片关掉 Agent，蓝色六边形吉祥物缩成灰色圆球、眼睛眯成两道线、头顶冒 z；打开又弹回来。醒着时眼睛跟着鼠标转。html · css · svg · js
底部悬浮药丸导航页面底部居中的药丸形导航：毛玻璃底、当前栏目高亮、按下回弹，旁边点缀会闪的小星星。html · css
会滑动的激活圆点侧边栏整个目录只有一个圆点：点哪项它就竖着滑过去、换成分组色，落地把文字顶开，颜色再从左往右刷过去；每段速度都照原片逐帧量。html · css · js
拍立得头像头像做成一张拍立得：白边、一条胶带、一行手写字；放在桌面上可以拖，拖得快会歪，松手弹回。html · css · svg · js
开场 / 告别终端页脚是一段终端会话：see you、联系方式、fortune、exit 逐行打出来；另附一段首访开机动画。html · css · js
手绘风图表 + 大图查看器文章里的流程图画成手绘风 SVG，点开是能滚轮 / 双指缩放、拖动平移、Esc 关闭的大图查看器。html · css · javascript · svg
桌面式首页首页做成一张桌子：卡片能拖、拖动时跟着速度倾斜、位置记在本机，双击图标开出能拖能缩放的小窗口。html · css · javascript
便利贴留言墙彩色便利贴墙加发帖框：四种纸色、每张微微歪着、贴胶带，悬停摆正；示例里新便签只存在本机。html · css · javascript
点阵地球访客地图three.js 点阵地球：各国访客数立成红色光柱，蓝色弧线带着光点飞向同一个目的地，可拖动、可点光柱看数字。html · css · three.js
3D 滚动叙事左边 3D 小场景钉住不动，右边文字一步步滚过去：镜头推到当前这一步，零件弹出来，标签跟着 3D 点走。纯 three.js 代码建模。html · css · three.js
编辑风结论报告页结论先行的杂志式报告：衬线大标题、一张大结论卡加四张小卡、Chart.js 图表配可点图例，表格各自横向滚动。html · css · chart.js
地图 + 筛选侧栏左侧多段筛选、右侧 Leaflet 地图：结果列表和标记实时同步，点聚合只数符合条件的点，点列表飞到地图并弹详情。html · css · javascript · leaflet
手作纸感奶油纸色 + 点阵底，印章红 / 钢笔蓝 / 荧光黄；宋体标题、手写批注、便利贴、印章、虚线卡片，深色模式齐全。html · css
纯 CSS 动效不引动画库：linear() 弹簧缓动、View Transitions 页面过渡、滚动驱动、@starting-style 入场、高度到 auto。html · css
这个组合下还没有，换个条件试试？
别人家的好设计
只放链接，用之前看清各自的许可。
拿来就能用的组件
- shadcn/ui BlocksMIT官方整块布局：仪表盘、侧栏、登录注册，一条命令装进项目。
- Magic UIMIT150+ 个动效组件，配 shadcn 用，比 Aceternity 克制，适合产品官网。
- Aceternity UIshader、视差、微交互很多的动效组件和整页模板。
- 21st.dev社区组件市场，营销区块最多，每个都附带给 AI 的提示词。
- awesome-design-mdMIT把 Stripe、Linear、Vercel 的设计系统写成 DESIGN.md，丢给 agent 照着出界面。
看别人怎么做
- Godly每天精选，偏实验和高级质感。
- Awwwards获奖网站，可按技术、字体、颜色筛，偏 3D 和大字排版。
- Land-book落地页精选，能按风格筛：Apple 风、Stripe 风、粗野主义。
- SiteInspire老牌精选，偏编辑风和排版，比较克制。
- Mobbin真实产品的界面和完整流程截图，做后台、控制台最实用。
- SaaS Landing Page只收 SaaS 落地页，按定价、功能、FAQ 等页面类型看。
- recent.design录屏为主的微交互收藏，「像素溶解下拉框」就是在这儿看到的。