AI DESIGNER / CREATIVE TECHNOLOGIST
Methods, experiments and reusable workflows
Thirty-eight field-tested tutorials documenting how Song Summer Dazzle uses AI across UI, visualization, motion-led websites and creative technology.
2026 tutorial archive
Building a Complete Packaging System with AI
A complete AI visual workflow spanning packaging mockups, motion, logo design, brand extensions and campaign video.
Designing a Dashboard System Selector with AI
Start from an AI concept and motion background, then build icons, draggable cards and horizontal navigation in Figma.
Multi-style AI Dashboards and Figma Motion Export
Explore multiple visual directions from one dashboard structure and produce deliverable chart and decorative motion.
AI Character Models in Figma
Generate textured 3D character models with AI, pass them through Spline and embed them as interactive Figma assets.
AI Holographic Building Growth
A full workflow from industrial building assets to growth video and holographic scanning motion in Figma.
Figma Productivity Plugins
A practical collection of plugins for background removal, recoloring, motion export, vectorization, image transforms and 3D embeds.
AI-generated Dashboard Login Experience
Generate a smart-city backdrop, loading sequence and ambient scan motion, then assemble the login interaction in Figma.
Behance Search Keywords for Digital Product Design
A more precise inspiration-search system built around 3D Dashboard, HUD, FUI, Dashboard UI and HMI keywords.
Building a UI Component Library with AI
Use an AI coding tool and Vibma to build a component library from scratch or generate variables from an existing system.
Generating an Interactive 3D Visualization with AI
Use Google AI Studio to generate an interactive 3D motor demo, then refine material quality, guided steps and controls.
Building a Personal AI Information Network
Build a resilient AI information system by following primary sources, expert curators, their networks and active search paths.
Building an Industrial 3D Dashboard with AI
Generate an industrial robot-arm dashboard and refine motion logic, materials and data feedback through iterative visual review.
Generating Editable UI with AI
Generate B2B and consumer interfaces from prompts or references, restyle them and export editable design and code.
Generating Motion-led Websites with AI
Use Google Stitch to move from a design system to a motion-led website, then stabilize the workflow through reference-driven cases.
Figma MCP: Generating UI from a Component Library
Install Figma MCP and its Skill so AI can read an existing component library and generate screens in a target Figma file.
Generating a Component Library with Figma and Codex
Compare Markdown and structured-file workflows for building a maintainable Figma design system with Codex.
Deriving a Design System from Existing UI
Extract color, typography, forms and components from existing screens, build the system in Figma and bind legacy pages to it.
Figma and Google AI Studio Workflow
Rapidly generate an AI chat tool and B2B admin UI, refine sections, then import them into Figma with variables and auto layout.
GPT Image2: From UI to Portfolio and Brand Extensions
Generate a consumer UI system, then extend it into a portfolio, campaign graphics, merchandise and IP visuals.
Building a Brand Website with Kimi
Start from a full brand brief or a template to generate a website with authentication and database-backed functionality.
Turning GPT Image2 Visuals into Editable Interactive UI
Compare Figma Make, Codex and direct Figma workflows for turning AI-generated visuals into editable, interactive interfaces.
End-to-End AI + UI Workflow Collection
Connect component libraries, UI generation, image-to-UI, web-to-design and portfolio production with Codex and Figma.
Restoring a 3D Dashboard with AI
Start from a Figma design and restore the dashboard module by module with Vue, ECharts and Three.js for development handoff.
Building a 3D Map with an AI Skill
Use Three Scope Map Skill to generate a real GeoJSON 3D map and control theme, camera and drilldown levels.
An AI-assisted End-to-End UI Process
An end-to-end process from a rough brief and visual system to full UI, assets, mockups and portfolio presentation.
From PRD to UI and Code with AI
Turn a park-management brief into a PRD, B2B high-fidelity UI, a brand website and deliverable code.
AI-assisted Visualization Dashboard Workflow
A complete delivery workflow from dashboard concepts and asset extraction to key-visual motion, Codex implementation and Figma roundtrip.
Delivering a 3D Dashboard with AI
Move from dual-theme concepts and asset extraction to a runnable dashboard powered by the 3D Map Skill and polished mockups.
Building a Consumer App with AI
Move from a youth-oriented app concept and asset extraction to Codex implementation, Figma refinement and high-resolution mockups.
Building an Interactive Film Experience with AI
Move from script, characters and storyboard to directed staging, game UI assets and an interactive Codex implementation.
Eight Practical AI + UI Workflows
A composable workflow map spanning B2B UI, visualization, consumer apps, portfolios, Figma and code delivery.
Three Scope Map Skill Guide
Install and use the open-source Skill, generate other provinces, theme the map, save camera views and connect it to dashboard delivery.
Authoring an AI Skill without Writing Code
First refine a working result with Codex, then extract it into a Skill, publish it on GitHub and validate a clean installation.
AI Visualization Dashboard Workflow Collection
Five chapters and twelve practical tutorials spanning ideation, Figma motion, 3D visuals, supporting screens and code delivery.
Building a Dynamic Portfolio with AI
Create an interactive Hero through character-led storyboard video, then use Codex and structured project data to build a dynamic portfolio.
Three Scope Map Skill 2.0
Add a 3D Earth entry, drill from a global view into China and provincial maps, and improve theming and loading performance.
Building a Visual Portfolio with AI
Build a visual portfolio from a virtual-character Hero and looped video to timeline characters, flashlight interaction assets and a production frontend in Codex.
Building an FUI Dashboard with AI
Use Lovart to derive an FUI direction, then move through asset extraction, mockups, reusable Skills, a 3D-globe frontend and a Figma roundtrip.
Design retrospective
How I Turned a Working 3D Map into a Reusable Skill
A retrospective on turning an AI-built visual demo into a reusable Three.js Skill.