This content originally appeared on Level Up Coding – Medium and was authored by Dr. Ameer Hamza Mahmood
The Big Idea
What if you could describe an app in plain English — and within minutes, you’d get a working prototype complete with UI design and running code?
That’s the dream of “Prompt-to-App” systems. In this project, I combined Figma API, Streamlit, and OpenAI GPT-4 to build an AI system that takes a natural language prompt, automatically designs a Figma layout, and then generates a functional Streamlit app — all end-to-end.
This approach bridges design and development. It’s not just automation — it’s collaboration between design language and code.
The Tech Stack
- Python 3.11+
- OpenAI GPT-4 API (for UI and logic generation)
- Figma API (for design export and layout parsing)
- Streamlit (for front-end app generation)
- Requests / JSON (for API calls)
- LangChain (for prompt chaining)
- YAML / TOML (for storing component blueprints)
Step 1: The Concept — From Prompt to Layout
We start by asking the user something like:
“Design a personal finance dashboard with income charts, spending categories, and savings goals.”
Our system will break that into structured requirements:
- Identify components (charts, cards, buttons, tables)
- Define layout hierarchy
- Output a JSON-based Figma schema
Step 2: Generate Layout Blueprint with GPT
import openai
import json
openai.api_key = "YOUR_OPENAI_KEY"
def generate_layout(prompt):
system_prompt = """
You are a UI designer. Convert the user's app idea into a structured JSON layout schema.
Include: component type, label, position, and properties.
"""
response = openai.ChatCompletion.create(
model="gpt-4-turbo",
messages=[
{"role": "system", "content": system_prompt},
{"role": "user", "content": prompt}
]
)
layout = response.choices[0].message["content"]
return json.loads(layout)
Example Output:
{
"app_title": "Personal Finance Dashboard",
"components": [
{"type": "chart", "title": "Income Over Time"},
{"type": "pie_chart", "title": "Spending Breakdown"},
{"type": "card", "title": "Savings Goal Tracker"}
]
}
Step 3: Generate a Figma Design Automatically
You can create and populate a Figma file using their REST API.
import requests
def create_figma_design(layout_json, figma_token):
headers = {"X-Figma-Token": figma_token}
project_id = "YOUR_FIGMA_PROJECT_ID"
url = f"https://api.figma.com/v1/files/{project_id}/components"
payload = {
"name": layout_json["app_title"],
"components": layout_json["components"]
}
response = requests.post(url, headers=headers, json=payload)
return response.json()
This doesn’t give you visuals directly but provides design metadata that you can import or render into Figma templates.
You can also use Figma Plugin API to convert this schema into real shapes and layers.
Step 4: Convert Layout → Streamlit App
We now use a simple mapper that takes our layout JSON and builds Streamlit components dynamically.
import streamlit as st
def render_streamlit_app(layout):
st.title(layout["app_title"])
for comp in layout["components"]:
if comp["type"] == "chart":
st.line_chart([10, 20, 15, 30])
elif comp["type"] == "pie_chart":
st.bar_chart({"Spending": [300, 150, 400]})
elif comp["type"] == "card":
st.metric(label=comp["title"], value="Goal: 70% Achieved")
if __name__ == "__main__":
with open("layout.json") as f:
layout = json.load(f)
render_streamlit_app(layout)
Run this with:
streamlit run ai_app_designer.py
You’ll get a fully functional interactive app matching your description — no manual coding of UI.
Step 5: Add Iterative Refinement
The system should learn and improve designs via feedback loops:
- Ask GPT-4: “Rate this layout on usability (1–10). Suggest improvements.”
- Use LangChain to chain refinement loops.
from langchain import OpenAI, LLMChain, PromptTemplate
template = PromptTemplate(
input_variables=["layout"],
template="Evaluate this layout for usability and aesthetics:\n{layout}\nSuggest improvements."
)
chain = LLMChain(llm=OpenAI(model="gpt-4-turbo"), prompt=template)
feedback = chain.run(layout=json.dumps(layout))
print(feedback)
You can then automatically update your design schema and re-render.
Step 6: Bonus — Generate Code Components
Use GPT-4 to translate layout elements into real Python functions.
def generate_component_code(layout):
response = openai.ChatCompletion.create(
model="gpt-4-turbo",
messages=[
{"role": "system", "content": "Generate Streamlit code for each layout component."},
{"role": "user", "content": json.dumps(layout)}
]
)
return response.choices[0].message["content"]
This produces code snippets like:
st.header("Spending Breakdown")
st.bar_chart(data)You can automatically insert this into your main Streamlit app.
Step 7: Automate the Entire Workflow
You can orchestrate the full pipeline using Airflow or Prefect:
- Get user prompt
- Generate layout (GPT)
- Create Figma mockup
- Generate and run Streamlit app
- Ask for user feedback
- Retrain / improve layout nightly
Example Output
User prompt:
“Design a stock-tracking dashboard that shows portfolio value, recent trades, and news.”
Generated app:
- Title: “My Stock Dashboard”
- Line chart for portfolio value
- Table for recent trades
- Text area with live news fetched via API
Real-World Extensions
This kind of AI-assisted rapid prototyping can be applied to:
- UX/UI design automation
- Internal dashboards for businesses
- Data-driven visualization tools
- Low-code platforms and startup MVPs
You could even integrate Whisper (voice input) → “Describe your app idea” → full working prototype.
Why It’s Revolutionary
This is a genuine glimpse into next-gen development — where:
- AI interprets intent
- UI/UX auto-generates dynamically
- Developers act as curators, not coders
We’re moving from “writing code” to “describing outcomes”, and this project makes that future tangible.
From Prompt to Prototype I Built an AI That Designs Full Apps Using Figma + Streamlit was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding – Medium and was authored by Dr. Ameer Hamza Mahmood