<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  
  <title>Aron Szabo, blog</title>
  <subtitle>Notes on connected platforms, embedded security and compliance.</subtitle>
  <link href="https://aron.ws/blog/feed.xml" rel="self" />
  <link href="https://aron.ws/" />
  <updated>2026-09-30T00:00:00Z</updated>
  <id>https://aron.ws/</id>
  <author>
    <name>Aron Szabo</name>
  </author>
  <entry>
    <title>How to speed up your coding agent</title>
    <link href="https://aron.ws/blog/speed-up-your-coding-agent/" />
    <updated>2026-09-30T00:00:00Z</updated>
    <id>https://aron.ws/blog/speed-up-your-coding-agent/</id>
    <content type="html">&lt;p&gt;I&#39;ve analyzed the leaked system prompts, and here&#39;s what I found about how to speed up your LLM.&lt;/p&gt;
&lt;p&gt;The prompts are for Claude (Opus 5.5) and OpenAI&#39;s Codex desktop app (GPT-6), from the CL4R1T4S collection on GitHub. I was looking for which local tools a coding agent expects to find on the machine.&lt;/p&gt;
&lt;p&gt;A lot of checking whether a tool exists, a failed import, a pip install, a retry. Anthropic&#39;s cloud sandbox avoids that. Its skills tell the model outright that a library is preinstalled.&lt;/p&gt;
&lt;p&gt;&lt;video src=&quot;https://aron.ws/assets/blog/agent-tool-list.mp4&quot; poster=&quot;https://aron.ws/assets/blog/agent-tool-list-poster.webp&quot; width=&quot;800&quot; height=&quot;800&quot; autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot; preload=&quot;metadata&quot; role=&quot;img&quot; style=&quot;display:block;max-width:100%;height:auto&quot; aria-label=&quot;Two agent terminals side by side. Without a tool list the agent probes the machine first, with a tool list it reads what is installed and needs fewer turns to finish the task. Illustrative example.&quot;&gt;&lt;/video&gt;&lt;/p&gt;
&lt;p&gt;You can get the same effect locally. Install these once:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Search:&lt;/strong&gt; rg (ripgrep), jq&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Documents:&lt;/strong&gt; pandoc, LibreOffice, poppler (pdftotext, pdftoppm), qpdf, tesseract&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Python:&lt;/strong&gt; markitdown, openpyxl, pandas, pypdf, pdfplumber, pymupdf, reportlab, python-pptx, pytesseract, pdf2image, Pillow, lxml, defusedxml&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Node:&lt;/strong&gt; docx, pptxgenjs, sharp, react-icons, playwright&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Then tell the agent what&#39;s there. One line in CLAUDE.md or AGENTS.md listing the installed tools removes extra checks at the start of every task. The vendor prompts do exactly this for their own sandboxes.&lt;/p&gt;
&lt;p&gt;Two things I did not expect:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;OpenAI&#39;s Codex bundles Node, Python and document libraries and hands the model their paths, and it prefers rg over grep.&lt;/li&gt;
&lt;li&gt;Claude&#39;s prompt tells the model to avoid grep, cat and sed in the shell and use its own tools.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;To be precise: the model itself runs at the same speed. The agent finishes sooner because it stops spending turns on setup.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Emission cheating devices don&#39;t hack anything</title>
    <link href="https://aron.ws/blog/emission-cheating-devices/" />
    <updated>2026-09-26T00:00:00Z</updated>
    <id>https://aron.ws/blog/emission-cheating-devices/</id>
    <content type="html">&lt;p&gt;Emission cheating devices don&#39;t hack anything.&lt;/p&gt;
