خمس أماكن تتحرك في براندك مع Claude: برومبت جاهز لكل مكانFive Places Your Brand Can Move with Claude: A Ready Prompt for Each One

Key terms

SVG

An image drawn in code. Small, sharp at any size, and it can animate in the browser.

Micro interaction

A small motion that answers the user: a loading button, a check after saving, an icon that changes when tapped.

Hero

The first screen a visitor sees on a site, with the big headline and the main picture.

Claude Motion

A Claude feature that turns your words into a short animation and exports it as MP4. In beta, on Team and Enterprise plans only.

The steps

1. 1

   Step 1

   Write your brand colours and type once

   Before any motion, write two lines about the brand: colour codes, the font and the feel you want.

   Put it in a Project or at the start of each chat so every piece comes out the same.

   PromptBrand brief

   Copy

   This is my brand: colours [main hex] and [second hex], font [font name], feel [calm / fast / premium]. Any motion you make for me later must follow this exactly.

2. 2

   Step 2

   Animate the logo

   Ask for the logo as an SVG with a transparent background so it sits on any video or site header.

   Upload the logo file itself. Do not let Claude redraw it from memory.

   PromptLogo

   Copy

   Here is my logo (attached). Animate it in [3] seconds: it draws itself line by line, then settles. Deliver an SVG with a transparent background in my exact brand colours, playing once with no loop.

   Tip: Ask for two versions: a looping one for the site and a play once one for video.

3. 3

   Step 3

   Build the micro interactions

   Buttons, loaders and success states make an app feel alive.

   Ask for CSS or SVG code you can paste into your site or hand to a developer.

   PromptMicro interactions

   Copy

   Build a [save button] with three states: idle, loading, and done with a check. Under one second, smooth, in my brand colours. Deliver one HTML and CSS file and tell me where to paste it.

4. 4

   Step 4

   Animate the website hero

   The first screen is the most viewed spot on a site.

   Ask for a calm headline entrance and images that move slower than the text on scroll, and check it on a phone.

   PromptWebsite hero

   Copy

   Build the first screen for a [business type] site: the headline [text] enters letter by letter and the images move slower than the text on scroll. It must work on phones and stay light. Deliver one HTML file.

5. 5

   Step 5

   Make an explainer and a product walkthrough

   This is Claude Motion: in the message box pick Output, then Motion, or pick a Motion template in the Artifacts tab.

   Export as MP4 with the Export button. It is in beta, on Team and Enterprise plans only, and counts toward your usage limits.

   No Team plan? Ask for the same thing as an animated HTML page and screen record it.

   PromptExplainer

   Copy

   Make a [30] second video explaining [product or service] in [4] scenes: the problem, the fix, how it works, one ask at the end. Short on screen text, simple icons, my brand colours.

6. 6

   Step 6

   Change one part without breaking the rest

   Every animation is code, so you can change one detail.

   Name the exact scene or part, and say what changes and what stays.

   PromptEdit

   Copy

   In [scene two], change only [the background colour] and keep everything else exactly as it is.

Ready prompts to copy

Review this animation: does it work on phones, is the file heavy, are the colours on brand? Give me a list of problems before I publish it.