Elastik — Développeur Web & Formateur

A revolutionary workflow combining AI design, Claude AI-assisted development, and maximum automation. From Figma to dynamic WordPress site in record time.

The Challenge

A client contacts me with a complete Figma mockup (itself generated by AI) for their agency "Pile ou SaaS". Goal: transform this design into a 100% functional and dynamic WordPress site, with editable content via admin.

📊 Project Numbers

100% of code generated by Claude AI
9 page templates created
200+ ACF fields automatically configured
1 complete custom plugin developed
5 external integrations (Calendly, WhatsApp, Spotify, GSAP, Newsletter)
0 lines of code written manually

The Approach: 6 Phases

Phase 1: Figma Analysis

Complete Figma export and creation of high-resolution screenshots of each page. These screenshots serve as visual reference for Claude AI.

Phase 2: HTML/CSS Generation

Claude analyzes screenshots and generates responsive HTML/CSS code with Tailwind. Code is semantic, accessible, and pixel-perfect to the design.

Phase 3: WordPress Conversion

Transformation of static HTML into dynamic WordPress templates. Claude creates complete theme structure with header.php, footer.php, and custom templates.

Phase 4: ACF Dynamization

The most impressive part: Claude automatically generates all necessary ACF JSON files. Every text, image, button becomes editable. Over 200 fields created automatically.

Phase 5: Import Scripts

Claude creates PHP scripts to automatically import all Figma content into WordPress via ACF API. One click and all content is in place.

Phase 6: Advanced Features

Custom Newsletter Plugin: AJAX form, DB storage, Excel export, multilingual
GSAP Animations: ScrollTrigger, parallax, hover effects
Integrations: Calendly (popup), WhatsApp (header), Spotify (podcast embeds)
ACF Options Pages: Footer, editable global settings

Tech Stack

Claude AI

Code generation

WordPress

CMS

ACF Pro

Dynamic content

Tailwind CSS

CSS framework

GSAP

Animations

PHP 8+

Backend

Results

Complete, professional and 100% dynamic WordPress site delivered in a fraction of traditional time. Client can edit all content from WordPress admin, without ever touching code.

✅ Benefits

70% time saved vs manual development
Clean code following WordPress standards
Autonomous client: 100% editable content
Pro features: custom plugin, animations, integrations
Scalable: modular architecture for future extensions
Documented: reproducible workflow for other projects

What It Changes

This project illustrates how AI revolutionizes web development. No need to manually code hundreds of lines of PHP and ACF. Claude understands context, generates coherent code, and automates repetitive tasks.

The developer remains essential for:

Defining strategy and architecture
Validating generated code
Guiding AI with proper context
Handling complex cases and exceptions

But repetitive tasks (templates, ACF, imports, integrations)? AI handles them. Brilliantly.

From Figma to WordPress: 100% Automated with AI