#Figma
212 related articles
·2 min
Vibe Coding in Practice: Rebuilding a Gamified Portfolio with Figma + Framer + AI in Two Days
A Bilibili creator rebuilt their portfolio into a playable Steam-style site in two days using Figma, Framer, and AI-generated code. Full workflow breakdown inside.
Read more →
·3 min
Figma Code Context: Open-Source MCP Tool That Converts Design Files to Frontend Code in 30 Seconds
Figma Code Context is an open-source MCP tool that fetches structured design data via Figma API, enabling AI to generate high-fidelity frontend code in seconds.
Read more →
·2 min
Complete Tutorial: Image2 + Codex to Generate Editable Figma Design Files
Learn how to use ChatGPT Image2 to generate high-quality UI mockups and OpenAI Codex to convert them into editable Figma vector files in three steps.
Read more →
·4 min
Developing Figma Plugins with Codex: A Zero-Code Guide for Designers
Learn how to build Figma plugins with OpenAI Codex — no coding required. Covers project setup, quota management, Plan Mode, hands-on development, and publishing tips for designers.
Read more →
·2 min
v0 Figma Integration: One-Click Conversion from Design Files to High-Fidelity Functional UI Code
Vercel's AI tool v0 launches a new Figma integration that parses layouts, typography, components, icons, and more to convert static designs into high-fidelity, runnable frontend code.
Read more →
Tutorials·3 min
Andrew Ng Recommends Claude Code: From Getting Started to Figma-to-Web App in Practice
Andrew Ng and Anthropic launch a Claude Code course covering RAG chatbots, data analysis, and Figma-to-web apps, with MCP server integration and parallel session best practices.
Read more →
Tutorials·3 min
Figma + Cursor + UniApp in Practice: Building a Complete APP with Zero Manual Coding
How to build a complete online learning platform with Figma design, Cursor AI coding, and UniApp+UniCloud — including user APP and admin system — without writing any code manually.
Read more →
Tech Frontiers
Deep Dive into Six Major Open Source P…
·3 min
Deep Dive into Six Major Open Source Projects: GitHub Native Stacked PRs, Open Source Figma Alternative, and More
Deep dive into six open source projects: GitHub native Stacked PRs, Open Pencil design editor, Happy DOM, Open Agents cloud coding Agent, Bright Beans social media platform, and Fuse.js fuzzy search.
Read more →
Tutorials·2 min
Claude Code + PRD + Figma: A Complete Method for One Person to Build Enterprise-Level Frontend Prototypes
A complete guide to using Claude Code Plan mode, PRD five key elements, and Figma client to build enterprise-level frontend prototypes solo — no MCP required.
Read more →
Tutorials·3 min
Figma MCP in Practice: Complete Tutorial for Connecting Design Files Directly to an AI Code Editor
Step-by-step tutorial on connecting Figma design files to the Antigravity AI code editor via Figma MCP, covering MCP setup, Access Token config, and verification.
Read more →
Tutorials·2 min
TRAE Editor + Figma MCP Hands-On Tutorial: Convert Design Files to Web Code in One Click
Step-by-step tutorial: Install TRAE editor, configure Figma MCP, and auto-generate HTML web code from Figma designs with OpenRouter API setup included.
Read more →
Tutorials·2 min
Claude Code + Figma MCP in Practice: Bidirectional Sync Between Web Generation and Design Files
Step-by-step guide to configuring Claude Code with Figma MCP for bidirectional sync between AI-generated web pages and Figma design files, including setup and deployment.
Read more →
·5 min
Opus 5 Builds a No Man's Sky-Style Exploration Game in One Day: MCP and Sub-Agent Architecture Explained
A developer used Anthropic's Opus 5 model to build a No Man's Sky-style space exploration game in one day using Blender MCP and sub-agents. Deep dive into the technical architecture and industry implications.
Read more →
·4 min
LibTV Hands-On: A Full Breakdown of How an AI Agent Produces an Animated Short in One Day
Hands-on test of LibTV's AI Agent: from script and storyboarding to video compositing, one person completes an animated short in a day. Full breakdown of the Skill library, node workflow, and Story Board features.
Read more →
·5 min
Getting Started with Codex: Four Product Forms Explained & How to Choose Between Cursor, Claude Code, and Codex
In-depth analysis of OpenAI Codex's four forms (CLI, web, plugin, app), comparing Codex, Claude Code, and Cursor on price, stability, and use cases to help developers choose the right tool.
Read more →
·2 min
Hands-On with the CodeWorld Plugin: An AI Photo-Editing Tool Where You Point and It Changes
CodeWorld is a Codex-native infinite canvas plugin that lets you edit photos directly by drawing annotated leader lines. In our test, editing three spots at once only changed the marked areas while preserving overall detail—beginner-friendly, one line to install.
Read more →
·4 min
Gemini API in Practice: Building AI Agents with Files
Google's official hands-on: how to go from idea to production fast with AI Studio and build AI Agents using the now-GA Interactions API. The core idea—Agents are just combinations of files.
Read more →
·5 min
Gemini API in Practice: Building AI Agents with Files
Official Google hands-on: go from idea to production fast with AI Studio, and build AI Agents with the now-GA Interactions API. The core idea: an Agent is just a composition of files—Markdown plus a few scripts, no complex Python loops needed.
Read more →
·2 min
Codex Hands-On Tutorial: Generating MG Animation with an AI Agent in One Sentence
Get started with the Codex AI Agent from scratch: project creation, plugin config (Computer Use/Remotion), Plan Mode vs Goal Mode, and a hands-on demo of generating an MG animation in one sentence.
Read more →
·2 min
Codex Hands-On Tutorial: Generate MG Animation with an AI Agent in One Sentence
Get started with Codex AI Agent from scratch: project creation, plugin setup (Computer Use/Remotion), Plan Mode vs Goal Mode, and a hands-on demo of generating MG animation in one sentence.
Read more →