This article is part of the Prompt Driven Development series from the VS Code YouTube channel. It is based on the video Build a Responsive UI through Prompt Driven Development and explains the concepts, tools, and workflows demonstrated when using GitHub Copilot to improve usability, responsiveness, and functionality in a web application.
🎥 Video Reference
Building a responsive user interface involves more than adjusting CSS breakpoints. It requires thinking about layout, navigation, accessibility, and interaction patterns across different screen sizes.
🏗️ Understanding the Application and Its Limitations
The application used in the video is a notes board web app that allows users to:
- Create notes with checklists
- Organize notes by categories
- Filter notes using a sidebar
While functional on desktop, the app presents several issues:
- The layout does not adapt well to smaller screens
- Navigation becomes difficult on mobile
- Search functionality is missing
- Developer tools are hard to use due to layout constraints
These limitations define the scope of improvements to be addressed using Prompt Driven Development.
📌 Five Key Learnings from the Video
1️⃣ Prompts Should Be Specific and Context Aware
One of the strongest lessons in this video is that effective prompts are short, specific, and contextual.
Rather than describing every possible change, the prompt focuses on:
- Improving mobile usability
- Adjusting layout for small screens
- Making buttons, forms, and text easier to interact with on touch devices
This clarity allows Copilot to generate relevant changes without unnecessary modifications.
2️⃣ Custom Chat Modes Enable Persistent Problem Solving
The workflow uses a custom chat mode called Beast Mode, designed to keep working until all tasks are completed.
In this mode, Copilot:
- Analyzes the application
- Creates a task list
- Executes changes incrementally
- Verifies results by running the local server
This demonstrates how custom chat modes can encode behavior, not just instructions, making complex UI changes more manageable.
3️⃣ Responsive Design Requires Coordinated Changes
Making the UI responsive is not limited to a single layer.
The video shows Copilot updating:
- HTML templates by adding or validating the viewport meta tag
- CSS with media queries and grid adjustments
- JavaScript to support layout and interaction changes
Prompt Driven Development helps coordinate these changes across files while preserving consistency.
4️⃣ Progressive Enhancement Improves Usability Across Devices
After improving the base responsive layout, the workflow introduces device specific navigation.
On mobile:
- The sidebar is replaced with a category dropdown
On desktop:
- The original sidebar remains available
Copilot applies conditional logic and styling so the interface adapts naturally based on screen size, improving usability without duplicating functionality.
5️⃣ Prompt Driven Development Goes Beyond UI Changes
The video demonstrates that Prompt Driven Development is not limited to layout improvements.
Additional enhancements include:
- Implementing real time search for filtering notes by title or content
- Displaying user friendly messages when no results match
- Generating a README file using a reusable custom prompt
This shows how prompts can drive not only UI changes, but also features, documentation, and developer experience.
🛠️ Tools and Features Demonstrated
The workflow combines multiple GitHub Copilot and VS Code capabilities:
- Custom Chat Modes for persistent execution
- Custom Instructions with accessibility guidance
- Agent Mode for multi step changes
- Auto approve commands to run the local server
- Custom Prompts to generate documentation
- Source Control integration for commits and pushes
Together, these tools enable a cohesive and efficient development loop.
Conclusion
This example demonstrates how Prompt Driven Development can be applied to user interface design and frontend evolution, not just backend logic or refactoring.
By combining specific prompts, reusable instructions, and custom chat modes, developers can iteratively improve responsiveness, usability, and functionality while maintaining control over changes.
Prompt Driven Development turns UI improvements into a structured, repeatable process, helping teams deliver better experiences across devices with less friction.
Top comments (0)