I was writing a Software Design Review and needed to include some UI examples. Our designer wasn't available and I had zero Figma skills.
I'd already made all the technical diagrams in Mermaid, so I thought: why not do the wireframes the same way? Turns out Mermaid doesn't support wireframes. There's a GitHub issue requesting it with no resolution, some projects tried it but seem discontinued (e.g. imageui).
So I built it for myself. Intentionally sketchy — meant to communicate intent, not replace a designer.
My actual workflow:
1. Screenshot a layout I want to reference (internal tool, Pinterest, whatever)
2. Feed it to an LLM to translate into Sketchdown syntax
3. Paste into the editor and tweak until it says what I mean
I'd already made all the technical diagrams in Mermaid, so I thought: why not do the wireframes the same way? Turns out Mermaid doesn't support wireframes. There's a GitHub issue requesting it with no resolution, some projects tried it but seem discontinued (e.g. imageui).
So I built it for myself. Intentionally sketchy — meant to communicate intent, not replace a designer.
My actual workflow: 1. Screenshot a layout I want to reference (internal tool, Pinterest, whatever) 2. Feed it to an LLM to translate into Sketchdown syntax 3. Paste into the editor and tweak until it says what I mean
Happy to iterate if anyone finds it useful.
https://www.sketchdown.dev