2.0 KiB
2.0 KiB
UI设计灵感集合
UI组件 设计灵感 Next.js React Tailwind CSS AI辅助开发
设计灵感
从网络上收藏的精美设计中精心挑选的 UI 模式与组件合集。
关于本项目
我每天都会收藏数十个令人惊叹的页面、组件和原型设计。这个仓库将这些设计付诸实践，供大家探索、学习和使用。
目标
- 欣赏优秀设计 — 展示才华横溢的设计师创作的卓越 UI 作品
- 亮色与暗色模式 — 每个设计均包含亮色和暗色两种变体
- 移动优先 — 在设计需要时提供适配移动端的替代布局
- AI 驱动开发 — 一套完整的前端 技能，助力 AI 智能体创建更优质的用户界面
技术栈
- Next.js 16，使用 App Router
- React 19，支持 ViewTransition API
- Tailwind CSS v4
- TypeScript
- Bun 作为包管理器和运行时
AI 智能体技能
本仓库在 .claude/skills/ 目录中包含一套分层技能系统，旨在提升 AI 辅助前端开发能力：
| 技能 | 用途 |
|---|---|
component-variants |
创建亮/暗模式组件对的基础，具备一致的颜色令牌映射 |
expandable-card |
使用 CSS grid-rows 实现平滑展开/折叠动画的 UI 模式 |
create-new-design |
用于添加新设计的项目脚手架，包含预览页、详情页和主页入口 |
这些技能具有可移植性 — 可将其复制到你自己的仓库中，以增强 AI 智能体的能力。
请求设计
有想要看到实现的设计？欢迎创建 Issue，附上设计的链接或截图。
贡献
这是一个个人项目，目前不接受外部贡献。欢迎 Fork 并根据自己的需求进行修改。
彩蛋
体验使用 React 19 实验性 ViewTransition API 实现的丝滑页面过渡效果 — 从主页导航到任意设计页面即可亲身感受。