From DESIGN.md to Animation with Claude Design

From DESIGN.md to Animation with Claude Design

Motion Design

AI Workflow

AI Generated UI

Published:

2026/05

Tools

Workflow

1. Draft the introduction script

Write the first version of the self-introduction script, focusing on key experiences and personal perference.

2. Select a visual direction

Explore design references on Refero and choose a grayscale retro-digital aesthetic. Download the related DESIGN.md to preserve the visual language and structure.

3. Generate the animation video with Claude Design

Provide the DESIGN.md reference, video theme, and script to Claude Design. Define the tone as engaging, playful, and visually attention-grabbing.

4. Enrich the storytelling

After generating the first version, expand the content with more personal details and experiences while maintaining consistency with the selected style.

5. Refine the final output

Fine-tune frame size, spacing, typography, and colors to polish the final animation and improve visual rhythm.

Reflections

Using DESIGN.md made the generated result surprisingly close to the intended visual direction from the beginning. Instead of repeatedly adjusting styles through prompts, I could focus more on storytelling and content refinement. This process also showed how structured design references can improve consistency when collaborating with AI tools. As AI-generated animation workflows become more common, the ability to guide aesthetics, pacing, and narrative direction will become increasingly important for designers.

Let's work together as UIUX partners. Welcome to share and exchange ideas!

Let's work together as UIUX partners. Welcome to share and exchange ideas!

Let's work together as UIUX partners. Welcome to share and exchange ideas!