Starting a new project
When you’re beginning a new application, describe the big picture to help HypeFrame understand what you’re building and where to start. Example:“Create a task management app with project views, deadlines, and team assignments. Start by building a clean dashboard that shows all active projects.”Example:
“Build a recipe sharing platform where users can post recipes, search by ingredients, and save favorites. Begin with the homepage and user authentication.”
Quick prompts by use case
Ready-to-use prompts for common scenarios. Copy these and adapt them to your needs.Landing pages
Create high-converting landing pages quickly—no designer or developer needed. Example:“Create a landing page for my productivity app with a hero section, three feature highlights, customer testimonials, and a signup form at the bottom.”Example:
“Build a landing page for a SaaS product with a compelling headline, feature grid, pricing section, and a prominent call-to-action button.”
Web applications
From MVPs to full products, build responsive, functional web apps ready to deploy. Example:“Build a to-do list web app with user accounts, light and dark mode toggle, drag-and-drop task organization, and due date reminders.”Example:
“Create a blog platform where users can write posts, add tags, schedule publication, and view analytics for each post.”
Dashboards
Turn data into insights with interactive dashboards featuring charts, tables, and real-time updates. Example:“Build an analytics dashboard to monitor website traffic with date range filters, device breakdown charts, and top pages table.”Example:
“Create a sales dashboard showing revenue trends, top customers, conversion rates, and monthly comparisons with interactive charts.”
Internal tools
Build custom tools that streamline your team’s workflows—from CRMs to inventory systems. Example:“Generate an internal CRM for tracking customer conversations, follow-up dates, deal stages, and contact information.”Example:
“Create an inventory management system with product listings, stock levels, low-stock alerts, and supplier information.”
Websites
Build beautiful, responsive websites for portfolios, businesses, or personal use. Example:“Create a personal portfolio website with sections for projects, blog posts, about me, and contact information.”Example:
“Build a company website with services page, team section, case studies, and a contact form.”
Designing or restyling screens
Improve the visual design without changing functionality. Focus on layout, spacing, colors, or overall polish. Example:“Improve the visual design of this screen. Keep all functionality the same. Focus on better spacing, modern layout, and a more polished look.”Example:
“Redesign the login page with a cleaner layout, better color scheme, and improved spacing. Don’t change any of the authentication logic.”
Making things responsive
Ensure your UI works perfectly across mobile, tablet, and desktop screens. Example:“Make this layout mobile-friendly. Stack content vertically on small screens, adjust font sizes, and ensure buttons are easy to tap.”Example:
“Make the dashboard responsive. On mobile, convert the sidebar to a hamburger menu and stack the cards in a single column.”
Workflows
Define how things flow in your app—from user actions to automated processes.App logic workflows
Example:“When a user submits the contact form, validate all fields, save the data to the database, send a confirmation email, and show a success message.”Example:
“After a user completes checkout, create an order record, update inventory, send order confirmation, and redirect to the order tracking page.”
Project workflows
Example:“Set up automatic deployment so that when I push to the main branch, the app deploys to production automatically.”
Editing or refactoring
Clean up code, improve readability, and maintain functionality while making improvements. Example:“Refactor this component. Keep the same output and behavior, but simplify the code structure, remove duplication, and add helpful comments.”Example:
“Clean up the authentication code. Keep all functionality working, but organize it better and improve error handling.”
Data and user management
Work with HypeFrame’s built-in database and user management features. Example:“Create a place to store contact form submissions. When someone fills it out, save their name, email, and message. Make email required and limit the message to 500 characters.”Example:
“Add user profiles where users can update their name, email, and profile picture. Store this information and display it on their profile page.”Example:
“Create a comments system where logged-in users can post comments on articles. Store the comment, author, timestamp, and article ID.”
Writing help and documentation
Create clear documentation, onboarding experiences, or user guides within your app. Example:“Create a help page explaining how to use the dashboard. Include a title, brief introduction, and 3–5 step-by-step instructions with screenshots.”Example:
“Build an onboarding flow for new users. Show them the main features with tooltips and a ‘Skip’ option to proceed at any time.”
Planning and scoping
Break down big ideas into manageable steps before building. Example:“Plan the steps needed to add a notification system for overdue tasks. Don’t implement yet—just outline the required steps for frontend, backend, and logic.”Example:
“Break down the requirements for adding a search feature. List what needs to be built on the frontend, what data is needed, and how the search should work.”
Locking or limiting scope
Focus HypeFrame on one specific area without touching anything else. Example:“Only update the settings page. Do not change anything in the authentication flow or the dashboard.”Example:
“Modify just the header component. Leave all other components and pages exactly as they are.”
Testing and error handling
Add resilience, helpful error messages, and better user feedback. Example:“Add loading and error states to the user profile page. Show a spinner while loading data, and display a clear error message if the data fails to load.”Example:
“Add form validation to the signup form. Show specific error messages for each field, and prevent submission until all fields are valid.”Example:
“Add retry logic for failed API calls. If a request fails, show a message and a ‘Retry’ button that attempts the request again.”
Analytics and tracking
Set up tracking for your deployed applications. Example:“Add analytics tracking to track page views. Record when users visit each page and display this data in the analytics dashboard.”Example:
“Track user interactions on the homepage. Monitor button clicks, form submissions, and time spent on the page.”
Need something more specific?
This library grows as we learn what works best. If you have a use case that’s not covered here, or you’d like to see more examples for a specific scenario, let us know. We’re always adding new prompts based on what users need.Have a great prompt that works well? Share it with us at
[email protected] and we might add it to the
library!