<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Simon Siegenthaler</title>
    <description>The latest articles on DEV Community by Simon Siegenthaler (@cueqzapper).</description>
    <link>https://dev.to/cueqzapper</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4076377%2F050da063-e8da-4c21-b328-8ddc2d342841.jpg</url>
      <title>DEV Community: Simon Siegenthaler</title>
      <link>https://dev.to/cueqzapper</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/cueqzapper"/>
    <language>en</language>
    <item>
      <title>I built an MCP workflow where AI-made designs stay editable</title>
      <dc:creator>Simon Siegenthaler</dc:creator>
      <pubDate>Thu, 13 Aug 2026 13:14:14 +0000</pubDate>
      <link>https://dev.to/cueqzapper/i-built-an-mcp-workflow-where-ai-made-designs-stay-editable-2513</link>
      <guid>https://dev.to/cueqzapper/i-built-an-mcp-workflow-where-ai-made-designs-stay-editable-2513</guid>
      <description>&lt;p&gt;Most visual tools give an AI agent a single useful action: generate an image.&lt;/p&gt;

&lt;p&gt;That works until the image is almost right.&lt;/p&gt;

&lt;p&gt;The headline has one wrong word. The product crop needs to move 20 pixels. The CTA is behind the subject. If the result is a flat PNG, the agent has no real objects to change. It has to regenerate the whole thing and hope the next version is better.&lt;/p&gt;

&lt;p&gt;I've spent the last three years building &lt;a href="https://picorn.com/mcp?utm_source=devto&amp;amp;utm_medium=organic_showcase&amp;amp;utm_campaign=mcp_showcase_2026_08&amp;amp;utm_content=editable_design_architecture" rel="noopener noreferrer"&gt;Picorn&lt;/a&gt;, and this became the main design constraint for its MCP: &lt;strong&gt;the agent should create a document, not a dead-end picture.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What the agent needs back
&lt;/h2&gt;

&lt;p&gt;For a social post, the useful output isn't just a render. It is a small object model:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a background&lt;/li&gt;
&lt;li&gt;a transparent product image&lt;/li&gt;
&lt;li&gt;a headline text layer&lt;/li&gt;
&lt;li&gt;a CTA text or shape layer&lt;/li&gt;
&lt;li&gt;explicit stacking order and positions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each object needs a stable ID. The agent can then say “move the product behind the headline” or “change only the CTA” and address the same object again.&lt;/p&gt;

&lt;p&gt;The render is still important, but it becomes a preview of the document rather than the source of truth.&lt;/p&gt;

&lt;h2&gt;
  
  
  The workflow I ended up with
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Claude, Cursor or Codex receives the campaign brief.&lt;/li&gt;
&lt;li&gt;It calls Picorn through MCP and creates a project with real layers.&lt;/li&gt;
&lt;li&gt;It renders a preview to inspect the composition.&lt;/li&gt;
&lt;li&gt;The same project opens in a browser editor.&lt;/li&gt;
&lt;li&gt;A person can change the crop, text, colour, order or spacing without starting over.&lt;/li&gt;
&lt;li&gt;Publishing and scheduling stay behind an explicit approval step.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That last step matters. An agent can prepare a campaign, but a generated result shouldn't silently appear on a connected social account.&lt;/p&gt;

&lt;p&gt;A prompt I use to test the boundary looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Create a 1080x1080 product post.
Keep four named layers: background, product PNG,
headline and CTA. Do not rasterize the text.
Put the product behind the headline, render a preview,
and return the editable project URL.
Do not publish anything.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a much better test than “make a beautiful Instagram post.” It checks whether the connector exposes actual editing primitives or simply relays another image-generation prompt.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I exposed small tools
&lt;/h2&gt;

&lt;p&gt;Picorn's public MCP currently exposes 30 tools. They cover projects, text, images, SVG and shape layers, grouping, alignment, ordering, video timelines, rendering and project handoff.&lt;/p&gt;

&lt;p&gt;A single &lt;code&gt;make_campaign&lt;/code&gt; tool would be easier to demo. It would also hide the structure the agent needs when the first result isn't correct.&lt;/p&gt;

&lt;p&gt;Small tools let the model inspect and repair one part of the document. The tradeoff is that the tool descriptions and IDs must be consistent. If the agent can't understand what already exists, more tools only create more ways to fail.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keeping the approval boundary clear
&lt;/h2&gt;

&lt;p&gt;The browser editor is not a fallback for when the AI fails. It is part of the workflow.&lt;/p&gt;

&lt;p&gt;Generation is good at getting from a blank page to a plausible direction. A person is still better at judging whether the product is too small, whether the claim is honest and whether the design actually fits the brand.&lt;/p&gt;

&lt;p&gt;So the useful loop is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brief -&amp;gt; structured draft -&amp;gt; render -&amp;gt; human correction -&amp;gt; approval -&amp;gt; publish
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Not:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brief -&amp;gt; generated image -&amp;gt; automatic post
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Trying the MCP
&lt;/h2&gt;

&lt;p&gt;The endpoint uses Streamable HTTP and doesn't require an API key.&lt;/p&gt;

&lt;p&gt;Claude Code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;claude mcp add &lt;span class="nt"&gt;--transport&lt;/span&gt; http picorn https://picorn.com/mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Codex:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;codex mcp add picorn &lt;span class="nt"&gt;--url&lt;/span&gt; https://picorn.com/mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Cursor:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"picorn"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"https://picorn.com/mcp"&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Full disclosure: I build Picorn. The public MCP is free to try. It still needs a manual art-direction pass for many real product layouts, and Picorn isn't yet the right fit for complex enterprise approval chains. I'm most interested in examples where the document/edit loop breaks after a seemingly successful first render.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;AI disclosure: I used an AI assistant to help edit this article and verify the setup snippets. I reviewed the final text and every product claim.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>showdev</category>
      <category>mcp</category>
      <category>ai</category>
    </item>
  </channel>
</rss>
