{"id":"e45d8027-9eaf-4750-850c-7097d73d09df","slug":"guangzhaoli-image2editable","kind":"skill","name":"image2editable","summary":"Agent skill for turning images, papers, and briefs into editable figures, posters, and visual designs. Reference learning, image + text specs, SVG/PPTX workflows.","owner":"guangzhaoli","repoUrl":"https://github.com/guangzhaoli/image2editable","license":"MIT","licenseTier":"permissive","trust":"community","stars":3,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-13T13:27:31.000Z","addedAt":"2026-10-21T11:46:58.681Z","logoUrl":"https://avatars.githubusercontent.com/u/190363082?u=addd8eeb97bdd3029ef50c89b7b7a0595e090c9f&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","files-documents"],"tags":["affinity","codex","design-tools","illustrator","poster","powerpoint","scientific-figures","svg"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-27T02:00:42.385Z","sample":false,"url":"https://conduits.dev/tools/guangzhaoli-image2editable","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"<div align=\"center\">\n\n# Image2Editable\n\n**Turn images, papers, and ideas into editable visual designs.**\n\n[English](README.md) · [简体中文](README.zh-CN.md)\n\n[![Workflow v4.2.1](https://img.shields.io/badge/workflow-v4.2.1-2B6D66)](CHANGELOG.md)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n[![Agent Skill](https://img.shields.io/badge/agent-Codex-222222)](#quick-start)\n\n[Gallery](#gallery) · [Quick start](#quick-start) · [Workflow](#workflow) · [Examples](docs/examples.md) · [Runtime and exports](docs/runtime.md)\n\n</div>\n\nImage2Editable is an agent skill for **reconstructing figures, designing new visuals, and learning from style references**. It connects content analysis, visual design, and reconstruction into editable text, shapes, paths, and reusable components.\n\nUse it for paper frameworks, scientific explainers, posters, and product visuals. The workflow supports **Affinity, Adobe Illustrator, and PowerPoint**, with a shared drawing spec for SVG and native PPTX output.\n\n## Gallery\n\nFour English examples from the current v4.2.1 workflow. Click an image for the full resolution.\n\n<table>\n  <tr>\n    <td width=\"50%\" align=\"center\"><a href=\"assets/gallery/clip.png\"><img src=\"assets/gallery/clip.png\" width=\"100%\" alt=\"CLIP training and zero-shot classification framework, with separate image and text routes\"></a><br><strong>CLIP</strong><br>Scientific framework · new composition</td>\n    <td width=\"50%\" align=\"center\"><a href=\"assets/gallery/water-cycle.png\"><img src=\"assets/gallery/water-cycle.png\" width=\"100%\" alt=\"Water in Motion, an English landscape explainer of five natural water-cycle processes\"></a><br><strong>Water in Motion</strong><br>Science explainer · new composition</td>\n  </tr>\n  <tr>\n    <td width=\"50%\" align=\"center\"><a href=\"assets/gallery/speaker.png\"><img src=\"assets/gallery/speaker.png\" width=\"100%\" alt=\"Take the Long Way speaker visual with English serif typography, a woven speaker, and material details\"></a><br><strong>Take the Long Way.</strong><br>Product editorial · existing-image restyle</td>\n    <td width=\"50%\" align=\"center\"><a href=\"assets/gallery/night-poster.png\"><img src=\"assets/gallery/night-poster.png\" width=\"100%\" alt=\"After Dark concept poster with bold English typography, a large moon, and a telescope observer\"></a><br><strong>After Dark</strong><br>Event poster · new composition</td>\n  </tr>\n</table>\n\n**Gallery stage:** these four examples are reviewed **PNG visual targets**. They have not been reconstructed into editable native projects. The [case notes](docs/examples.md) include prompts, sources, and the CLIP repair history. A separate [executable SVG example](examples/renderer-demo/rendered/figure.svg) demonstrates the drawing-spec path.\n\n## What you can do\n\n| Start with | Ask Image2Editable to | Get |\n|---|---|---|\n| A paper figure or screenshot | Measure its layout, sample colors, extract useful assets, and reconstruct it against the original | An editable figure with traceable geometry and review notes |\n| A paper or method description | Check the method, map its content and relations, study relevant visual references, and design a framework | A reviewed visual target, followed by an editable project when requested |\n| A brief | Design a poster, scientific explainer, or product visual | A full composition with planned typography and image placement |\n| An existing image and references | Learn selected palette, typography, layout, or imagery traits and adapt them to the target | A restyled image or revised editable project |\n| An analyzed figure spec | Extract modules, colors, and text styles into reusable catalogs | Component SVGs, JSON inventories, ASE swatches, and optional PPTX catalog pages |\n\n### Reference learning with an image + text spec\n\nReferences stay visible throughout the process. The visual spec can include original images, annotated regions, local samples, color swatches, and written adaptation decisions.\n\n- **Study the reference:** identify what makes its hierarchy, spacing, palette, and imagery work.\n- **Choose what transfers:** apply the useful traits to the new content while preserving facts and required text.\n- **Pass the actual images:** attach the selected source images or crops to generation together with the written analysis.\n- **Keep the evidence:** save the image + text record as portable HTML and JSON.\n\nFor example, the speaker study samples **`#F4ECE1`** for the paper ground, **`#273E31`** for the main ink, and **`#A3B1A0`** for supporting rules. Sampling boxes and median/mode methods are recorded. These are measured reference colors, not a guarantee of exact RGB throughout a generated image.\n\n[Inspect the speaker visual spec](examples/style-study-speaker/visual-spec.json) · [Download/open its HTML locally](examples/style-study-speaker/visual-spec.html)\n\n<details>\n<summary>See the reference, annotation, and palette evidence board</summary>\n\n![Speaker image-and-text visual evidence board](examples/style-study-speaker/visual-spec-board.png)\n\nThe board is a compact diagnostic view. The HTML and JSON preserve the complete observations.\n\n</details>\n\n## Quick start\n\n**Best-supported environment:** Codex with local file access, image inspection, and an image-generation tool. Native application review also needs the relevant application and a working control mechanism. See [runtime requirements](docs/runtime.md) before requesting PPTX export.\n\n### 1. Install the skill\n\nClone the repository, then install a local skill symlink on macOS/Linux:\n\n```bash\ngit clone https://github.com/guangzhaoli/image2editable.git\ncd image2editable\n```\n\nFrom the repository root:\n\n```bash\nmkdir -p \"$HOME/.agents/skills\"\nln -s \"$PWD/skills/image2editable\" \"$HOME/.agents/skills/image2editable\"\n```\n\nKeep the repository at that location. The command does not replace an existing installation. Codex discovers local skills from `~/.agents/skills`; if the skill does not appear, restart Codex. See the [official skill documentation](https://learn.chatgpt.com/docs/build-skills).\n\nYou can also ask your agent to install the `skills/image2editable` folder from this checkout. Other Agent Skills hosts may load the instructions, but their image-generation and application-control integrations need separate validation.\n\n### 2. Attach your inputs and describe the outcome\n\n```text\nUse $image2editable to recreate the attached paper figure in PowerPoint.\nKeep the original layout and exact labels. Make text and diagram shapes\nindividually editable. Deliver the PPTX, a PNG preview, and review notes.\n```\n\n```text\nUse $image2editable to read this paper and design an English method figure.\nCheck the pipeline and relationships, study relevant architecture diagrams,\ncreate an image-and-text visual spec, then build and review the visual target.\nReconstruct the selected design as editable SVG.\n```\n\n```text\nUse $image2editable to improve my poster using these two references.\nLearn the palette and typography from the first, and the layout rhythm\nfrom the second. Preserve my subject and exact wording.\n```\n\nMention your **target application, exact copy, dimensions, and elements to preserve** when they matter. Both English and Chinese briefs are supported.\n\n### 3. Try the drawing helpers independently\n\nThe included synthetic example runs with Node.js and does not need image generation:\n\n```bash\nnode skills/image2editable/scripts/render_figure.mjs \\\n  examples/renderer-demo/figure-spec.json --check\n\nnode skills/image2editable/scripts/render_figure.mjs \\\n  examples/renderer-demo/figure-spec.json \\\n  --out _build/svg-demo --format svg\n```\n\nOutput directories must be new, so a rerun cannot overwrite manual edits. [More commands and dependencies](docs/runtime.md).\n\n## Workflow\n\nFor new designs and substantial restyling:\n\n```mermaid\nflowchart TD\n    A[Paper, brief, or existing visual] --> B[Verify content and map relationships]\n    B --> C[Study actual visual references]\n    C --> D[Image + text visual spec]\n    D --> E[Generate or edit the full composition]\n    E --> F[Review content and visual quality]\n    F -->|Local repair| E\n    F -->|Selected target| G[Executable figure spec]\n    G --> H[SVG or native PPTX]\n    H --> I[Inspect, edit, save, and reopen in the target app]\n```\n\n**Faithful reconstruction** starts with measured geometry, sampled colors, extracted assets, and an aligned original underlay. It preserves the reference layout unless a redesign is requested. Simple diagrams and local edits can take a direct vector or native route.\n\nThe project uses three records with different purposes:\n\n| Record | Purpose |\n|---|---|\n| `design-plan.json` | Content evidence, claims, nodes, relationships, and design decisions |\n| `visual-spec.json` + `visual-spec.html` | Actual references, visual observations, annotated samples, palette, and adaptation choices |\n| `figure-spec.json` | Executable coordinates, text, styles, assets, groups, and connections consumed by the drawing backends |\n\n**Content, appearance, and editability are reviewed separately.** Successful generation or export does not certify all three.\n\n## Editable output and application support\n\n| Target | Output route |\n|---|---|\n| **Affinity** | SVG/PDF interchange, followed by native editing and saving in the installed application |\n| **Adobe Illustrator** | SVG/PDF interchange or available native scripting, followed by `.ai` saving in Illustrator |\n| **PowerPoint** | Native PPTX text boxes, shapes, groups, paths, and local image assets |\n\n## Components and palettes\n\nOnce a figure has a verified drawing spec, build a reusable catalog:\n\n```bash\nnode skills/image2editable/scripts/build_library.mjs \\\n  examples/renderer-demo/figure-spec.json --out _build/library-demo\n```\n\nThis produces component SVGs, catalog boards, `library.json`, `palette.json`, `text-styles.json`, and `palette.ase`. Optional PPTX catalog pages use the same runtime as PPTX figure export.\n\n[Browse the generated example library](examples/renderer-demo/library/library.json) · [Preview its component board](examples/renderer-demo/library/boards/01-components.svg)\n\nExtraction begins with analyzed objects in the spec. It is not an automatic segmentation tool for arbitrary photos. Catalogs are editable snapshots; native Symbols, Assets panels, global colors, and theme bindings require application-specific setup.\n\n## Repository map\n\n```text\nimage2editable/\n├── README.md / README.zh-CN.md\n├── skills/image2editable/       # SKILL.md, reference guides, scripts, fixtures\n├── assets/gallery/             # Actual generated example images\n├── examples/\n│   ├── english-cases/          # Briefs, prompts, review summaries\n│   ├── style-study-speaker/    # Portable image + text visual spec\n│   └── renderer-demo/          # Executable spec, SVG, component library\n└── docs/                       # Examples, runtime, README research, launch copy\n```\n\n## Contributing\n\nUseful contributions include clear failure cases, better visual references, renderer improvements, and application compatibility checks. Please include the input, expected behavior, actual output, environment, and a concrete observation. Keep scientific correctness and editability distinct from aesthetic preference. See [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Acknowledgements\n\n[Editable Design](https://github.com/yejy53/Editable-Design) helped inform the practice of developing a complete visual target before editable reconstruction. Image2Editable adapts that idea to a shared SVG/PPTX drawing spec and native-application review. See the [design research notes](skills/image2editable/references/design-research.md) for additional influences and their scope.\n\nThe README structure draws on [Superpowers](https://github.com/obra/superpowers), [Anthropic Skills](https://github.com/anthropics/skills), and the concise installation framing of [OpenAI Skills](https://github.com/openai/skills). The latter is now deprecated; current installation guidance is checked separately. [Research and adaptation notes](docs/readme-research.md).\n\nGallery content references include the [CLIP paper](https://proceedings.mlr.press/v139/radford21a.html), [USGS water-cycle material](https://www.usgs.gov/media/images/water-cycle-png), and [NASA/JPL's Grand Tour poster](https://www.jpl.nasa.gov/images/the-grand-tour-jpl-travel-poster/) for visual style. These sources do not endorse this project.\n\n## License\n\nProject code and documentation are released under the **[MIT License](LICENSE)**. External papers, reference designs, software, and other third-party materials retain their own terms. See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) for gallery provenance and the boundary of this release.\n"}