Chapter 7: Building user interfaces with ChatGPT
The chapter introduces AI-assisted UI design as a way to turn a working backend into a usable application and explains why chat-based tools can help plan the frontend.
After this chapter you will be able to
- AI-assisted interface design. Explain how generative AI can help a developer turn a working backend into an easy-to-use interface, even without deep frontend expertise.
- Chat-based frontend strategy. Explain why a chat-based AI tool can be used to ask for a general frontend approach despite having limited access to the application’s code.
- Prompt detail for task scope. Distinguish when a brief prompt is useful from when a detailed prompt is useful, using the section’s coding and frontend-design examples.
- Context-rich UI design brief. Describe the information the example prompt gives the AI tools about the Flask quiz application and why those details help shape the requested result.
- Suggested frontend steps. Describe the frontend steps the author takes from ChatGPT’s response: create an HTML Jinja template, implement routing, and implement redirects.
- Filtering ChatGPT’s plan. Explain why the author sets aside most of ChatGPT’s response despite finding it useful: much of it addresses backend work that is already complete, and SQLAlchemy is more than this project needs.
- Gemini quiz interface flow. Describe how Gemini proposes using a Flask template, forms, and routes to display questions and handle submitted answers.
- Blackbox quiz frontend proposal. Describe the quiz flow Blackbox AI proposed and why the author chose to start with its response. Distinguish the proposed code from an implementation the author has already completed.
- Specific UI prompt refinement. Explain how the author would refine a prompt when AI output is not geared toward the desired frontend design, using the quiz example and the section’s prompt-writing advice.
- Dynamic Flask template composition. Explain how Flask templates use HTML placeholders for dynamic content and how a base page and smaller templates combine into a page.
- Quiz templates and existing layout. Describe what the quiz and results templates provide, and explain why the AI-suggested base.html is replaced by the existing index.html.
- Practice test user flow. Trace the paths a user can take from the entry page through the questions to the results page and back home.
- AI-assisted flowchart creation. Describe how the author turns a rough description of the application flow into a visual flowchart using ChatGPT and Mermaid.
- Contextual UI design prompt. Explain how the author prompts ChatGPT for layout concepts, including the existing UI description, the quiz’s requirements, and the needs of beginner users.
- Quiz page wireframes. Explain what the generated wireframes show and how they represent the entry, repeated question, and results pages.
- Shared Flask page layout. Explain why the application puts its shared header, footer, and page structure in index.html while changing the inner content for each route.
- Wireframe-based HTML drafting. Describe how the author prompts ChatGPT for interface pieces from the wireframes and incorporates the resulting HTML and CSS into the Flask templates.
- From design ideas to wireframes. Explain how the team moved from broad design ideas to a workflow diagram and wireframes before asking for implementation code, and why prompt phrasing mattered.
- Generated code and developer refinement. Describe how AI-generated HTML and CSS became the final Flask-based interface, and explain the developer’s role in that process.
What it builds on
- Creating an index page (chapter 6) · The application has backend functionality that needs a usable interface.
- Defining roles in prompts (chapter 3) · The earlier use of roles in prompts.
- Creating an end session function that ends the test (chapter 6) · The application already has a way to end a test.
- Creating the right prompt (chapter 3) · Providing relevant context when prompting ChatGPT.
Section by section
Introduction
The chapter introduces AI-assisted UI design as a way to turn a working backend into a usable application and explains why chat-based tools can help plan the frontend.
- AI-assisted interface design: Explain how generative AI can help a developer turn a working backend into an easy-to-use interface, even without deep frontend expertise.
Why it matters: AI can help you make the backend useful to people without requiring you to be a UI specialist. - Chat-based frontend strategy: Explain why a chat-based AI tool can be used to ask for a general frontend approach despite having limited access to the application’s code.
Why it matters: Choosing a planning tool means matching the context it can access to the question you need answered.
Key terms: generative AI tools, best practices, templates, design patterns, smart customization, chat-based interfaces, general approach, context, limited access to our code
7.1 Getting our strategy from our AI tools
The section explains how to write a detailed prompt to get useful AI guidance for a Flask quiz interface.
- Prompt detail for task scope: Distinguish when a brief prompt is useful from when a detailed prompt is useful, using the section’s coding and frontend-design examples.
Why it matters: Matching prompt detail to the task helps you get guidance you can use. - Context-rich UI design brief: Describe the information the example prompt gives the AI tools about the Flask quiz application and why those details help shape the requested result.
Why it matters: Giving an AI tool the application’s actual constraints and workflow makes its UI suggestions more relevant.
Key terms: brief prompts, detailed prompts, role, objective, details, data, functionality requirements, code production
7.1.1 ChatGPT Results
The section reviews ChatGPT’s proposed quiz-app plan and keeps the frontend steps that fit a project whose backend is already complete.
- Suggested frontend steps: Describe the frontend steps the author takes from ChatGPT’s response: create an HTML Jinja template, implement routing, and implement redirects.
Why it matters: These are the parts of ChatGPT’s plan the author can use for the UI work. - Filtering ChatGPT’s plan: Explain why the author sets aside most of ChatGPT’s response despite finding it useful: much of it addresses backend work that is already complete, and SQLAlchemy is more than this project needs.
Why it matters: The response is most useful when its suggestions are selected for this project rather than followed wholesale.
Key terms: Jinja template, routing, redirects, backend, SQLAlchemy, frontend setup
7.1.2 Gemini Results
This section reviews Gemini’s proposed Flask quiz interface and identifies what would need to be adapted to the existing backend.
- Gemini quiz interface flow: Describe how Gemini proposes using a Flask template, forms, and routes to display questions and handle submitted answers.
Why it matters: It gives you a way to discuss the proposed interface without mistaking the example for a complete implementation. - Flask-WTF and backend fit: Explain why Gemini suggests Flask-WTF and why its example still needs adaptation to this project.
Why it matters: It helps you evaluate the suggestion as a useful starting point rather than ready-to-run project code.
Key terms: Flask templates, quiz.html, quiz route, answer route, AnswerForm, Flask-WTF, WTForms, existing backend, database logic
7.1.3 Blackbox AI results
The section evaluates Blackbox AI’s proposed quiz frontend and shows how a more specific prompt can steer AI-generated UI suggestions.
- Blackbox quiz frontend proposal: Describe the quiz flow Blackbox AI proposed and why the author chose to start with its response. Distinguish the proposed code from an implementation the author has already completed.
Why it matters: The proposal gives the author a starting point for building the quiz interface around the existing backend. - Specific UI prompt refinement: Explain how the author would refine a prompt when AI output is not geared toward the desired frontend design, using the quiz example and the section’s prompt-writing advice.
Why it matters: Clearer constraints give an AI tool a better chance of producing the kind of interface the developer wants.
Key terms: Flask’s routing system, quiz route, results route, templates, store_answer, objective, prompt refinement, specific examples, active verbs
7.2 Creating our templates
This section explains how Flask templates assemble dynamic quiz pages, adapts AI-suggested templates to an existing index page, and outlines where AI tools can help in UI design.
- Dynamic Flask template composition: Explain how Flask templates use HTML placeholders for dynamic content and how a base page and smaller templates combine into a page.
Why it matters: This explains why the UI can share a layout while displaying question-specific content. - Quiz templates and existing layout: Describe what the quiz and results templates provide, and explain why the AI-suggested base.html is replaced by the existing index.html.
Why it matters: AI-generated suggestions need to be fitted to the application's existing files rather than adopted unchanged. - AI support across UI design: Describe how the section suggests using different AI tools at different stages of UI design rather than asking for implementation code immediately.
Why it matters: Choosing an AI request suited to the design stage can provide useful guidance before implementation.
Key terms: Flask templates, placeholders, base html, Jinja2 template engine, quiz.html, results.html, base.html, index.html, extends statements, early conceptualization
7.3 Describing the flow of our application
The section maps the practice-test user flow, uses ChatGPT to turn it into a diagram and a written description, and emphasizes reviewing AI-generated design materials.
- Practice test user flow: Trace the paths a user can take from the entry page through the questions to the results page and back home.
Why it matters: A clear account of the user’s paths provides a basis for evaluating and improving the interface. - AI-assisted flowchart creation: Describe how the author turns a rough description of the application flow into a visual flowchart using ChatGPT and Mermaid.
Why it matters: This gives developers a quick way to make an application flow visible without drawing it by hand. - Flow documentation and review: Explain why the author asked ChatGPT for a written flow description after making the chart and why that output still needs human refinement.
Why it matters: The document can help communicate the intended experience while leaving room for a designer’s judgment.
Key terms: entry page, Submit Answer, End Test, Results Page, Return Home, ChatGPT, Mermaid, Excalidraw, flowchart, accompanying document
7.3.1 Creating an overall design
The section uses a context-rich ChatGPT prompt to turn the quiz’s UI requirements into design guidance and wireframes for its three main pages.
- Contextual UI design prompt: Explain how the author prompts ChatGPT for layout concepts, including the existing UI description, the quiz’s requirements, and the needs of beginner users.
Why it matters: The prompt gives ChatGPT both the application context and the usability constraints that shape its suggestions. - Page design guidance: Describe the design guidance ChatGPT returned for the entry, question, and results pages, and the consistent visual rules tying them together.
Why it matters: These guidelines make the separate quiz screens feel coherent and easy to use. - Quiz page wireframes: Explain what the generated wireframes show and how they represent the entry, repeated question, and results pages.
Why it matters: The wireframes give developers a concrete layout to follow without treating the design as finished artwork.
Key terms: prompt, context, UI Description, beginner users, style guide, entry page, question pages, results page, consistent elements, wireframes
7.3.2 Drafting HTML based on our wireframes
The section shows how to turn wireframes into a Flask interface by using ChatGPT to draft HTML and CSS for shared layout elements and individual pages.
- Shared Flask page layout: Explain why the application puts its shared header, footer, and page structure in index.html while changing the inner content for each route.
Why it matters: This layout lets you change shared interface elements in one place. - Wireframe-based HTML drafting: Describe how the author prompts ChatGPT for interface pieces from the wireframes and incorporates the resulting HTML and CSS into the Flask templates.
Why it matters: Breaking the wireframes into shared and page-specific pieces makes the generated code easier to place and refine. - HTML-only prompting choice: Explain why the author asks ChatGPT for HTML suggestions rather than Flask templates, and what kind of output the author expects.
Why it matters: You can tailor an AI request to the context you have supplied and the integration work you prefer to do yourself.
Key terms: index.html, header, footer, content block, route, wireframes, content wrapper, inner HTML, CSS, Flask templates
7.3.3 The final UI for our application
The section recaps how AI-assisted planning and generated code led to the application’s finished user interface.
- From design ideas to wireframes: Explain how the team moved from broad design ideas to a workflow diagram and wireframes before asking for implementation code, and why prompt phrasing mattered.
Why it matters: Visualizing the flow first gave the team a clearer basis for requesting and building the interface. - Generated code and developer refinement: Describe how AI-generated HTML and CSS became the final Flask-based interface, and explain the developer’s role in that process.
Why it matters: The example shows how generated UI code can save time while leaving developers responsible for fitting and refining it.
Key terms: prompts, Mermaid flowcharts, wireframes, user flows, HTML, CSS, Flask templates, design partner
7.4 Summary
Where this is used later
- Prompt engineering principles (chapter 9) · This example provides a concrete case for later prompt-engineering principles.
Concepts explained in this chapter
- wireframeA wireframe is a schematic interface layout that shows the structure and placement of content and controls without final visual styling.
- promptA prompt is natural-language input that instructs a generative artificial-intelligence system what response or result to produce.
- ChatGPTChatGPT is a conversational generative-artificial-intelligence service that generates text and code in response to user prompts.
- quiz systemA quiz system is an application that presents questions, accepts answers, and manages assessment interactions and results.
- flowchartA flowchart is a diagram that represents a process or algorithm as connected steps and decision points.
- content blockA content block is a named region in a template that child content can fill or override.
- validationValidation is the checking of input or application state against expected rules and constraints.
- ExcalidrawA browser-based tool for creating and editing hand-drawn-style diagrams.
- MermaidJSMermaid is a text-based diagramming tool that generates diagrams from a declarative syntax.
- natural language processingNatural language processing is the computational analysis and generation of human language, including interpreting text and producing meaningful language-related outputs.
- multiple-choice formatA multiple-choice format presents a question with several provided answers from which a respondent selects one or more responses.
- style guideA style guide is a set of rules and guidance governing the visual and interaction design of an application or product.
- code generationCode generation is the automated production of source code from natural-language instructions, existing code, or other structured input.
- role promptingA prompting technique that instructs an artificial-intelligence model to respond from a specified professional role or perspective.
- template layoutA reusable page structure that keeps common outer elements stable while replacing an inner region with page-specific content.
- prompt engineeringPrompt engineering is the systematic design and refinement of instructions and context provided to an AI system to elicit desired outputs.
- JinjaJinja2 is a Python templating engine that renders text or HTML from templates containing expressions and control directives.
- web formAn HTML form is a browser interface element that groups controls for collecting and submitting user input.
- testA test case is a defined input, execution condition, and expected result used to evaluate software behavior.
← Chapter 6: Generating a software backend with Tabnine
Chapter 8: Building effective tests with generative AI →
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.