yejy53/Editable-Design

Quick Summary

Editable‑Design is a GitHub repo that ships Codex Skills – plug‑ins for the Codex AI‑assistant platform – enabling large language models to generate fully editable visual assets such as posters, infographics, marketing campaigns, and research‑paper diagrams. The system takes a natural‑language prompt, runs a persistent “coding‑agent” that plans, renders, and validates the design, and then outputs:

Structured HTML/CSS with real, editable text and separate image layers.
A visual editor for on‑device tweaking.
A Agent Design Replay that records the step‑by‑step creation process.
Optional conversion to PowerPoint (PPTX).

The repo contains three independent Skills:

Skill	What it does	Main output
`editable-design`	Posters, infographics, marketing campaigns	HTML, PNG, visual editor, layer breakdown, replay
`paper-fig`	Turn method descriptions into editable research‑paper workflow/architecture diagrams	Editable PPTX
`html‑to‑pptx`	Convert an existing HTML design into an editable PowerPoint file	PPTX

The README provides a one‑page “quick‑start” that shows how to install a Skill via Codex, feed a design prompt (e.g., “Create an encyclopedia‑style field guide about the red panda”), and obtain a fully editable artifact. It also links to a gallery of 13 example designs, a short video overview, and a research paper (arXiv 2609.04034) that describes the underlying approach.

Why It Matters

Editable output – Unlike many image‑only generators, the system keeps text, layout, and images as separate, editable components, making the results useful for real‑world design workflows.
Agent‑driven creation – A persistent LLM agent plans, renders, and repairs the design, and its actions are recorded for replay, giving transparency and repeatability.
Integration with Codex – By packaging the functionality as a Codex Skill, the project leverages an existing LLM‑assistant ecosystem, allowing users to invoke the design capability with natural language commands.
Multi‑modal export – HTML can be turned into PowerPoint, and research‑paper diagrams can be generated directly as PPTX, bridging design and academic documentation.

Getting Started (from the README)

Install the Skill – Use a Codex task to run the command shown in the README, or manually clone the repo with a sparse checkout and run the provided npm ci and font‑kit scripts.
Run a Codex task – Describe the visual you want. The agent will produce the design and return the editable assets.
Optional PPTX conversion – Install the html-to-pptx Skill and ask Codex to convert the generated HTML into an editable PowerPoint file.

Project Status

Initial release (2026‑09‑04) – Core Skills are functional and documented.
Paper & blog – A research paper (arXiv 2609.04034) and a blog post explain the methodology and showcase results.
Gallery – 13 curated examples demonstrate the range of visual styles the system can produce.

Where to Learn More

Paper: https://arxiv.org/abs/2609.04034
Blog: https://yejy53.github.io/Editable-Design/en/blog/genclaw-next/
Gallery & demo video: https://yejy53.github.io/Editable-Design/player.html#overview

TL;DR

Editable‑Design provides LLM‑driven, editable visual‑design generation via Codex Skills, turning natural‑language prompts into layered HTML or PPTX assets that can be further edited by designers.