&lt;p&gt;An AdBlue emulator sits on a truck&#39;s CAN bus and sends valid sensor frames onto a bus that was built to trust whatever checks out as valid.&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/adblue-emulator.webp&quot; width=&quot;800&quot; height=&quot;800&quot; loading=&quot;lazy&quot; alt=&quot;A hand holding a plug-in OBD2 AdBlue emulator for trucks, labelled &#39;Drive your truck without diesel exhaust fluid&#39;, with black smoke rising from its connector&quot;&gt;
&lt;/figure&gt;
&lt;p&gt;It works for exactly one reason: the bus has no authentication.&lt;/p&gt;
&lt;p&gt;The hacker is always drawn as a hooded stranger, but in reality, the attacker is the owner, or someone at the workshop that fitted it, with a financial reason to do it.&lt;/p&gt;
&lt;p&gt;Then Euro 7 and UN R155 arrive: signed emissions data, sensor spoofing designed out, diagnostic access protections with real crypto.&lt;/p&gt;
&lt;p&gt;The simple attacks will stop working. But demand does not vanish when you close the cheap door. The next defeat device will be fault injection: voltage glitching, EMFI.&lt;/p&gt;
&lt;p&gt;Manufacturers call it expensive and rare. The tuning world has sold it over the counter for years.&lt;/p&gt;
&lt;p&gt;I&#39;m going to document two things: what we&#39;re actually doing about it right now, and what the next generation of attacks will look like.&lt;/p&gt;
&lt;p&gt;Follow along. This one gets uncomfortable.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Balancing AI tensions: Moving from AI adoption to effective SDLC use</title>
    <link href="https://aron.ws/blog/balancing-ai-tensions/" />
    <updated>2026-09-19T00:00:00Z</updated>
    <id>https://aron.ws/blog/balancing-ai-tensions/</id>
    <content type="html">&lt;p&gt;DORA read 1,110 comments from Google engineers and found that AI speeds up drafting, boilerplate and getting started, but the time saved often goes into checking the output, and reviewers carry a heavier load as pull requests grow. It also lets engineers work in unfamiliar areas without the struggle that builds deep expertise, and fast prototypes still need the slow work of getting to production. Their advice: measure impact rather than lines of code, move AI feedback to the author, keep changes small, cut down the number of tools, and protect time for deep learning.&lt;/p&gt;
&lt;p&gt;Check it out: &lt;a href=&quot;https://dora.dev/insights/balancing-ai-tensions/&quot;&gt;Balancing AI tensions&lt;/a&gt;, by Jessica Baolin and Nathen Harvey at DORA.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>“I’ll design this and export it as a PNG you can upload directly to LinkedIn.” Oh, really ???</title>
    <link href="https://aron.ws/blog/export-png-for-linkedin/" />
    <updated>2026-09-16T00:00:00Z</updated>
    <id>https://aron.ws/blog/export-png-for-linkedin/</id>
    <content type="html">&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/01.webp&quot; width=&quot;1114&quot; height=&quot;627&quot; alt=&quot;Cover: a bored cartoon sheep saying &amp;quot;booooring!&amp;quot; in front of a row of generic AI-generated CI infographics, under the title &amp;quot;Randomness to the Rescue: Taking Control of AI-Generated Design&amp;quot;&quot;&gt;
