# Vibetaste

> Vibetaste is an open-source catalogue of curated frontend and UI resources for people building interfaces with AI coding tools.

The site is a searchable Astro catalogue. Resource detail pages include a plain-language description, why the resource belongs here, compatibility, price, licence, last-reviewed date, and the original source link. Follow the detail-page links below when you need the source or a more specific recommendation.

## Start here

- [Vibetaste homepage](https://vibetaste.raghav.codes/): The full searchable catalogue.
- [All frontend and UI resources](https://vibetaste.raghav.codes/resources/): Browse or filter the catalogue.
- [Curated resource stacks](https://vibetaste.raghav.codes/collections/): Task-oriented groups for frontend workflows, React UI, animation, and visual effects.
- [Submit a resource](https://vibetaste.raghav.codes/submit/): Contribution requirements and repository link.

## Curated stacks

- [Frontend design workflow](https://vibetaste.raghav.codes/collections/frontend-design-workflow/): A visual-direction, implementation, and finish workflow for AI coding agents.
- [React UI libraries](https://vibetaste.raghav.codes/collections/react-ui-libraries/): React primitives, component libraries, and ready-made sections.
- [Web animation libraries](https://vibetaste.raghav.codes/collections/web-animation-libraries/): Tools for timelines, scroll effects, springs, gestures, and presence.
- [Website visual effects](https://vibetaste.raghav.codes/collections/website-visual-effects/): Image treatments, texture, and art-directed visual details.

## Skills

- [Frontend Design](https://vibetaste.raghav.codes/resources/frontend-design-skill/): Choose a visual direction before generating frontend code.
- [Impeccable](https://vibetaste.raghav.codes/resources/impeccable/): Shape, audit, polish, and document product interfaces.
- [Anti UI Slop](https://vibetaste.raghav.codes/resources/anti-ui-slop/): Ground interface decisions in real product screens and run a finish gate.
- [UI Design](https://vibetaste.raghav.codes/resources/ui-design-uizze/): Design and refine web and mobile product interfaces.
- [Design Taste Frontend](https://vibetaste.raghav.codes/resources/design-taste-frontend/): Avoid template-like landing pages and frontend redesigns.
- [GPT Taste](https://vibetaste.raghav.codes/resources/gpt-taste/): Use editorial type, composition, and GSAP motion.
- [High-end Visual Design](https://vibetaste.raghav.codes/resources/high-end-visual-design/): Art-direct premium web interfaces.
- [Minimalist UI](https://vibetaste.raghav.codes/resources/minimalist-ui/): Build restrained editorial interfaces.
- [Industrial Brutalist UI](https://vibetaste.raghav.codes/resources/industrial-brutalist-ui/): Build raw, mechanical interfaces with rigid structure.
- [Image to Code](https://vibetaste.raghav.codes/resources/image-to-code/): Turn a reference image into a responsive frontend implementation.
- [Imagegen Frontend Web](https://vibetaste.raghav.codes/resources/imagegen-frontend-web/): Create art-directed web imagery for a specific page or brand.
- [Redesign Existing Projects](https://vibetaste.raghav.codes/resources/redesign-existing-projects/): Upgrade an existing interface without breaking its workflow.
- [Emil Design Engineering](https://vibetaste.raghav.codes/resources/emil-design-eng/): Apply interaction and motion design-engineering guidance.

## Prompts

- [UI Design Prompts](https://vibetaste.raghav.codes/resources/ui-design-prompts/): Copy-ready prompts for web layouts, typography, color, and visual direction.
- [TypeUI Prompts](https://vibetaste.raghav.codes/resources/typeui-prompts/): Prompts for interface styles and product screens.
- [Design Prompts](https://vibetaste.raghav.codes/resources/design-prompts/): Turn named design styles into structured interface prompts.
- [UI Challenges](https://vibetaste.raghav.codes/resources/ui-challenges/): Generate structured UI challenges by platform and screen type.
- [SayUI](https://vibetaste.raghav.codes/resources/sayui/): Turn plain-language direction or a screenshot into a precise UI prompt.
- [StyleKit UI Prompts](https://vibetaste.raghav.codes/resources/stylekit-ui-prompts/): Browse prompt collections by interface type and aesthetic.
- [UIPrompt](https://vibetaste.raghav.codes/resources/uiprompt/): Package design tokens, stack, and screen frames into a coding-agent prompt.

## Templates

- [MotionSites Templates](https://vibetaste.raghav.codes/resources/motionsites-templates/): Website prompts built around motion-heavy landing pages.
- [v0 Templates](https://vibetaste.raghav.codes/resources/v0-templates/): Ready-to-open website and application templates for v0.

## UI libraries

- [Untitled UI React](https://vibetaste.raghav.codes/resources/untitled-ui-react/): React components, Figma files, page examples, and agent guidance.
- [Fragments UI](https://vibetaste.raghav.codes/resources/fragments-ui/): React components and MCP tooling for discovery and governance.
- [shadcn/ui](https://vibetaste.raghav.codes/resources/shadcn-ui/): Composable React components with source code in your project.
- [Kibo UI](https://vibetaste.raghav.codes/resources/kibo-ui/): Advanced shadcn/ui components for product workflows.
- [AlignUI](https://vibetaste.raghav.codes/resources/alignui/): A Figma-matched React system for dashboards and product interfaces.
- [Magic UI](https://vibetaste.raghav.codes/resources/magic-ui/): Animated sections and effects for React and Tailwind.
- [HeroUI](https://vibetaste.raghav.codes/resources/heroui/): Polished, themeable React components.
- [ShadcnBlocks](https://vibetaste.raghav.codes/resources/shadcnblocks/): Pre-built shadcn/ui sections for landing pages and product screens.
- [Tailwind Plus](https://vibetaste.raghav.codes/resources/tailwind-plus/): Production-ready components and templates from Tailwind CSS.
- [Mantine](https://vibetaste.raghav.codes/resources/mantine/): React components, forms, hooks, and theming.
- [Material UI](https://vibetaste.raghav.codes/resources/material-ui/): A mature React implementation of Material Design.
- [Tailark](https://vibetaste.raghav.codes/resources/tailark/): Conversion-focused Tailwind sections for marketing pages.
- [COSS UI](https://vibetaste.raghav.codes/resources/coss-ui/): Components built on Base UI with an agent-friendly layer.
- [SmoothUI](https://vibetaste.raghav.codes/resources/smoothui/): Animated React components for scroll and interaction work.
- [basecn](https://vibetaste.raghav.codes/resources/basecn/): shadcn-style components built on Base UI primitives.
- [Blocks.so](https://vibetaste.raghav.codes/resources/blocks-so/): Categorized shadcn/ui blocks for React products.
- [Base UI](https://vibetaste.raghav.codes/resources/base-ui/): Unstyled, accessible React primitives.
- [React Aria](https://vibetaste.raghav.codes/resources/react-aria/): Hooks and components for custom React interfaces.
- [Flowbite](https://vibetaste.raghav.codes/resources/flowbite/): Tailwind components, blocks, and templates.
- [daisyUI](https://vibetaste.raghav.codes/resources/daisyui/): Class-based Tailwind components with themes.
- [Tailkits](https://vibetaste.raghav.codes/resources/tailkits/): A directory for Tailwind templates, components, and kits.

## Aesthetic assets

- [Characters](https://vibetaste.raghav.codes/resources/ascii-characters/): Moving character-grid treatment for portraits and footage.
- [Dither](https://vibetaste.raghav.codes/resources/ascii-dither/): High-contrast dither treatment with digital texture.
- [Mixed](https://vibetaste.raghav.codes/resources/ascii-mixed/): Layered character and graphic effects.
- [Pixel Art](https://vibetaste.raghav.codes/resources/ascii-pixel-art/): Blocky low-resolution treatment for retro direction.
- [Mosaic](https://vibetaste.raghav.codes/resources/ascii-mosaic/): Tiled mosaic treatment for photography.
- [LEGO](https://vibetaste.raghav.codes/resources/ascii-lego/): Dimensional brick treatment with toy-like texture.
- [Disco Before](https://vibetaste.raghav.codes/resources/ascii-disco-before/): Source frame for a reflective disco treatment.
- [Disco After](https://vibetaste.raghav.codes/resources/ascii-disco-after/): Reflective disco-ball transformation with graphic highlights.
- [Animation Before](https://vibetaste.raghav.codes/resources/ascii-animation-before/): Source footage for an animated character treatment.
- [Animation After](https://vibetaste.raghav.codes/resources/ascii-animation-after/): Animated graphic treatment for moving footage.
- [Dots Before](https://vibetaste.raghav.codes/resources/ascii-dots-before/): Source frame for a halftone dot treatment.
- [Dots After](https://vibetaste.raghav.codes/resources/ascii-dots-after/): Halftone dot treatment with enlarged print texture.
- [Cross](https://vibetaste.raghav.codes/resources/ascii-cross/): Repeated cross-mark treatment for graphic texture.
- [Diagonal](https://vibetaste.raghav.codes/resources/ascii-diagonal/): Diagonal-line treatment with a screen-printed feel.
- [Lines](https://vibetaste.raghav.codes/resources/ascii-lines/): Horizontal line treatment that turns tonal values into rhythm.

## Motions

- [Anime.js](https://vibetaste.raghav.codes/resources/animejs/): Animation engine for timelines, transforms, SVG, scroll, and interaction.
- [Motion](https://vibetaste.raghav.codes/resources/motion/): APIs for layout, gesture, scroll, springs, and presence animation.
- [GSAP](https://vibetaste.raghav.codes/resources/gsap/): Timeline-based animation for complex sequences and scroll work.
- [LottieFiles](https://vibetaste.raghav.codes/resources/lottiefiles/): Search, edit, and ship Lottie animations.

## Components

- [ASCII Magic Community](https://vibetaste.raghav.codes/resources/ascii-magic-community/): Community-made ASCII treatments and visual experiments.
- [21st.dev](https://vibetaste.raghav.codes/resources/21st-dev/): Searchable React components, templates, and themes for agent workflows.
- [AICSS](https://vibetaste.raghav.codes/resources/aicss/): UI components packaged for coding agents to copy and adapt.