“Create a modern website layout” എന്ന ഒറ്റവരി പ്രോംപ്റ്റ് നൽകിയാൽ AI പലപ്പോഴും കാലഹരണപ്പെട്ട ജനറിക് ടെംപ്ലേറ്റുകളാണ് നൽകുക. ഇത് ലേഔട്ട്, കളർ തിയറി, ടൈപ്പോഗ്രാഫി, റെസ്പോൺസീവ് സ്വഭാവം എന്നിവയെക്കുറിച്ച് കൃത്യമായ നിർദ്ദേശങ്ങൾ ലഭിക്കാത്തതുകൊണ്ടാണ് സംഭവിക്കുന്നത്.
📋 Master AI Prompt (English)Copy & Paste into AI
You are a senior UI/UX designer and front-end developer. Design and build a professional responsive website page based on the following requirements. Project: [Website or business name] Business type: [Industry or service] Primary goal: [Generate leads / Sell products / Explain a service / Build trust] Target audience: [Describe the users] Page type: [Homepage / Landing page / Service page / Dashboard] Technology: [HTML, CSS and JavaScript / React / Next.js / WordPress Elementor] Required sections: 1. [Header] 2. [Hero section] 3. [Services or features] 4. [Social proof] 5. [Call-to-action section] 6. [Footer] Visual direction: - Style: [Minimal / Corporate / Premium / Playful] - Primary colour: [Colour] - Accent colour: [Colour] - Background: [Light / Dark] - Typography preference: [Preference] - Border and corner style: [Sharp / Slightly rounded] - Image style: [Photography / Illustration / 3D graphics] UX requirements: - Establish a clear visual hierarchy. - Make the primary call to action easy to identify. - Use readable typography and consistent spacing. - Include hover, focus, loading and empty states where relevant. - Ensure keyboard accessibility and sufficient colour contrast. - Design for desktop, tablet and mobile screens. - Avoid excessive animation and unnecessary visual effects. - Do not use placeholder statistics, testimonials, client logos or awards as real information. Technical requirements: - Use semantic and maintainable code. - Create reusable components where appropriate. - Optimize images and avoid unnecessary dependencies. - Prevent horizontal scrolling on mobile. - Include meaningful alt-text placeholders. - Test the layout at common responsive breakpoints. Before building: 1. Summarize the proposed page structure. 2. List any critical missing information. 3. If details are missing, make only reversible design assumptions and label them clearly. After building: 1. Check responsiveness. 2. Check accessibility basics. 3. Check for broken interactions and overflow. 4. Provide a brief list of files or components created.
WordPress & Elementor പ്രോജക്ടുകളിൽ
Technology എന്ന ഭാഗത്ത് “WordPress with Elementor Pro” അല്ലെങ്കിൽ “Vanilla CSS & Clean HTML” എന്ന് കൃത്യമായി രേഖപ്പെടുത്തുക. കസ്റ്റം CSS, ഷോർട്ട്കോഡുകൾ, ACF ഫീൽഡുകൾ എന്നിവ ആവശ്യമെങ്കിൽ അതും മുൻകൂട്ടി ആവശ്യപ്പെടാം.
ലൈവ് ചെയ്യുന്നതിന് മുൻപ്
AI തയ്യാറാക്കിയ കോഡ് സ്റ്റേജിങ് എൻവയോൺമെന്റിൽ പരീക്ഷിച്ച് ഫോമുകൾ, ബട്ടണുകൾ, മൊബൈൽ മെനു എന്നിവ തടസ്സമില്ലാതെ പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുക.
