一张截图，生成一个网站 ！免费工具！太方便！

这个工具就是：
https://www.supercopycoder.xyz/
去任何一个网站主页上截个图，然后上传，点击：Generate Prompt,就可以生成网站的提示词：

我们用这个网站 的截图，试试：

上传，点击:Generate Prompt,就自动生成提示词：

生成的详细提示词如下：

Create detailed components with these requirements:

1. Use 'use client' directive for client-side components
2. Style with Tailwind CSS utility classes for responsive design
3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested
4. Use stock photos from picsum.photos where appropriate, only valid URLs you know exist
5. Configure next.config.js image remotePatterns to enable stock photos from picsum.photos
6. Create root layout.tsx page that wraps necessary navigation items to all pages
7. MUST implement the navigation elements items in their rightful place i.e. Left sidebar, Top header
8. Accurately implement necessary grid layouts
9. Follow proper import practices:
   • Use @/ path aliases
   • Keep component imports organized
   • Update current src/app/page.tsx with new comprehensive code
   • Don't forget root route (page.tsx) handling
   • You MUST complete the entire prompt before stopping

Summary Title

Web application for creating and sharing custom avatars

Image Analysis

1. Navigation Elements:
   • Top header with the following links: Home, Create, Gallery, About, and Contact.
   • A search bar in the top header for searching avatars.
   • A user profile icon in the top right corner with a dropdown menu for account settings and logout.
2. Layout Components:
   • A left sidebar with the following sections:
     • My Avatars: Displays a list of the user's created avatars.
     • Public Avatars: Displays a list of publicly available avatars.
     • Categories: Allows filtering avatars by category.
   • A main content area that displays the selected avatar and provides options for editing and sharing.
   • A right sidebar with the following sections:
     • Color Palette: Allows customizing the avatar's colors.
     • Accessories: Provides a variety of accessories to add to the avatar.
     • Backgrounds: Offers different background options for the avatar.
3. Content Sections:
   • The main content area displays the avatar in a large preview window.
   • Below the preview window, there are buttons for editing the avatar, sharing it on social media, and downloading it.
   • The right sidebar contains various customization options for the avatar, including color palettes, accessories, and backgrounds.
4. Interactive Controls:
   • Buttons for creating a new avatar, editing an existing avatar, sharing an avatar, and downloading an avatar.
   • Sliders and color pickers for customizing the avatar's appearance.
   • Dropdowns for selecting categories and accessories.
   • A search bar for finding specific avatars.
5. Colors:
   • The primary color is a light blue (#007bff).
   • The secondary color is a dark blue (#0056b3).
   • The background color is white (#ffffff).
   • The text color is black (#000000).
6. Grid/Layout Structure:
   • The page uses a responsive grid layout with three columns: a left sidebar, a main content area, and a right sidebar.
   • The left and right sidebars have a fixed width, while the main content area takes up the remaining space.
   • The spacing between the columns is 20px.

Development Planning

1. Project Structure:
   • The project will be structured using a component-based approach.
   • Components will be organized into folders based on their functionality (e.g., navigation, avatar editor, etc.).
   • A global stylesheet will be used for consistent styling across the application.
2. Key Features:
   • Avatar creation: Allow users to create new avatars from scratch using a variety of customization options.
   • Avatar editing: Allow users to edit existing avatars by changing their colors, accessories, and backgrounds.
   • Avatar sharing: Allow users to share their avatars on social media or download them for personal use.
   • Public avatar gallery: Display a gallery of publicly available avatars that users can browse and use.
   • User authentication: Allow users to create accounts and log in to save their avatars and access additional features.
3. State Management:
   • The application will use a state management library (e.g., Redux or MobX) to manage the application's state.
   • The state will include information about the current user, the selected avatar, and the customization options.
4. Routes:
   • The application will have

把这些提示词复制出来说，丢给程序员AI智能体：
https://roomsdreamer.com/

5分钟就可以生成一个新的一模一样的网站 了。
程序员AI智能体详细教程：
https://www.cnblogs.com/gyc567/p/18670114