Skip to content
Development and design with AI
EN
Become an author

Connect WikiVibe MCP

Add the server address to your MCP settings or give this prompt to your AI agent.

URL
https://wikivibe.dev/mcp/
Agent prompt
Connect the WikiVibe MCP server.

URL: https://wikivibe.dev/mcp/
Transport: streamable-http

After connecting, run tools/list and show the available tools.

Search WikiVibe

Recent searches

Popular topics

Become an author

Sign in or create an account to set up your author profile.

Sign in or register
ServiceДизайн

Figma

Облачный инструмент дизайна интерфейсов: макеты, прототипы, компоненты и совместная работа команды.

figmadesignuiprototyping
Open website
Write an article about Figma

Materials about Figma

Motion and animation
7/16/202638 min

Figma Motion + AI: 10 Prompts That Will Invigorate the Layout and Strengthen the Portfolio

A static layout can be neat and visually strong, but still feel like a collection of pictures. The user does not see how the card is revealed, where the old content goes and what happens after clicking. The customer looks at twelve frames and is forced to assemble the product in his head. The short animation shows the hierarchy, system response, and character of the product. In the portfolio, she separates "I drew the screen" from "I designed the behavior." And Figma Motion now allows you to collect movement on the timeline, generate key frames through Figma Agent and transfer accurate parameters to development through MCP. Below is a step-by-step process, ten universal prompts and a separate copyable instruction for the AI agent: transitions between screens, clicks, hover, loading, success, error, reduced motion and mandatory QA. The main limitation is one: the movement should explain the interface, not turn it into a presentation, where every second headline flies.

VibeDesignFigmaMotionAI
Figma and layouts: practical AI-assisted interface work
6/10/20265 min

Nobody reads your screen. Here's why - and how to change it

Users don't read screens. They're scanning them. The Nielsen Norman Group conducted a large-scale study with eye-tracking: 232 participants, thousands of pages. The conclusion is that the eye moves along predictable routes and misses most of the text. This means that the text you have carefully verified will not be seen by most users. And a beautiful design only works if it has the right stopping points for the view.

UXUIVibeDesignhierarchy
AI Design Tools
6/10/20268 min

I made a screen in 58 minutes from scratch

Previously, the screen in Figma is three hours minimum. First you look for references, then you build a grid, then you rearrange the components, then you rework because something is wrong. It's now 58 minutes from an empty canvas to a layout that can be shown. It's not "AI will draw it all by itself." This is a specific workflow where the AI shuts down the routine and you make the decisions. Let's analyze the steps - with prompts, timing and typical rakes.

VibeDesignFigmaGoogle StitchFigma Make
AI Design Tools
6/10/20266 min

Minimum stack for designer in 2026

The most common mistake when switching to AI design is trying to put together a full stack at once. Stitch, Figma Make, v0, Lovable, Framer, Midjourney, Reve, plus five more tools to try and end up using nothing normally. Design in 2026 is not one task, it is five: research, idea, generation, polishing, handoff. No instrument closes all five well. The minimum stack is one strong tool per phase, no more.

stacktoolsFigmaGoogle-Stitch
AI Design Tools
6/10/20265 min

What is VibeDesign and how it differs from classic design

In early 2025, researcher Andrei Karpathi tweeted about “wibcoding,” an approach in which you completely trust AI implementation and stop thinking about how code works. The tweet received 4.5 million views. By March 2026, the same idea had made its way to design — and got its name. VibeDesign is neither a tool nor a trend. It's a shift in where the interface starts.

AI Design Design DesignVibeDesignGoogle StitchFigma

Skills for agents

  • Figma Context MCP

    Figma Context MCP — автоматизация для AI-агента: помогает быстрее понять задачу, выбрать подходящий workflow и не собирать инструкцию с нуля. Подходит для проектов со стеком TypeScript, ai, cursor. Исходники: GLips/Figma-Context-MCP.

  • awesome claude design

    awesome claude design — разработка для AI-агента: помогает быстрее понять задачу, выбрать подходящий workflow и не собирать инструкцию с нуля. Подходит для проектов со стеком claude code, claude design, design md. Исходники: VoltAgent/awesome-claude-design.

Design templates

  • Дизайн-токены: Color Contrast Checker

    Дизайн-токены: Color Contrast Checker — бесплатный open-source набор дизайн-токенов из GitHub (incluud/color-contrast-checker). Стек: Astro, Figma, Expo. подходит для переноса цветов, типографики, spacing и тем в продуктовую дизайн-систему.

  • Дизайн-токены: Themekit

    Дизайн-токены: Themekit — бесплатный open-source набор дизайн-токенов из GitHub (isamercan/ThemeKit). Стек: Figma, Swift. подходит для переноса цветов, типографики, spacing и тем в продуктовую дизайн-систему.

  • Дизайн-токены: Chinese Color Atlas

    Дизайн-токены: Chinese Color Atlas — бесплатный open-source набор дизайн-токенов из GitHub (chroma-cathy/chinese-color-atlas). Стек: Tailwind CSS, Figma, CSS. подходит для переноса цветов, типографики, spacing и тем в продуктовую дизайн-систему.

Topic catalogue