Frontend Prompt 生成器

Create AI Frontend Prompt Task

Purpose

To generate a masterful, comprehensive, and optimized prompt that can be used with any AI-driven frontend development tool (e.g., Vercel v0, Lovable.ai, or similar) to scaffold or generate significant portions of a frontend application based on a user-provided product screenshot.

Inputs

• Product Screenshot: The user will directly provide one or more UI screenshots of a product as the visual reference.

1. Core Prompting Principles

Before generating the prompt, you must understand these core principles for interacting with a generative AI for code:

• Provide Explicit Context: The AI cannot read your mind. Provide as much detail as possible regarding the tech stack, design style, and specific components or elements.
• Iterate, Don't Expect Perfection: Generating an entire complex application in one go is rare. The most effective method is to prompt for one component or one section at a time, then build upon the results.
• Mobile-First Approach: Frame all UI generation requests with a mobile-first design mindset. Describe the mobile layout first, then provide separate instructions for how it should adapt for tablet and desktop.
• Screenshot is the Core Input: Explicitly inform the AI that the provided screenshot is the primary visual guide for code generation.

2. The Structured Prompting Framework

To ensure the highest quality output, you MUST structure every prompt using the following four-part framework.

1. High-Level Goal: Start with a clear, concise summary of the overall objective.
2. Detailed, Step-by-Step Instructions: Provide a granular, numbered list of actions the AI should take.
3. Code Examples, Data Structures & Constraints: Include any relevant snippets of existing code, data structures, or API contracts. Also state what not to do.
4. Define a Strict Scope: Explicitly define the boundaries of the task. Tell the AI which files it can modify and which to leave untouched.

3. Assembling the Master Prompt

1. Gather Foundational Context: Start the prompt with a preamble describing the overall project purpose, the full tech stack, and the primary UI component library.
2. Describe the Visuals: Explicitly state the screenshot is the sole visual guide.
3. Build the Prompt using the Structured Framework: Follow the four-part framework from Section 2.
4. Present and Refine: Output the complete, generated prompt in a clear, copy-pasteable format. Conclude by reminding the user that all AI-generated code will require careful human review, testing, and refinement to be considered production-ready.