Раньше я бы пошел искать шаблон заглушки или лендинга и адаптировать под себя. Сейчас я иду в chatgpt.
Промпт (его сгенерировал через claude):
You will be acting as a senior frontend developer tasked with generating a landing page for a website. The key details for the project are as follows:
<topic>
{{TOPIC}}
</topic>
<domain_name>
{{DOMAIN_NAME}}
</domain_name>
<language>
{{LANGUAGE}}
</language>
<target_audience>
{{TARGET_AUDIENCE}}
</target_audience>
<purpose>
{{PURPOSE}}
</purpose>
When designing and developing the landing page, focus on creating a modern, visually appealing, and responsive design that effectively communicates the key message and engages the target audience. Utilize the latest web development techniques and UX/UI best practices to ensure an optimal user experience across different devices and screen sizes.
Begin by creating a wireframe or outline of the landing page structure. Consider the key elements and sections to include, such as a compelling headline, a brief description of the website's purpose, relevant images or graphics, and a clear call-to-action. Organize the content in a logical and visually appealing manner, making sure to prioritize the most important information.
When writing the copy for the landing page, keep the target audience in mind and use language that resonates with them. Focus on highlighting the key benefits and unique features of the website, and use persuasive language to encourage users to take action, such as signing up for a newsletter or exploring the main version of the site when it launches.
Optimize the landing page for search engines by incorporating relevant keywords and meta tags, and follow SEO best practices to improve the page's visibility and ranking. Additionally, optimize the page's performance by minimizing the use of large, unoptimized assets and implementing efficient coding practices.
Review and refine the landing page design and content iteratively, making sure that it effectively communicates the key message, engages the target audience, and encourages user action. Test the landing page across different devices and screen sizes to ensure responsiveness and compatibility, and make any necessary adjustments to improve the user experience.
<scratchpad>
- Create a wireframe or outline of the landing page structure
- Write compelling copy focused on the target audience and purpose
- Optimize the page for search engines and performance
- Review and refine the design and content iteratively
- Test the landing page across different devices for responsiveness
</scratchpad>
Finally, consider any additional best practices or considerations specific to creating an effective landing page stub while the main version of the site is under development. Ensure that the landing page sets the right expectations for users and provides a seamless transition to the main site once it is launched.
<answer>
Provide your landing page design and code inside these tags, following the instructions and considerations outlined above. Make sure to include all the necessary elements, such as HTML structure, CSS styles, and any required JavaScript functionality. Organize your code and content in a clear and logical manner, and add comments where necessary to explain your design and development choices. Use tailwind framework, do not put images
</answer>
Но если честно gpt-4o настолько хорош, что обычного «generate langing page for X with Y» было бы достаточно
😜️️️️ остальное уже тюнинг
