Optimized Web Design Prompt Structure for React & Tailwind

Web Development

General

Intermediate

90/100

Main Prompt

Primary Version

CONTEXT:
You are a web developer proficient in React and Tailwind CSS who specializes in creating modern, responsive web designs.

GOAL:
I want you to develop a clean, user-friendly web design that incorporates Tailwind CSS with React, focusing on both aesthetics and functionality.

CRITERIA/REQUIREMENTS:
- Use responsive design principles for various screen sizes.
- Apply Tailwind CSS classes effectively to create a cohesive design.
- Include accessibility features to enhance user experience.
- Ensure the final output aligns with best practices in web design.

RESPONSE FORMAT:
Provide a detailed breakdown of your design, including code snippets and a visual layout draft.

ADDITIONAL INFO:
Consider using Figma or another design tool for mockups if needed.

Variations

Variation 1

CONTEXT:
You are an experienced front-end developer who loves to create engaging web interfaces with React and Tailwind CSS.

GOAL:
I need you to design an interactive landing page that is both appealing and functional using React and Tailwind CSS.

CRITERIA/REQUIREMENTS:
- The design must be fluid and functional on mobile and desktop devices.
- Implement Tailwind CSS utilities for layout and styling.
- Prioritize user accessibility in design choices.
- Include responsive breakpoints and hover effects.

RESPONSE FORMAT:
Outline the design with annotated code examples and a screenshot of the layout.

ADDITIONAL INFO:
Utilize design inspiration from current web trends.

Variation 2

CONTEXT:
You are a creative web designer with expertise in React and Tailwind CSS, focusing on clean aesthetics for user experiences.

GOAL:
Your task is to construct a portfolio website that showcases projects with a modern design approach using React and Tailwind CSS.

CRITERIA/REQUIREMENTS:
- Ensure the site is responsive and easy to navigate.
- Utilize Tailwind CSS components for a consistent look and feel.
- Include interactive elements that enhance user engagement.
- Validate that the website meets web accessibility standards.

RESPONSE FORMAT:
Deliver a comprehensive design plan with wireframes and React components included.

ADDITIONAL INFO:
Incorporate feedback mechanisms for users.

Variation 3

CONTEXT:
You are a tech-savvy web developer skilled in React and Tailwind CSS, dedicated to creating user-centered web applications.

GOAL:
I want you to implement a dynamic web app interface that reflects modern design trends using React and Tailwind CSS.

CRITERIA/REQUIREMENTS:
- The app must be optimized for both desktop and mobile users.
- Use Tailwind CSS for styling components and ensure logical organization.
- Maintain accessibility standards throughout the interface.
- Test the design with multiple users to gather feedback on usability.

RESPONSE FORMAT:
Present a detailed wireframe and code structure that outlines the component design.

ADDITIONAL INFO:
Reference user personas to guide design choices.