Prompt lesson · 20 prompts
Progressive Web App Development prompts for Web Developers
20 ready-to-use prompts from our AI for Web Developers course. Copy one, fill in the {{placeholders}}, and paste it into ChatGPT, Claude, Gemini or any other AI.
App-like UI/UX for PWA
Use this when you need to design or improve a Progressive Web App to feel like a native mobile app.
Role You are a UI/UX designer specializing in Progressive Web Apps. Your goal is to provide actionable design guidance that makes PWAs feel native and intuitive.
Context you provide
- {{pwa_description}}: Brief description of your PWA, its purpose, and target users.
- {{current_design}}: (Optional) Current design elements or screens you want to improve.
- {{specific_concerns}}: (Optional) Specific areas of concern, such as navigation, performance, or visual style.
Instructions
- Ask for missing context if needed.
- Based on the PWA description, identify key design elements that contribute to an app-like feel (e.g., navigation patterns, gestures, visual hierarchy).
- Provide specific UI/UX principles to apply, with examples of effective designs.
- Suggest strategies for optimizing user experience, prioritizing features that enhance the native feel.
- If current design is provided, critique it and offer concrete improvements.
- Recommend tools for prototyping and testing.
Output format A structured response with sections: Key Design Elements, UI/UX Principles, Optimization Strategies, and Recommended Tools. Use bullet points and examples. Tone: creative and practical.
Guardrails
- Do not invent design trends; base recommendations on established principles.
- Stay within the scope of PWA design.
- Avoid overloading with too many suggestions; focus on high-impact changes.
Example PWA description: A fitness tracking app with daily workouts and progress charts; current design: basic web layout; specific concerns: navigation feels clunky.
Open this prompt Creating · Intermediate
Create Detailed User Personas
Use this when you need to define and refine user personas to guide the design and feature decisions of your progressive web app.
Role You are a UX researcher and product strategist. Your goal is to help create realistic, data-informed user personas that will drive design and feature decisions for a PWA.
Context you provide
- {{target_audience}}: Describe the demographic or segment you're targeting (e.g., millennials, busy professionals, students).
- {{app_purpose}}: Explain what your PWA does and the main problem it solves.
- {{known_details}}: Share any existing user data, interviews, or assumptions you have.
Instructions
- If any context is missing, ask for it before starting.
- Based on the provided information, create 2-3 distinct user personas.
- For each persona, include:
- Name and a brief narrative.
- Demographics (age, occupation, location).
- Goals and motivations.
- Pain points and frustrations.
- How they would use the PWA and what features matter most to them.
- Suggest methods to validate these personas with real user feedback.
Output format A structured list of personas, each with clear subheadings for the required elements. Use a professional, empathetic tone. Keep each persona concise but vivid.
Guardrails
- Do not invent specific user data; base personas on the provided context and clearly flag any assumptions.
- Avoid stereotypes; ensure personas are nuanced and realistic.
- Stay focused on persona creation; do not expand into broader marketing strategy.
Example
- {{target_audience}}: Freelance graphic designers aged 25-40.
- {{app_purpose}}: A PWA for managing client projects and invoices.
- {{known_details}}: They value simplicity and mobile access.
Open this prompt Creating · Beginner
Design Offline-First PWA
Use this when you need to plan and implement offline functionality for a progressive web app, including caching and data sync.
Open this prompt Planning · Intermediate
Ensure PWA Accessibility
Use this when you need to make your Progressive Web App accessible to users with disabilities and ensure an inclusive experience.
Open this prompt Analysis · Intermediate
Ensure PWA Cross-Platform Compatibility
Use this when you need to ensure your Progressive Web App works seamlessly across different platforms, browsers, and devices.
Open this prompt Research · Intermediate
Ensure PWA Responsiveness
Use this when you need to make your Progressive Web App fully responsive across desktop and mobile devices.
Open this prompt Analysis · Intermediate
Handle Offline Form Submission
Use this when you need to allow users to submit forms in your PWA even without an internet connection, with automatic sync later.
Open this prompt Coding · Advanced
Implement App Shell Architecture
Use this when you want to improve your PWA's load performance by separating the core app shell from dynamic content.
Open this prompt Planning · Intermediate
Implement Offline Data Caching
Use this when you need to implement offline data caching in a progressive web app (PWA) to improve performance and user experience.
Open this prompt Planning · Intermediate
Implement Offline Support
Use this when you need to add offline functionality to your PWA, ensuring users can access content and features without an internet connection.
Open this prompt Planning · Intermediate
Implement Push Notifications
Use this when you want to integrate push notifications into your PWA to boost user engagement and retention.
Open this prompt Planning · Intermediate
Implement PWA Background Sync
Use this when you need to implement background sync in a Progressive Web App to ensure data synchronization when the device is online.
Open this prompt Coding · Intermediate
Implement PWA Background Updates
Use this when you need to enable automatic background updates in a Progressive Web App to keep content fresh without user intervention.
Open this prompt Coding · Advanced
Optimize PWA Performance
Use this when you need to improve the loading speed and responsiveness of your progressive web app through performance optimization techniques.
Open this prompt Analysis · Intermediate
PWA Home Screen Implementation
Use this when you need to implement, explain, or troubleshoot the 'Add to Home Screen' feature for a Progressive Web App.
Open this prompt Coding · Intermediate
PWA Performance Optimization
Use this when you need to improve the speed and performance of your Progressive Web App, ensuring fast loading times and smooth user interactions.
Open this prompt Planning · Intermediate
PWA Push Notification Implementation
Use this when you need to integrate push notifications into a Progressive Web App (PWA) and optimize user engagement.
Open this prompt Coding · Intermediate
PWA Testing and Debugging Guide
Use this when you need to test and debug a Progressive Web App, identify common issues, and apply best practices.
Open this prompt Analysis · Intermediate
Responsive PWA Design Blueprint
Use this when you need to design a Progressive Web App that adapts seamlessly to various screen sizes and devices.
Open this prompt Creating · Intermediate
Secure PWA Connections
Use this when you need to implement, migrate, or communicate HTTPS for your Progressive Web App to ensure security and user trust.
Open this prompt Planning · Intermediate