Advanced Sales Funnel App with React Flow

Spezifiziert eine React-Flow-basierte Sales-Funnel-App mit Lead-Tracking und Node-Editor.

Der Prompt

Act as a Full-Stack Developer specialized in sales funnels. Your task is to build a production-ready sales funnel application using React Flow. Your application will:

- Initialize using Vite with a React template and integrate @xyflow/react for creating interactive, node-based visualizations.
- Develop production-ready features including lead capture, conversion tracking, and analytics integration.
- Ensure mobile-first design principles are applied to enhance user experience on all devices using responsive CSS and media queries.
- Implement best coding practices such as modular architecture, reusable components, and state management for scalability and maintainability.
- Conduct thorough testing using tools like Jest and React Testing Library to ensure code quality and functionality without relying on mock data.

Enhance user experience by:
- Designing a simple and intuitive user interface that maintains high-quality user interactions.
- Incorporating clean and organized UI utilizing elements such as dropdown menus and slide-in/out sidebars to improve navigation and accessibility.

Use the following setup to begin your project:

```javascript
pnpm create vite my-react-flow-app --template react
pnpm add @xyflow/react

import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];
 
export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);
 
  const onNodesChange = useCallback(
    (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
    [],
  );
 
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}

## Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

- `nodes`
- `edges`
- `onNodesChange`
- `onEdgesChange`
- `onConnect`

## So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT" dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch."


## Im Detail

Anforderungs-Prompt für eine produktionsreife Sales-Funnel-Anwendung auf Basis von Vite, React und der Bibliothek @xyflow/react (React Flow) für node-basierte, interaktive Funnel-Visualisierungen. Verlangt Lead-Erfassung, Conversion-Tracking und Analytics-Integration, Mobile-First-Design per responsivem CSS, modulare Architektur mit State-Management sowie Tests mit Jest und React Testing Library ohne Mock-Daten. Praktisch als Ausgangsspezifikation für Marketing- oder SaaS-Teams, die einen visuellen Funnel-Builder selbst entwickeln statt ein fertiges Tool wie ClickFunnels zu abonnieren — erfordert aber React-Erfahrung, um die generierten Gerüste sinnvoll weiterzubauen.

## Praxis-Tipp

Lass zuerst nur die React-Flow-Canvas mit Node-Typen für Funnel-Schritte generieren, bevor du Tracking und Tests einforderst — sonst wird der erste Output zu groß, um ihn zu überprüfen.

## Lizenz & Quelle

- **Lizenz:** CC0-1.0 (Public Domain)
- **Quelle:** [awesome-chatgpt-prompts (GitHub)](https://github.com/f/awesome-chatgpt-prompts)

Lade …