宋夏天Dazzle

AI DESIGNER / CREATIVE TECHNOLOGIST

AI Visualization Dashboard Workflow

Five chapters and twelve real tutorials spanning AI ideation, Figma motion, 3D visualization and runnable frontend delivery.

Five tutorial chapters

Inspiration and AI workflow

Start with AI-generated visual directions, then move into Figma design, motion and rapid style exploration.

  1. AI concepts to Figma motion basics

    A complete zero-to-one process from AI-generated visual concepts to Figma design, chart motion and an AI-driven animated key visual.

  2. Rapid dashboard color and style variations

    Use one dashboard composition to explore color systems and visual directions more quickly.

Figma dashboard motion

Reusable motion methods for holographic scans, building growth, rolling numbers, charts and maps.

  1. Holographic scan and building growth

    Create holographic scanning and growth motion for industrial architecture in Figma.

  2. Rolling numbers, charts and map motion

    Practical motion patterns for numbers, charts and maps in visualization dashboards.

  3. Digital human, architectural key visual and chart motion

    A workflow covering dashboard digital humans, an animated campus key visual and common B2B chart motion.

3D visualization

Bring spatial visuals into design and code through a 3D map Skill, AI-generated models and 3D charts.

  1. Codex and the 3D Map Skill

    Use Codex and Three Scope Map Skill to build drilldown, flight lines and point effects as runnable code.

  2. Generate 3D models with AI and bring them into Figma

    Generate a 3D model with AI, then import it into Figma as part of a dashboard design workflow.

  3. 3D chart design and motion

    Build 3D chart forms manually and animate them in Figma.

Supporting dashboard screens

Extend the dashboard beyond its main view with coherent login and module-selection experiences.

  1. Visualization dashboard login

    Design and build a login entry for a visualization system.

  2. Visualization module selection

    Design a clear module entry and selection experience for a multi-module visualization system.

Code delivery

Turn an existing Figma design or an AI-generated image into a runnable and editable frontend page.

  1. Turn a dashboard design into a frontend page

    Use AI to restore an existing Figma dashboard design as a runnable frontend page.

  2. Generate a frontend page from an image

    When no design file exists, generate a visual with AI and turn the image into code and editable UI.

WeChat publication

The WeChat publication 送你整个夏天 is created and operated by Song Summer Dazzle.