DEV3 AI Product Designer for WooCommerce

WooCommerce plugin: a Fabric.js design studio for T-shirts, mugs, posters and phone cases, with AI artwork, a print-quality check and print-ready PDF, PNG and SVG files rendered from a sanitised, server-priced design. Free download: sign in and click Download ZIP. Add your own Google AI Studio (Gemini) API key to switch on the AI features; the documentation says which features work without one.

How it works

We built DEV3 AI Product Designer as a WooCommerce plugin in PHP, with a full-screen design studio built on Fabric.js and a React admin. The browser draws; the server decides what a design is allowed to contain and what it costs.

Key design decisions

• An allow-list sanitiser for design JSON. Only 13 Fabric object types and a fixed list of properties survive. Numbers are clamped to ranges, enums and colours are validated, text is stripped of markup, path data is checked command by command, groups are limited in depth, and each side is limited to the product type's element count.
• Images from this site only. Image sources must be this site's uploads or the plugin's own assets, never remote URLs, data: URIs or the private print folder. Uploads are checked by their bytes, not their names.
• The server prices the design. The browser total is a preview. The cart price is computed from the stored, sanitised design: element prices, print-area fees and template prices. The design is bound to the cart line by a 32-character key.
• Print files from the saved design. PDF at the physical size with bleed boxes and optional crop marks, PNG with real 300 DPI metadata and vector SVG, rendered with the same engine as the canvas. Uploaded print files are checked for PDF, PNG or safe SVG content and stored in a protected folder.
• Ordered designs are immutable. Editing a design that is already on an order creates a new design, so the file that was printed always matches the order.
• Safe AI artwork. Shopper prompts pass a blocklist normalised against spelling tricks, an optional AI moderation step and strict image safety settings, with per-session daily limits.

Architecture

Product types define views (front, back, sleeve, wrap), mockups, print areas in millimetres, bleed, safe zone, minimum DPI, allowed tools, fonts and palettes. The studio has text with 12 bundled fonts, uploads, clipart, shapes, templates, layers, undo and snapping, and on phones a bottom tool bar with pinch-to-scale and twist-to-rotate. Designs are saved to the shopper's account, carried through the classic and block cart and checkout, and attached to the order with previews. The print-quality check flags low-resolution images, text near the edge, cut-off elements, tiny text, low contrast and bright RGB colours; with the Google Gemini API connected, DEV3 AI adds artwork, slogan ideas, background removal, photo enhancement, a spelling and layout review and an admin template generator. The API client, encrypted key storage and usage logs come from a shared core used across DEV3's plugins.

What's in the download

• The installable plugin zip: upload it through Plugins → Add New → Upload Plugin.
• Full HTML documentation (installation, settings, hooks, FAQ).

Requirements

• WordPress 6.0 or newer and PHP 7.4 or newer
• WooCommerce 8.0 or newer, active (classic and block cart/checkout and HPOS are supported)
• A modern desktop browser for exporting large print files in the admin
• Optional: a Google Gemini API key for AI artwork, slogan ideas, AI photo tools, the AI design review and the template generator. Everything else works without one

Learn more

• How we built it: the AI Product Designer case study
• Engineering write-up on the DEV3 blog
• Also free in the DEV3 AI WooCommerce Plugins Bundle with every other WooCommerce plugin.