WebSim Prompting: Tips & Tricks

Good: "Create a responsive landing page for a coffee shop with a rustic theme, featuring a hero section, about us, menu, and contact form." Better: "Design a mobile-first landing page for 'Brew Haven', an artisanal coffee shop. Include: 1. A hero section with a full-width image of coffee beans and an overlaid tagline: 'Craft Coffee, Cozy Vibes' 2. An 'About Us' section with a brief history and mission statement 3. A menu section displaying at least 5 coffee varieties with prices 4. A contact form with fields for name, email, and message Use earth tones (browns, greens) to emphasize the rustic theme, and ensure all sections are fully responsive."

Basic: "Make a website for a bookstore." Descriptive: "Create an immersive online experience for 'Whispering Pages', a cozy independent bookstore. The website should evoke the feeling of browsing through old bookshelves, with a warm color palette of deep reds, rich browns, and creamy whites. Incorporate subtle page turn animations and the sound of rustling paper for interactive elements. Feature high-quality images of vintage books, reading nooks, and steaming cups of tea to set the atmosphere."

"Build a dynamic todo list application using React for the frontend and Firebase for real-time data storage. Implement user authentication and ensure the UI updates instantly when tasks are added, completed, or deleted."

"Design a fully responsive portfolio website for a graphic designer. Ensure smooth transitions between desktop, tablet, and mobile views. Use CSS Grid for layout and implement a masonry-style gallery that adapts to different screen sizes without losing visual appeal."

Initial: "Create a website for a fitness studio." Refinement: "Great start! Now, let's add a class schedule section. Use a weekly calendar layout where users can click on class times to see details and book sessions. Implement a color-coding system for different types of classes (e.g., yoga, pilates, strength training)." Further Refinement: "Excellent! For the booking functionality, integrate a modal pop-up that appears when a user clicks a class. Include fields for name, email, and an option to purchase a class pass or use an existing one. Add a confirmation email feature using a serverless function."

"Create an e-commerce platform that combines the sleek product displays of Apple's website with the user review system of Amazon. Add a unique twist by implementing a 3D product viewer similar to what Wayfair uses for furniture, but optimized for electronic devices."

"Develop a set of reusable React components for a dashboard interface. Include: 1. A responsive navigation bar with dropdown menus 2. A customizable chart component that can display various types of data visualizations 3. A data table component with sorting and filtering capabilities 4. A modal component for displaying additional information or forms Ensure these components are easily themeable and can be composed to create complex dashboard layouts."

"Design a news article page with a focus on accessibility. Implement proper heading structure, ensure sufficient color contrast, add skip navigation links, and use ARIA labels where necessary. Make sure all interactive elements are keyboard accessible and include a 'dark mode' toggle for users with light sensitivity."