How to Import AI‑Generated Posters Directly into Figma Using an Agent Design Skill

Step 1: Find Inspiration

The author points to the site https://genvizu.com, which hosts over 10,000 high‑quality poster designs collected from various creators. Selecting a suitable concept from this library helps streamline the subsequent AI generation.

Step 2: Generate the Image

Using OpenAI Codex, the author feeds a detailed prompt describing a minimalist streetwear graphic poster, specifying typography, colors, model pose, and visual style. The model returns a high‑resolution image that matches the description.

帮我生成图片：Ultra clean streetwear graphic poster on a minimalist light gray background. Massive bold black typography reading "SOCIAL" dominates the upper composition. In front of it, oversized neon green graffiti bubble lettering spells "INTROVERT", featuring thick black outlines, glossy highlights, soft inflated shapes, hand drawn urban aesthetics, and modern street art styling.

Centered in the composition stands a realistic young streetwear model photographed from the back in a relaxed, confident pose. The subject wears an oversized vintage black graphic band t shirt, ultra baggy cargo pants with heavy folds and texture, chunky sneakers, and dark sunglasses. Hands casually placed inside pockets, creating a calm, detached, introspective mood. High contrast monochrome treatment applied to the model while the graffiti typography remains vibrant neon green, creating a striking visual contrast.

The figure overlaps the typography, producing depth and a layered editorial design. Small minimalist text above reads "MY SELF". Side captions include "SOCIAL INTROVERT" and "PERSONALITY" in clean modern sans serif typography.

Large bold headline near the bottom reads "COMFORTZONE" with a short personal statement beneath: "I am a person who prefers to be alone and avoid crowds. Prefers to socialize in small groups. I'm not anti social but this is me."

Style combines luxury streetwear advertising, modern fashion editorial design, Y2K graphics, urban culture aesthetics, graffiti typography, poster art, monochrome photography, oversized typography, clean vector elements, premium apparel branding, Instagram fashion campaign, high contrast shadows, crisp edges, professional graphic design, 4K ultra detailed, print ready quality.

Color Palette: Light gray background, deep black typography, neon green graffiti lettering, monochrome black and white subject.

Keywords: social introvert, comfort zone, streetwear poster, fashion editorial, oversized typography, graffiti lettering, baggy fashion, urban culture, luxury streetwear, modern graphic design, minimalist poster, Y2K aesthetic, premium apparel artwork, monochrome photography, hypebeast style.

3:4比例

Step 3: Analyze and Generate Layered HTML

The author sends another Codex instruction to convert the poster image into a layered HTML page, asking each visual element to be as independent as possible.

/agent-design 使用skills，将图片转为分层的html网页。各个元素尽可能独立。

Codex identifies the PNG as a cut‑out‑ready asset, extracts text elements, and produces a set of HTML layers. The author validates the result by overlaying the original and generated images, noting that differences become clearer in grayscale comparison.

After several iterative loops, the final HTML approximates the original layout, though minor deviations remain that require manual adjustment.

Step 4: Transfer to Figma for Editing

The author built a Figma community plugin called A2F (Any‑HTML‑Website‑to‑Figma). The plugin is available at

https://www.figma.com/community/plugin/1645412835513678534/a2f-any-html-website-to-figma-import-websites-to-figma-designs-web-html-css

.

Why did I reinvent the wheel? Similar plugins already exist, even from Figma itself.

The author finds existing solutions cumbersome—Figma’s official plugin requires a paid membership. A2F offers smart layer recognition, automatic naming, and design token generation.

Usage: after installing the plugin, open the HTML page generated by Codex, click the capture button, and enable “smart layer naming”. The plugin extracts the layers, which can then be pulled into Figma for free editing.

Design systems can also be extracted automatically.

Token Consumption

The workflow is token‑heavy; a single run consumes roughly 20 % of a Plus‑tier five‑hour quota.

Overall, the author concludes that while the current implementation still needs manual tweaks in Figma, the approach demonstrates a promising direction for AI‑augmented design pipelines.