Design Inspirations

A curated collection of beautiful UI patterns and components, brought to life from bookmarked designs across the web.

About

I find myself bookmarking dozens of incredible pages, components, and prototypes every day. This repository brings those designs to life for others to explore, learn from, and use.

Goals

• Appreciate great design — Showcase exceptional UI work from talented designers
• Light & Dark modes — Every design includes both light and dark variants
• Mobile-first — Alternative layouts for mobile when the design requires it
• AI-powered development — A comprehensive set of frontend Skills to help AI agents create better user interfaces

Tech Stack

• Next.js 16 with App Router
• React 19 with ViewTransition API
• Tailwind CSS v4
• TypeScript
• Bun as the package manager and runtime

Skills for AI Agents

This repository includes a layered skills system in .claude/skills/ designed to improve AI-assisted frontend development:

Skill	Purpose
component-variants	Foundation for creating light/dark mode component pairs with consistent color token mapping
expandable-card	UI pattern for smooth expand/collapse animations using CSS grid-rows
create-new-design	Project scaffolding for adding new designs with preview, detail page, and main page entry

These skills are portable — copy them to your own repositories to enhance AI agent capabilities.

Request a Design

Have a design you'd love to see brought to life? Create an issue with a link or screenshot of the design.

Contributing

This is a personal project and I'm not accepting contributions at this time. Feel free to fork and adapt for your own use.

Easter Egg

Check out the smooth page transitions using React 19's experimental ViewTransition API — navigate from the main page to any design to see it in action.