Editable Visual Design

Coding-agent-driven creation of editable, tastefully crafted visual artifacts.

News

• 📌 2026-08-16 · Blog: How to hacking Design Arena: What Makes Generated Websites Fascinating? — Design guidance, context distillation, and visual references, explored through simplified internal simulations. English · 中文.
• 2026-09-08 — 🔬 Paper Fig, developed with GPT-6: turn method descriptions into editable paper workflow diagrams in your chosen style. Install · Examples.
• 2026-09-04 — 📢 Editable Design — Initial Release! Create editable posters, infographics, art posters, and marketing campaigns with real text, independent layers, and Agent Design Replay. 📄 Read our paper on arXiv.

Blog

How to hacking Design Arena: What Makes Generated Websites Fascinating?

Read in English → · 阅读中文版 →

Exploratory internal simulation, not official Design Arena results. “生图” in this animation denotes images used per page, not image-generation tool calls.

Overview

Quick Start

Posters, infographics, and campaigns

1. Open a Codex task and ask Codex to install and initialize the Skill:

   Install and initialize the editable-design Codex Skill from:
   https://github.com/yejy53/Editable-Design/tree/main/skills/editable-design
   
   Install its runtime dependencies and font kit, then run its doctor check.
   

2. Start a new Codex task, then describe the visual you want to create. For example:

   Use $editable-design to create an editable encyclopedia-style field guide about the red panda.
   

3. The Skill will create the finished design together with its editable source: real text, independent imagery, semantic HTML layers, a visual editor, a layer breakdown, and an Agent Design Replay.

Recommended: Use high reasoning effort or above for complex diagrams and layouts.

Optional: Editable PowerPoint export

For a one-step Codex installation, ask:

Install the html-to-pptx Codex Skill from:
https://github.com/yejy53/Editable-Design/tree/main/skills/html-to-pptx

Use it to convert my compatible HTML into an editable PowerPoint file.

Codex installs the Skill from that subdirectory. Its first conversion automatically prepares an isolated Python environment and Playwright Chromium; the user does not need to run dependency commands.

Choose a Skill

Install only the Skill you need. Paper Fig does not depend on either of the other Skills. See the Toolkit guide for detailed setup and packaging.

Paper Fig

Generate editable paper workflow and architecture diagrams in PowerPoint. Introduction, installation, and examples → · Skill source

View the OmniManip, Compact3D, and ICEdit examples →

Gallery

Thirteen visual-design examples. Click a figure to view the full-resolution PNG. For research diagrams, see the Paper Fig examples.

• 🎯 Campaigns
• 📚 Information Design
• ✍️ Text-led Design
• 📰 Poster
• 🎨 Art Design

Campaigns

山柚观音

Prompt:

Design a 3:4 vertical New Chinese light-luxury tea-launch poster in dark green, off-white, and gold, with rice-paper texture, restrained negative space, landscape accents, and modern layout. Hero: an appealing cold-brew tea with leaves, citrus, ice, and gold foil. Display exactly: "山川茶事" / "山柚观音" / "冷泡系列" / "新品上市"; "一口清醒，半城入夏" / "限定尝鲜价"; "中杯 16 元" / "大杯 19 元"; "门店活动" / "第二杯半价" / "加 3 元升级轻乳版" / "每日前 100 名赠限定杯套"; "推荐风味" / "观音茶底 / 西柚果香 / 轻乳云顶 / 冰感回甘"; "活动时间 4月20日 至 5月10日" / "扫码点单" / "SHANCHUAN TEA". Fine print: "图片仅供参考，请以门店实际售卖为准". Use clear promotional hierarchy, refined Chinese typography, and accurate small text, numbers, prices, and modules; avoid cheap e-commerce styling.

澄光维稳精华

Prompt:

Create a high-end skincare e-commerce hero poster for "澄光维稳精华" ("Clarifying Stabilizing Essence"). The style should be clean, light-luxury, and strongly science-skincare oriented. In the center, place a semi-transparent frosted-glass essence bottle filled with golden liquid and subtle water-droplet reflections. Use an off-white to warm gray gradient background with liquid-flow elements and microscopic molecular-structure decoration.
The poster must include the following exact Chinese copy:
"澄光"

---

Summer Music

Prompt:

Create a 2:3 vertical summer music poster with a bright, dreamy, and playful 3D look. Place a floating pair of gold-and-tan headphones in the center, with a pink geometric house behind them and silver lines and musical notes swirling around the scene. Fill the lower area with green grass and orange, yellow, and pink flowers, while adding a hot-air balloon, bubbles, and yellow doodles to the blue sky. Include the text “HAPPY DAY,” “SUMMER DAY,” “SEE THE COLORS,” “和你的夏天 有场约会,” and “想看五月的颜色,” using sky blue, bright yellow, pink, and green as the main colors.

