# 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) 实现的丝滑页面过渡效果 — 从主页导航到任意设计页面即可亲身感受。