0

Most powerful LLMs these days (ChatGPT, Bard) cannot generate images as output, only textual output.

Is there an AI tool that generates textual output (or code) that can be put into another app that then generates GUI drafts (wireframes) from that text?

I have had success with generating PlantUML code in Bard-AI. But that was not for Wireframes but for sequence diagrams.

I gave it this prompt: USER:


you are a software architect and visualisation professional.

generate a declarative diagram in the d2 language that shows the  workflow 
Dockerfile to DockerRegistry. Draw about 5 steps,  
from Dockerfile -> Build image -> tag image -> register -> download

Bard AI:

Sure, here is the declarative diagram in D2 language 
that shows the workflow Dockerfile to DockerRegistry:

@startuml

title Dockerfile to DockerRegistry workflow

actor Developer
participant Dockerfile
participant BuildImage
participant TagImage
participant RegisterImage
participant DownloadImage

Developer -> Dockerfile: Create Dockerfile
Dockerfile -> BuildImage: Build image
BuildImage -> TagImage: Tag image
TagImage -> RegisterImage: Register image
RegisterImage -> DownloadImage: Download image

@enduml

This can be pasted into a PlantUML tool which then creates a simple sequence diagram.

However I want a prompt/tool combination for GUI wireframes, and that is not a "diagram type" that PlantUML supports (well).

Improve this question

1 Answer 1

Reset to default
1

It took a few tries, but I got ChatGPT to generate the following SVG:

<svg width="320" height="180" xmlns="http://www.w3.org/2000/svg">
  <!-- Text Field -->
  <rect x="40" y="30" width="240" height="40" rx="5" ry="5" style="fill:white;stroke:black;stroke-width:2;" />
  <text x="50" y="52" font-family="Arial" font-size="16" fill="black">Enter your search here</text>
  
  <!-- Search Button -->
  <rect x="40" y="90" width="120" height="40" rx="5" ry="5" style="fill:#4CAF50;stroke:black;stroke-width:2;" />
  <text x="63" y="112" font-family="Arial" font-size="16" fill="white">Search</text>
  
  <!-- I'm Feeling Lucky Button -->
  <rect x="160" y="90" width="120" height="40" rx="5" ry="5" style="fill:#4285F4;stroke:black;stroke-width:2;" />
  <text x="175" y="112" font-family="Arial" font-size="14" fill="white">I'm feeling lucky</text>
</svg>

Rendered SVG

Starting simply with the prompt

Generate SVG of a graphical user interface. The interface consists of a text field in the middle, and two buttons below it. The buttons are labeled "Search" and "I'm feeling lucky".

and then refining a few times when the output was not as expected (adjusting sizes etc.)

Any browser can open svg files, that's why I chose to do it with SVGs.

Improve this answer
3
  • I like your example, I did something like that as well, but I had less convincing results, and I didn't bother to work out a series of refinement prompts.
    – knb
    Jul 26 at 10:05
  • 1
    @knb The refinement prompts were also simple things, this is how I arrived at what you see: " The text field and buttons are too small to fit the caption, resize them to fit the captions.", "The I'm feeling lucky button is partly outside the svg area, increase that. Also the text field should be aligned on the left with the first button, and on the right with the second button.", "Both buttons should be below the text area.". I am satisfied but wondered, especially for more complex stuff, at what point it would be easier to directly edit the generated code than formulate a prompt.
    – kutschkem
    Jul 26 at 10:09
  • good. still await for llm's with <audio> <video> <image> outputs.
    – nexoma
    Aug 22 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.