Earth Animation — Development skill for Claude Code

Earth Animation 🌍

Claude 3.7 Empowers UI Designers! 🚀

This 3D Earth Animation [Demo ](https://3d-earth.hqman.us) was made with just one image and a simple prompt. My experience has been both surprising and amazing! ✨

Claude 3.7 was just released recently, and its programming capabilities have improved tremendously compared to the previous generation. Especially in generating UI/UX designs! 🎯

After experimenting with friends, we've discovered two effective approaches:

If you have a design reference (image or Figma):

• Simply drop the image into Cursor or Trae

• Select Claude 3.7

• Use simple prompts to generate high-quality UI pages

• Similar method works with Figma through MCP

• Find a well-designed page you like

• Provide the HTML/code as a reference to the model

• Add your prompts to generate high-quality UI interfaces

Tools Used 🛠️

• Trae (Currently offers Claude 3.7 for free)
• Cursor (Similar usage, slightly different results)

Design 🎨

Design inspiration from [Dribbble - Dashboard for a Logistics Product Pathport](https://dribbble.com/shots/24841635-Dashboard-for-a-Logistics-Product-Pathport) 🎨


Example Prompt Used 📝

prompt:

Analyze the features of this 3D Earth animations interface and design a cooler version.

model output :

• 3D Earth visualization (built with Three.js)
• User interaction:
  • Rotate Earth with mouse drag
  • Zoom with scroll wheel
• Antarctica highlight feature
• Control panel:
  • Focus on Antarctica button
  • View reset button
• Information panel for Antarctica details Creating a cooler interface with:
• Modern UI design refresh
• Weather data visualization effects
• Site markers and data display
• Timeline control
• Visualization layers for:
  • Wind speed
  • Temperature
  • Other data metrics
• Enhanced lighting and particle effects