&lt;/figure&gt;
&lt;p&gt;I ran an experiment: how far can you push AI image generation before it&#39;s faster to just drag things around yourself? The trick isn&#39;t a better prompt. It&#39;s knowing when to stop.&lt;/p&gt;
&lt;p&gt;Tbh, I&#39;m not even reading anything that&#39;s illustrated with these low-quality, half-baked, AI-generated images. I&#39;m not anti-AI, just an AI realist. I&#39;m also no design expert, I just prefer to view diverse, readable, stylish, beautiful, and symmetrical infographics &lt;strong&gt;where&lt;/strong&gt; &lt;strong&gt;the intention was&lt;/strong&gt; clearly &lt;strong&gt;to help me understand something&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;I figured I&#39;d offer some tech-focused approaches to sorting out at least some of these problems. It turned out it&#39;s not that easy at all.&lt;/p&gt;
&lt;p&gt;Let&#39;s go down a rabbit hole together and see how we could solve this problem with widely available tools like Gemini, Claude and/or ChatGPT. My goal is to show a fast and simple method exists that doesn&#39;t require any extra subscriptions and still gets something better than the default:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/02.webp&quot; width=&quot;1000&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; alt=&quot;A grid of AI-generated CI process infographics in many styles, each labelled as an option&quot;&gt;
&lt;/figure&gt;
&lt;h2&gt;Diversity&lt;/h2&gt;
&lt;p&gt;To demonstrate this, I&#39;ve asked the following from all of them:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Create a PNG image for a LinkedIn post that explains a strong CI (continuous integration) process for a SaaS product. Use icons to represent each stage of the process. It&#39;s aimed at a professional audience.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/03.webp&quot; width=&quot;600&quot; height=&quot;400&quot; loading=&quot;lazy&quot; alt=&quot;First attempt in ChatGPT&quot;&gt;
  &lt;figcaption&gt;First attempt in ChatGPT&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;It&#39;s good, but it looks like the ten thousand other images I see every day. Boring.&lt;/p&gt;
&lt;h3&gt;Random to the rescue&lt;/h3&gt;
&lt;p&gt;You could do this properly and create a design system or give detailed instructions. However, to keep the effort low, you could generate a lot of random options and then pick one you like from the randomly generated images. So let&#39;s run:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Give me 6 random options.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/04.webp&quot; width=&quot;716&quot; height=&quot;400&quot; loading=&quot;lazy&quot; alt=&quot;&amp;quot;Randomized&amp;quot; options.&quot;&gt;
  &lt;figcaption&gt;&amp;quot;Randomized&amp;quot; options.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Well let&#39;s not give up just yet. Let&#39;s be a little more specific:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-text&quot;&gt;Before doing anything:
- Run a shell script to generate a random 96-character alphanumeric string that doesn&#39;t read as a hex value, and derive a design system from it: color palette with hex values, typography, spacing and grid, shape language, and a one-sentence tone.
- Say in two or three lines what you saw in the string and how it shaped the choices. The seed informs styling only, never the content, and never appears in the output.
- Save and label the design system for reuse.
- Recommended image sizes are: 1080 x 1350 px (4:5 ratio), 1080 x 1080 px (1:1 ratio), and 1200 x 627 px (1.91:1 ratio).
- The brief sets the bounds (audience, platform, legibility), and the seed picks a direction inside them.

Generate one image with six different labeled design options, and make sure to re-run the seeding and design process for every option. The image will be used for a LinkedIn post that explains a strong CI (continuous integration) process for a SaaS product. Use icons to represent each stage of the process. It&#39;s aimed at a professional audience.
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The ask can be more specific, give it more keywords as much information as you can.&lt;/p&gt;
&lt;p&gt;Magic:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/05.webp&quot; width=&quot;853&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; alt=&quot;GPT-5.6&quot;&gt;
  &lt;figcaption&gt;GPT-5.6&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/06.webp&quot; width=&quot;1080&quot; height=&quot;1350&quot; loading=&quot;lazy&quot; alt=&quot;Claude Fable 5.1 / High&quot;&gt;
  &lt;figcaption&gt;Claude Fable 5.1 / High&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/07.webp&quot; width=&quot;613&quot; height=&quot;400&quot; loading=&quot;lazy&quot; alt=&quot;Gemini 3.1 / Pro&quot;&gt;
  &lt;figcaption&gt;Gemini 3.1 / Pro&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;We now have better options to choose from and we can re-run these and new variations will appear. I think the images Gemini generated were more readable but it still drifted at every prompt:&lt;/p&gt;
