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.