Figma Portfolio Generator | AI-Assisted Development

As a designer I kept hitting the same wall: turning finished project work into portfolio pages meant re-organizing content, laying out pages, hunting down images, and redoing it all for the next iteration. So I built a personal system to automate that pipeline — a Figma plugin that turns structured project data into editable portfolio pages. Self-initiated, working prototype, built with AI-assisted development.

Portfolio production is repetitive manual work. Content gets restructured for every page, image assets break or go missing mid-layout, and once a page is flattened it can't be iterated. The existing options were fully manual (slow) or fully automated templates (rigid, uneditable, blind to missing assets). I needed something in between: deterministic generation that stays editable, with a human in the loop.

A solo self-initiated build: I handled product definition, UX, system architecture, workflow design, development iteration and quality validation. Concretely: I defined what the system does and doesn't do, designed the import → plan → generate → review workflow, implemented the Figma Plugin API integration in TypeScript, built the asset pre-check mechanism, designed the Candidate → Review → Approved / Rejected state model, and ran the full functional test matrix. AI-assisted coding accelerated implementation; the architecture, the planner/renderer separation and the review workflow were my design decisions. I won't attribute specific code to specific tools — the tools assisted, I directed.

Import structured project materials (JSON) — content, images, project metadata.

Generate a deterministic page plan — page slots, layout patterns, component mapping.

Asset pre-check — verify every image and asset is available before generation, with retry and fallback sources instead of silent failure.

Generate editable pages in Figma — real layers, real components, 1920×1080.

Review — the system stages every output as a Candidate and routes it through a Review gate (Approved / Rejected / Archive). The gate is implemented and working; no output has cleared it yet — see Current Status.

Structured content input (JSON) over free text keeps generation deterministic and debuggable. Planning is separated from rendering, so the page plan is inspectable before anything is drawn. Output is editable Figma layers — generated pages remain real design files, not flattened images. Asset pre-check before generation: every image is verified with retry and fallback sources, so a missing asset blocks the page instead of shipping it broken. Candidate → Review → Approved / Rejected: a human gate on every output. Automation proposes; I dispose.

These are engineering test records, not client business outcomes: 29/29 baseline functional tests passed; 18/18 generation matrix (project types × languages × image counts × visual/density variants); 20-page stress test with recovery passed; 12 public open-source project packages used as test inputs, producing a 126-page deterministic page plan; written acceptance records for every phase. What this proves: the pipeline is deterministic and robust.

Working internal prototype. The core pipeline (import → plan → asset check → generate → review) is implemented and tested. Visual output quality is still being iterated — an earlier renderer version was rejected in my own review, the current one is being recalibrated against real reference pages, and no output has passed review yet. Self-initiated project: no clients, no revenue, no growth metrics, none claimed.

Building this changed how I think about AI in design tooling. The win wasn't "AI generates pages" — it was designing the boundaries: what the machine decides (layout computation, asset verification) versus what the human decides (taste, approval). The Candidate → Review gate turned out to be the most important UX decision in the whole system. For client work I'd apply the same principle: automate the deterministic parts, keep human judgment where it matters.