Verwenden Sie die Gemini 3 Vibe-Coding-On-Chain-Adresse zur Abfrage & Social-Tracking-Seite Die Funktion besteht darin, durch Eingabe der EVM-Adresse On-Chain-Informationen und soziale Identitäten zu verfolgen, wie z.B. x handle (ähnlich wie das vor einigen Jahren beliebte soziale Netzwerkdiagramm) Dauer: 25 Minuten, schließlich wurde die folgende Frontend-Seite erstellt Tatsächlich ist Vibe-Coding sehr einfach, es ist bequemer als vor ein paar Monaten, als ich noch GPT-4o mit Cloudflare verwendet habe Geben Sie Gemini Anweisungen, der Schlüsselpunkt ist, dass die Anweisungen in einfacher Sprache und die Prompts im AI-Coding unterschiedlich sind, daher müssen Sie AI nutzen, um Ihnen einen Prompt zu geben, den LLM verstehen kann Zum Beispiel ist mein Prompt: Bitte helfen Sie mir, mit React und Tailwind CSS einen einseitigen Web3-Sozialgraph-Tracker zu erstellen Designanforderungen: . Stil: Geek-Stil, Matrix-Stil. Der Hintergrund sollte tiefschwarz sein, der Text sollte einen Hauch von neonblau oder lila Glühen haben. . Layout: In der Mitte der Seite sollte ein Suchfeld sein, in das die ETH-Adresse eingegeben wird. . Animation: Nach dem Klicken auf die Suche sollte es eine coole „Daten werden gescannt“-Ladeanimation geben. Ergebnisanzeige: . Links wird die „Identitätskarte“ dieser Person angezeigt: enthält ein Profilbild (verwenden Sie ein zufälliges Web3-Profilbild), ENS-Domain und das Wichtigste, den Twitter-Account (hervorgehoben). . Rechts wird das „Interaktionsnetzwerk“ angezeigt: listet 3-5 Adressen auf, mit denen sie interagiert haben. Datenlogik: . Da ich kein Backend habe, bitte helfen Sie mir, einige simulierte Daten (Mock Data) festzuschreiben. Egal welche Adresse ich eingebe, tun Sie so, als ob Sie Daten gefunden haben. Zum Beispiel wird die standardmäßig gefundene Person "Vitalik" genannt, Twitter @VitalikButerin Dateistruktur: . Bitte schreiben Sie den gesamten Code direkt in eine App.jsx und App.css, damit ich die Ergebnisse direkt sehen kann. Die meiste Zeit wurde mit Debugging verbracht, da der Coding-Tool aufgrund verschiedener kleiner Inhalte nicht direkt erkennen kann, was passiert, muss ich immer noch Gemini zum Debuggen verwenden, den Code kopieren, ihm genau sagen, wo das Problem aufgetreten ist, und ihn dann das Problem lösen lassen....