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

Publications from authors and the editorial team

New articles from Wikivibe authors and materials prepared by the editorial team. Read the feed, follow authors, and publish your own write-ups.

Write an article
All materials
NewEditorialFollowing

Feed

13 publications

Reset filters
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
—views—reactions
Motion and animation
6/12/202610 min

Lottie: How to send animation to production without pain and loss of quality

The designer made a beautiful animation in After Effects. The developer got the file. Then the pain begins: the GIF is too heavy, the video does not scale, SVG does not animate properly. Lottie solves this – but only if you know how to cook it. Lottie is a format that converts After Effects animations to JSON. The file weighs 600 times less than a GIF of the same quality, renders natively on the web, iOS, Android and React Native, and scales losslessly. The problems do not start with the format, but with the fact that no one explained the rules at every stage - from the designer to the deploy.

motionanimationLottiehandoff
—views—reactions
Motion and animation
6/12/202611 min

Framer Motion in One Evening: Animate React Components as Pros

Most Framer Motion tutorials teach the same thing: Replace "<div" with "<motion.div" and add "animate={{{opacity: 1 }}}" is done. It takes ten minutes, not an evening. The evening is needed for another: to understand why animations twitch, how to properly animate the output of the element, how not to inflate the bundle and why the options are not syntactic sugar, but a fundamentally different approach to orchestration. This guide is about what is really needed in the project. No theory for theory.

motionanimationFramer Motionworkflow
—views—reactions

Topic catalogue