Wikivibe layout directory: 700+ source code templates for vibcoding
Main chat
A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.
Wikivibe has launched the VibeDesign — каталог готовых макетов section. Now it has 798 templates** in 8 categories and 59 technology stacks. Each has source code on GitHub, a demo, and a direct download link. The catalogue is being updated: only on July 5, several dozen new templates were added.
The idea of the section is simple: not to search for templates all over the Internet, but to open a catalog, find the right one, take the code and adapt it for your project. Or – what is more interesting for vibcoding – to assemble the site as a designer from different pieces.
What's in the catalog: 8 categories
Landings - 121 template
The biggest category. Everything here: from a minimalist portfolio to SaaS-landing with a pricing section, animations and themes. Most are made in Next.js + Tailwind CSS, there are options on Astro, Vue, Svelte and pure HTML.
Several examples that give an idea of diversity: Open React Template (React + Tailwind), Sylph (Next.js + TypeScript), Positivus Landing Page (Next.js + Tailwind), Svelte GSAP Template (Svelte + GSAP), Astroship (Astro + Tailwind), landing pages for specific niches - coffeehouse, tourism, cleaning, cryptocurrency, real estate.
Each pattern is not just a beautiful picture. This is a ready-made GitHub repository that you clone, put dependencies and watch live.
Dashboards - 103 patterns
Admins, analytical panels, control interfaces. TailAdmin, Materio MUI, Horizon Tailwind, shadcn Admin are names familiar to anyone who has ever searched for a ready-made dashboard. There are options on React, Next.js, Vue, Angular, even Flutter (Dart) and Laravel (Blade).
It is worth highlighting a few non-trivial: Neo Brutalism Dashboard (a style that is everywhere now), Tanstack Start Dashboard (modern routing), Shadcn Nuxt Starter (for those on Nuxt). There's a dashboard for the bank, for the college management system, and even for the Palworld server.
Components - 91 templates
This is a separate level: not entire pages, but building blocks. React Bits, SyntaxUI, Motion Primitives (Framer Motion), shadcn/ui, Headless UI. Here are specific things: Telegram UI for Mini App, Chat UI for LLM applications, Prompt Kit for AI interfaces, Full Calendar, Emoji Picker.
For vibcoding, this section is especially valuable: when you need a specific component (table with sorting, multiselect, animated button), you do not need to write it from scratch - you take the ready-made with the code.
Design systems - 104 templates
Complete design systems, tokens, palettes, typography rules. This is more for those who build a product over a long distance and want consistency from the beginning – not to assemble components one at a time, but to take the whole system and work inside it.
Animations - 89 templates
Redi-tu-juz animations: incoming, scrolling animations, transitions, hover effects. Most on Framer Motion and GSAP. For landing pages, where you need a wow effect without writing CSS animations from scratch.
Authorization - 98 templates
Forms of login, registration, two-factor, password recovery - ready, beautiful, with code. A huge time saving: authentication is needed almost everywhere, but doing it beautifully and correctly from scratch is too much work.
SaaS - 82 templates
Starter kit for SaaS-product: product page, pricing, FAQ, integration with Stripe, personal account. Next.js Saas Starter, Saaslaunchpad, 20xDev are not just templates, they are almost ready-made workpieces for running SaaS from scratch.
Online shopping - 110 templates
Catalogues, goods cards, baskets, checkouts. React + Tailwind, Next.js, Vue. To quickly launch e-commerce or add shopping functionality to your existing website.
How to use the catalog: three scenarios
Scenario 1: Take the complete template
The simplest. Found a landing page that fits the style → opened GitHub → cloned → changed texts, colors, images → deploited. Many templates are so clean and well-structured that replacing content takes an hour rather than a day.
git clone https://github.com/автор/шаблон
cd шаблон
npm install
npm run devThis is what vibcoding is in its purest form: not to write from scratch, but to take a working basis and direct efforts to meaning and content, rather than markup and stylization.
Scenario 2: Collect as a Designer
A more interesting approach is to take a few different templates and assemble them.
A practical example: you need a SaaS-landing with authorization and dashboard.
Take the hero section and pricing from AI SaaS Landing Starter, login form from any template category "Authorization", dashboard from TailAdmin Next.js - and glue into a single project. If all three are on Next.js + Tailwind, compatibility will be good.
Key point: When all templates use the same design tokens (colors, indentations, typography) – as Tailwind works with shadcn/ui – their parts are easily combined into a single interface with a single style. That’s why there are so many templates in the shadcn/ui catalog: it’s the de facto standard for “compatible” components in 2026.
Scenario 3: Give a template to an agent to adapt
Vibcoding approach is in full force: take the template from the catalog, give it to Claude Code or Codex along with the description of your product – and ask to adapt.
Here is the landing template (a link to GitHub or the code itself).
Adapt to our product – CRM for small business.
Replace: hero title, feature descriptions, testimonials.
Save the structure and style, just change the content.The agent sees the structure, components, and logic of the template, and makes a meaningful adaptation — rather than writing a landing page from scratch, guessing the structure.
Technological stacks: 59 options
The catalog covers almost the entire modern front-end landscape.
**The most common are: ** Next.js, React, Tailwind CSS, TypeScript, shadcn/ui, Framer Motion.
** Also presented are:** Vue, Nuxt, Svelte, Astro, Angular, Vite, GSAP, MUI, DaisyUI, NextUI, Laravel (PHP), Blade, Kotlin, Dart (Flutter), Elixir, Rust, C#, Java.
This is important: if you are not working on React/Next.js, for example, on Vue or Svelte, there are options in the directory for you.
Search and navigation
The directory page has a quick text search – you can search by the name of the template or stack right on the page. Filtration by category: click "Dashboards" - you see only dashboards.
Each card shows: preview (screenshot), category, date of addition, stack (Next.js, React, Tailwind, etc.) and source (GitHub). By click, the template page opens with a full description, links to GitHub and demo.
For agents, a separate MCP access mode: templates are available for AI agents software so that you can embed directory search directly into the vibcoding workflow.
Why this is important for Vibcoding
The main barrier in vibcoding is not writing logic, but “how to do beautifully”. Agents write business logic well, but UI from scratch often comes out template and uninteresting without the right prompt.
The layout directory changes the equation: you already have a beautiful framework made by designers and developers. The agent works with the finished structure, not inventing it. The result is better, faster, and fewer iterations of “make it more beautiful.”.
This is the same logic as RAG in language models: an agent with context performs better than an agent without context. A template is the context for design decisions.
How to get started
Go to the directory: wikivibe.ru/ru/vibe-design/makety/
Category filters and search are available. The catalog continues to be updated – new templates are added regularly.
*Catalogue launched in July 2026 and updated. All templates refer to public GitHub repositories and are published in compliance with author licenses. *