---

Information Design

Red Panda Field Guide

Prompt:

Generate a high-quality vertical encyclopedia-style infographic about the red panda.
This should not be a normal animal poster or a simple illustration. It should feel like a modular wildlife field guide that combines the clarity of an encyclopedia page, the polish of a lifestyle knowledge card, and the shareability of a strong social-media explainer.
The image should include:

NYC 3-Day Guide

Prompt:

Create a vertical editorial travel infographic poster titled “纽约3天旅游攻略,” using a warm ivory paper background with navy blue, sky blue and taxi yellow accents. Divide the composition into four clear sections: a large top hero area with bold Chinese typography on the left and a watercolor-photo collage of the New York skyline, Statue of Liberty, Brooklyn Bridge, ferry and yellow taxi on the right; three stacked rounded itinerary cards for DAY 1 Manhattan landmarks, DAY 2 Central Park and museums, and DAY 3 Brooklyn and DUMBO; and a compact bottom row containing four practical cards for local food, transportation, budget and travel tips. Each daily card should include one framed watercolor city image, a pale-blue route bar, three columns labeled morning, afternoon and evening, yellow divider lines, a small food recommendation and a highlighted travel note. Alternate the image position between left and right to create rhythm, and connect the three days with a dotted yellow itinerary line along the outer edge. Use a clean modular grid, generous margins, subtle shadows, rounded corners, small friendly icons and strong typographic hierarchy. Blend polished tourism-guide design with hand-painted watercolor textures, torn brush edges and light paper grain; informative, cheerful, organized and easy to scan.

Abs Training Plan

Prompt:

生成一张竖版（4:5）中文健身信息图海报，主题「腹肌训练计划」。
风格：教学手册式信息图，白底，深蓝 + 橙色双主色，圆角白卡片配细边框，无衬线黑体，
信息密度高但排版整齐对齐。

---

Text-led Design

滕王阁序

Prompt:

生成包含完整的滕王阁序的海报

AI Team Love Letter

Prompt:

请设计一张 2:3 竖版中文 AI 团队招聘长图海报，尺寸 1080×1620 px。
【设计主题】
“写给未来同行者的一封情书”

Poster

E-Design

Prompt:

生成一张竖版 2:3 的高端自然探索杂志封面，写实摄影风格。
画面主体是一只色彩艳丽的猩红金刚鹦鹉，完整全身，停在一根覆盖青苔的粗树枝上。鹦鹉位于画面中央偏下，身体呈优雅的三分之四侧面，头转向右侧，长尾羽自然延伸至画面底部。羽毛由鲜红、橙黄、金黄、青绿和深蓝组成，层次丰富，羽毛纹理极其清晰，眼睛、鸟喙和爪子结构真实准确。
背景是茂密幽深的热带雨林，深墨绿色植物与巨大棕榈叶环绕画面，右上方的金色阳光穿过树冠，形成明显的丁达尔光束、薄雾和自然散景，整体具有电影感、神秘感和高级自然杂志摄影质感。色调以深森林绿、金黄色和鹦鹉的高饱和红蓝色为主。

Beijing Winter Atlas

Prompt:

生成一张3:4竖版《北京冬季城市图鉴》旅行海报：左侧约三分之一为米白色留白信息栏，顶部以古典宋体写大标题“北京”，下方写“BEIJING · WINTER CITY ATLAS”，搭配少量雪花、地标线稿、坐标和罗盘；右侧约三分之二是一座从右上延伸至底部中央的超精细北京雪景微缩沙盘，采用高位45度斜俯视角和层叠纸雕等高线边缘，中央偏右以红墙金顶、覆盖积雪的故宫为最大主体，右下为天坛，下半部包含彩绘牌楼、胡同院落、冰蓝色河道与拱桥，右上逐渐过渡到央视大楼、中国尊等现代CBD天际线；底部中央放置一名背对镜头、穿深色冬装并背着背包的独自行人，一串脚印沿雪路通向城市。整体为高级博物馆建筑模型、手工纸雕与电影级3D渲染结合的质感，以象牙白、银灰、冰蓝为主，朱红、青绿和暖金灯光点缀，安静、怀旧、梦幻且写实；避免卡通、塑料玩具感、满版城市、过度橙红、重复地标、乱码大字、水印、边框、翻页箭头和轮播圆点。

