50 lines
2.0 KiB
Markdown
50 lines
2.0 KiB
Markdown
# UI设计灵感集合
|
|
|
|
`UI组件` `设计灵感` `Next.js` `React` `Tailwind CSS` `AI辅助开发`
|
|
|
|
# 设计灵感
|
|
|
|
从网络上收藏的精美设计中精心挑选的 UI 模式与组件合集。
|
|
|
|
## 关于本项目
|
|
|
|
我每天都会收藏数十个令人惊叹的页面、组件和原型设计。这个仓库将这些设计付诸实践，供大家探索、学习和使用。
|
|
|
|
### 目标
|
|
|
|
- **欣赏优秀设计** — 展示才华横溢的设计师创作的卓越 UI 作品
|
|
- **亮色与暗色模式** — 每个设计均包含亮色和暗色两种变体
|
|
- **移动优先** — 在设计需要时提供适配移动端的替代布局
|
|
- **AI 驱动开发** — 一套完整的前端 [技能](.claude/skills)，助力 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](https://github.com/ainergiz/design-inspirations/issues/new)，附上设计的链接或截图。
|
|
|
|
## 贡献
|
|
|
|
这是一个个人项目，目前不接受外部贡献。欢迎 Fork 并根据自己的需求进行修改。
|
|
|
|
## 彩蛋
|
|
|
|
体验使用 React 19 实验性 [ViewTransition API](https://react.dev/reference/react/ViewTransition) 实现的丝滑页面过渡效果 — 从主页导航到任意设计页面即可亲身感受。 |