&lt;figure&gt;
  &lt;video src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/08.mp4&quot; poster=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/08-poster.webp&quot; width=&quot;1200&quot; height=&quot;634&quot; autoplay=&quot;&quot; loop=&quot;&quot; muted=&quot;&quot; playsinline=&quot;&quot; preload=&quot;metadata&quot; role=&quot;img&quot; aria-label=&quot;Animation of image generation drift&quot; style=&quot;display:block;max-width:100%;height:auto;margin:0 auto&quot;&gt;&lt;/video&gt;
  &lt;figcaption&gt;Animation of image generation drift&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Claude is trying to code its way out of the situation (we&#39;ll talk about this later), so in this setup ChatGPT looks like the clear winner to me. I like &lt;strong&gt;Option E&lt;/strong&gt;, with the mountain, but the text readability is bad, so let&#39;s figure out why.&lt;/p&gt;
&lt;h2&gt;Readability&lt;/h2&gt;
&lt;p&gt;I&#39;ve cut a few random parts from one of the images ChatGPT generated and played around with the hue, saturation, and exposure values to make the problem more visible:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/09.webp&quot; width=&quot;724&quot; height=&quot;301&quot; loading=&quot;lazy&quot; alt=&quot;Original vs Hue-Saturation and Exposure modified image&quot;&gt;
  &lt;figcaption&gt;Original vs Hue-Saturation and Exposure modified image&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;My eyes get tired just looking at these. Is it just me?&lt;/p&gt;
&lt;p&gt;I need to eliminate this somehow. One piece of online advice is to add this to the prompt:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;flat vector illustration, solid single-color background, no texture, no gradient, no grain, clean edges, minimal icon style&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I&#39;ll try it out just to see whether not stating the obvious is the issue here:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/10.webp&quot; width=&quot;191&quot; height=&quot;305&quot; loading=&quot;lazy&quot; alt=&quot;bah&quot;&gt;
  &lt;figcaption&gt;bah&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;It&#39;s definitely better, but not good enough. We&#39;ll need some explanation for this.&lt;/p&gt;
&lt;h2&gt;Quality&lt;/h2&gt;
&lt;p&gt;The next step is to choose a layout. But wait, what&#39;s up with these strange icons?&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/11.webp&quot; width=&quot;125&quot; height=&quot;113&quot; loading=&quot;lazy&quot; alt=&quot;Close-up of a malformed AI-generated git branch icon on an orange circle&quot;&gt;
&lt;/figure&gt;
&lt;h3&gt;Latent representation&lt;/h3&gt;
&lt;p&gt;Modern image generation services use iterative generative processes involving latent or other internal representations. The exact architecture and process depends on the model.&lt;/p&gt;
&lt;p&gt;Imagine you have a big box of LEGO bricks, all mixed up. Before you build a car, you have a picture of it in your head, not the placement of every brick, just the idea of it: it has 4 wheels, doors, front bumper. The idea itself is enough to build the whole thing.&lt;/p&gt;
&lt;p&gt;A computer does the same trick. Think of a latent representation as a compressed internal representation of information relevant to the model&#39;s task. It isn&#39;t literally a list of features, it&#39;s just a useful analogy for understanding the concept.&lt;/p&gt;
&lt;p&gt;Now let&#39;s compare how well can Claude generate images ... an easy one:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Generate an image of a sheep and a dog!&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/12.webp&quot; width=&quot;744&quot; height=&quot;305&quot; loading=&quot;lazy&quot; alt=&quot;Claude Fable 5.1 High vs GPT-5.6&quot;&gt;
  &lt;figcaption&gt;Claude Fable 5.1 High vs GPT-5.6&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Well the choice really comes down to the audience you&#39;re trying to reach, right marketers?&lt;/p&gt;
&lt;p&gt;Claude is trying to code itself out of the situation, notice it&#39;s generating an SVG file.&lt;/p&gt;
&lt;p&gt;An SVG is a special kind of drawing that never gets blurry. That&#39;s because instead of saving the picture as lots of pixels, it saves it as instructions, like &amp;quot;draw a big circle here for the head, two on top for the ears.&amp;quot; I&#39;m not lying, and I can prove it to you:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/13.webp&quot; width=&quot;744&quot; height=&quot;305&quot; loading=&quot;lazy&quot; alt=&quot;Magnified SVG vs PNG image&quot;&gt;
  &lt;figcaption&gt;Magnified SVG vs PNG image&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;We&#39;ll see why this is important later on, not the sheep, the SVG format :)&lt;/p&gt;
&lt;p&gt;A good idea would be to give ChatGPT a set of fixed bricks, like fonts, icons, or other images, and let it play around with them.&lt;/p&gt;
&lt;h3&gt;&amp;quot;Being more specific&amp;quot;&lt;/h3&gt;
&lt;p&gt;The standard advice is that your prompt isn&#39;t specific enough.&lt;/p&gt;
&lt;p&gt;I&#39;ve chosen version E because it&#39;s the one that gives us a big headache later. It has some image artifacts I want to preserve.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Onward, then, to the battle GPT! Let&#39;s go forward with option E!&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;So let&#39;s apply some really easy fixes: we&#39;ll give it a few bricks to outsmart this thing, and get some design rules out of it that we can set in stone for later use:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-text&quot;&gt;Use option E applying the following steps:
- choose an open-source font for the text
- choose an open-source icon font
- define a symmetric 4:5 ratio grid layout and use that to align the contents
- display the choices as text
- export the design system into a JSON file for later use
- generate the image
&lt;/code&gt;&lt;/pre&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/14.webp&quot; width=&quot;800&quot; height=&quot;1000&quot; loading=&quot;lazy&quot; alt=&quot;Somewhere a brand manager just got goosebumps.&quot;&gt;
  &lt;figcaption&gt;Somewhere a brand manager just got goosebumps.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Ok, well... I could live with this... But if you zoom in now, the bottom icons and backgrounds are still noisy, full of visual artifacts. This is how it looks after playing around with the saturation:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/15.webp&quot; width=&quot;1122&quot; height=&quot;1402&quot; loading=&quot;lazy&quot; alt=&quot;Image models generate in a compressed internal representation and only decode it to pixels at the end. Flat areas are a weak spot of that decoding step :&amp;#x27;(&quot;&gt;
  &lt;figcaption&gt;Image models generate in a compressed internal representation and only decode it to pixels at the end. Flat areas are a weak spot of that decoding step :&amp;#x27;(&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;You iterate on the design, and even though you instructed it to use the open-source icon set, you still get these strange icons back after a while. The drift is there again:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/16.webp&quot; width=&quot;312&quot; height=&quot;117&quot; loading=&quot;lazy&quot; alt=&quot;Happier eh? ... They look like three guys staring at me, wondering what on earth I&amp;#x27;m up to. They&amp;#x27;re right, though.&quot;&gt;
  &lt;figcaption&gt;Happier eh? ... They look like three guys staring at me, wondering what on earth I&amp;#x27;m up to. They&amp;#x27;re right, though.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;The background and the images are good enough, however it&#39;s like we&#39;re constantly drifting away with every prompt.&lt;/p&gt;
&lt;p&gt;As mentioned before, when an image is modified the model is not operating like Photoshop, its goal is not to preserve every pixel. Instead, depending on the model and the request, parts of the image may be regenerated or altered.&lt;/p&gt;
&lt;p&gt;From the output provided it seems the model does a good job on illustration but the text and icons don&#39;t look that good. These image models can use supplied references, but it&#39;s clear that exact preservation is not guaranteed.&lt;/p&gt;
&lt;p&gt;So what&#39;s the solution, do we need another tool ???&lt;/p&gt;
&lt;h2&gt;Solution&lt;/h2&gt;
&lt;p&gt;A solution would be to preserve a good state, generate the image assets (backgrounds or any other objects), and then convert them into something that&#39;s easy to edit in a lossless way, so we get the best of both worlds:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-text&quot;&gt;Use option E, applying the following steps:
- Define a symmetric 4:5 ratio grid layout and use it to align the contents.
- Generate the image (background, mountain, flag) without text as a transparent PNG file.
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We review the image:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/17.webp&quot; width=&quot;1122&quot; height=&quot;1402&quot; loading=&quot;lazy&quot; alt=&quot;Option E generated after modification requests&quot;&gt;
  &lt;figcaption&gt;Option E generated after modification requests&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Now I could prompt it to change the text or fix the alignment of the elements, but instead I&#39;ll focus on the parts I want preserved. This is a small rescue mission: keep the mountain with the little flag on top and make the background area transparent. So we ask it to dump the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-text&quot;&gt;Use the generated option E image, applying the following steps:
- Generate the image (background, mountain, flag) without text as a transparent PNG file.
- Choose an open-source font for the text.
- Choose an open-source icon font.
- Export the design system to a JSON file for later use.
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We have the design decisions as a structured text (JSON) file and the background image at hand.&lt;/p&gt;
&lt;p&gt;Now you could continue the process with ChatGPT, but I found that Claude is way better at writing code. Upload the two files to Claude or Claude Design and kick it off with this prompt:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-text&quot;&gt;Use the generated image as a basis for transforming its contents into an HTML file by following these steps:
- Keep the layout, aspect ratio, text alignment, and font styling and sizes. Make sure the default background color is set and the background image is fully visible.
- Use the generated JSON design system file and download the font packages.
- Make sure to embed every asset: the transparent PNG background image and the fonts.
- Use the specified icon font as the authoritative source for every icon. Do not redraw, approximate, reinterpret, or invent icon shapes.
- Do not redraw or come up with new parts to illustrate.
- Verify the HTML file for correctness before posting it.
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Why HTML? Because the tooling for it is so much better in Claude, and it&#39;s faster to iterate on. After a few comments, I reached this point:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/18.webp&quot; width=&quot;1080&quot; height=&quot;1350&quot; loading=&quot;lazy&quot; alt=&quot;&amp;quot;Final&amp;quot; output generated by Claude&quot;&gt;
  &lt;figcaption&gt;&amp;quot;Final&amp;quot; output generated by Claude&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;It&#39;s not perfect, but it&#39;s diverse and readable. Now I need a way to take it over from the LLM.&lt;/p&gt;
&lt;h2&gt;The takeover&lt;/h2&gt;
&lt;p&gt;You can use Claude Design to get better control over the output, or you can request conversion to an SVG file directly. After that, you can continue editing the file with an editor.&lt;/p&gt;
&lt;p&gt;SVG files can then be imported into vector-graphics editors like Adobe Illustrator and Inkscape. Don&#39;t forget to install the same fonts locally before importing, like I forgot to :D&lt;/p&gt;
&lt;p&gt;I&#39;ve fooled around with the layout a little bit in the editor just to demonstrate that this works:&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/19.webp&quot; width=&quot;640&quot; height=&quot;400&quot; loading=&quot;lazy&quot; alt=&quot;The infographic with the mountain, opened as an SVG in Inkscape&quot;&gt;
&lt;/figure&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://aron.ws/assets/blog/export-png-for-linkedin/20.webp&quot; width=&quot;640&quot; height=&quot;400&quot; loading=&quot;lazy&quot; alt=&quot;Editing in Inkscape&quot;&gt;
  &lt;figcaption&gt;Editing in Inkscape&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;This is still far from a professionally designed material, but it&#39;s better than what we started from, and at this point you can start working on making it even better.&lt;/p&gt;
&lt;p&gt;The secret ingredient that will make this better is probably ... YOU!&lt;/p&gt;
&lt;p&gt;I hope this helps!&lt;/p&gt;
</content>
  </entry>
</feed>