---

Art Design

Sky Archive

Prompt:

Create a vertical 4:5 minimalist photographic poster for a fictional meteorological archive. A deep blue sky fills about 80% of the frame, with one isolated white cloud in the upper right; at the bottom, place a rust-orange autumn tree beside a small white thatched-roof house with blue doors and windows on pale sandy ground. Add an enormous transparent outline character “蓝” across the open sky and the title “天空样本档案” in the upper left. Frame the cloud with ultra-thin white coordinate lines, grid marks, crosshairs and labels: “云层高度 1,860 m”, “风向 NE → SW”, and “观测编号 OBS-0807-03”. Label the tree “01”, house “02”, and cloud “03” with precise leader lines. Include subtle degree and altitude scales, small archival data blocks, thin technical typography, Swiss scientific editorial design, generous negative space, realistic photography, no people, extra objects, random text, or watermark.

Creative Journey

Prompt:

Create a polished wide 16:9 contemporary editorial poster on a clean warm-white background. At the top center, place a small irregular yellow outlined pill reading “THE CREATIVE JOURNEY”, followed by the large bold condensed navy headline “FROM SPARK TO POSSIBILITY” with a coral-red offset print shadow and loose yellow underline; surround it with only a few playful hand-drawn starbursts, colored dots, a dashed orbit and curved arrow. Below, arrange exactly five tall white rounded cards as a symmetrical overlapping fan with realistic soft floating shadows: the upright center card is largest and highest, the adjacent cards tilt slightly outward, and the outer cards tilt farther outward and sit lower. From left to right: DISCOVER shows a curious person catching glowing ideas with a butterfly net on a cobalt-blue blob, button “LOOK”; CONNECT shows two hands joining puzzle pieces on a yellow blob, button “LINK”; GROW shows a friendly robot watering a young plant on a coral-red blob, button “BUILD”; EXPLORE shows a traveler crossing water on stepping stones on a cyan blob, button “MOVE”; IMAGINE shows a paper airplane flying through a circular portal on a mint-green blob, button “DREAM”. Use loose black hand-drawn outlines, simple white characters, minimal details, saturated irregular color blobs, bold navy condensed titles and dark navy pill buttons with yellow text. Beneath the cards, add a thin navy dashed progress track with five colored nodes matching the cards and a small arrow, followed by the slogan “START CURIOUS. KEEP MOVING.” with two short coral strokes. Keep all cards fully visible and all supplied text exactly spelled; no extra text, extra cards, logos, watermarks, gradients, photorealism, dashboard elements or clutter.

TC 2024

Prompt:

Please generate a 2:3 aspect ratio Memphis Style poster. The poster is a vibrant, grid‑style design in electric blue, neon green, magenta, and orange. It mixes tech and pop‑culture icons: a Pac‑Man and ghost, an atom symbol, a human head with circuit traces, connected nodes and shapes, arrows, speech bubbles, stylized turbines or trees, “VR” beside goggles, and a DNA double helix along the right edge.
Main text:
- TC 2024

---

Citation

If you find Editable Visual Design useful, please consider citing our technical report:

@misc{ye2026editablevisualdesign,
      title={Editable Visual Design}, 
      author={Junyan Ye and Wei Liu and Dongzhi Jiang and Zichen Wen and HaoDong Li and Zhutao Lv and Jiaxin Lin and Jinhua Yu and Jun He and Zilong Huang and Rui Chen and Weijia Li},
      year={2026},
      eprint={2609.04034},
      archivePrefix={arXiv},
      primaryClass={cs.CV},
      url={https://arxiv.org/abs/2609.04034}, 
}

Acknowledgements

We are grateful to the open-source projects that have helped shape the public conversation around AI-native visual creation, including:

• awesome-gpt-image, whose clear prompt-and-result gallery helped inspire the presentation of this Gallery.
• PaperGallery, for providing the research paper workflow diagram reference cases used in our Paper Fig Gallery.
• OpenDesign, for advancing open, agent-driven, editable visual artifacts and visible design trajectories.
• AutoDesign, for advancing reusable DesignHarness optimization and evidence-grounded academic artifact creation through PosterBench.
• taste-skill, for advancing practical design-taste guidance for agent-built interfaces and visual systems.
• GenClaw, for exploring code-driven agentic image generation and reproducible visual-creation workflows.

And thanks to the broader open-source design and Coding Agent communities for making this work possible.

License

Original project code is provided under the Apache License 2.0. Third-party paper content and external runtime resources retain their respective terms; see Third-party notices. This community project is not an official OpenAI project.