yejy53/Editable-Design

What it solves

Traditional image generation often produces flattened images where local changes require regenerating the entire visual. Conversely, direct coding provides structure but often lacks consistent visual polish. Editable Visual Design bridges this gap by creating structured design artifacts that combine high-end visual direction with editable, semantic layers.

How it works

The system uses a coding agent to manage the entire design process from intent to final repair. It follows a three-part approach:

1. Coding-Agent-Driven Design: A persistent agent plans the composition, generates assets, implements HTML, and iterates based on observations.
2. Visual Prior: An image model provides the initial art direction (composition, color, hierarchy), but the final output is rebuilt using clean assets and HTML typography rather than shipping pixels from the image model.
3. Quality-Gated Artifacts: The output consists of real text, semantic HTML layers, and independent assets that can be edited, moved, and exported.

Who it’s for

Designers and creators who need high-quality, art-directed visual artifacts (such as posters, infographics, and field guides) that remain fully editable and can be exported to formats like PowerPoint.

Highlights

• Editable Outputs: Produces artifacts with real text and independent assets instead of flattened images.
• Agent Design Replay: Makes the creation path visible and traceable.
• Multi-format Export: Includes a tool to convert HTML designs into editable .pptx files.
• Deterministic Checks: Ensures quality through checks on canvas, fonts, and layer contracts.