Capture Tools

Gib der KI präzisen visuellen Kontext. Screenshots, Elementauswahl und Bilder.

Je präziser der visuelle Kontext ist, den du der KI gibst, desto besser sind ihre Bearbeitungen. Proyecta bietet mehrere Capture Tools.

Ein Element auswählen (Visual Editor)

Im Visual Editor-Modus wird jedes Element in der Vorschau anklickbar. Fahre mit der Maus darüber, um es hervorzuheben, und klicke, um es auszuwählen. Das ausgewählte Element wird mit einem Overlay hervorgehoben, und seine bearbeitbaren Eigenschaften (Text, Farben, Abstände, Schriften, Rahmen, Effekte) erscheinen im Seitenleistenpanel.

Sobald ein Element ausgewählt ist, kannst du entweder:

• Es direkt bearbeiten — Eigenschaften inline ändern, ohne einen Prompt zu schreiben
• Die KI dazu befragen — die Auswahl wird als Kontext übergeben, sodass du sagen kannst "make this button bigger" oder "move this section above the hero" und die KI genau weiß, was du meinst

Dynamische Elemente (berechnete classNames, bedingtes Rendering, Ausdrücke) fallen automatisch auf den KI-Chat zurück, mit einem strukturierten Prompt.

Siehe Visual Edit für die vollständige Liste der bearbeitbaren Eigenschaften.

Screenshots in den Chat einfügen oder ziehen

Das Chat-Eingabefeld akzeptiert Bilder direkt:

1. Einfügen — kopiere einen Screenshot mit deinem OS-Shortcut (Cmd+Shift+4 auf Mac, Win+Shift+S auf Windows) und füge ihn in den Chat ein
2. Ziehen — lege eine beliebige Bilddatei auf das Chat-Eingabefeld

Unterstützte Formate: PNG, JPEG, WebP, GIF, AVIF. Maximale Größe: 10 MB pro Bild.

Vorschau-Screenshots

Die KI kann jederzeit über ein integriertes preview_screenshot-Tool eigene Screenshots deiner Vorschau aufnehmen. Du siehst die Screenshot-Ergebnisse direkt im Chat erscheinen. Die KI ruft dieses Tool automatisch auf, wenn sie ihre Änderungen überprüfen oder den aktuellen Zustand deiner App verstehen muss.

Das Screenshot-Tool kann bestimmte Routen ansteuern (z. B. /dashboard, /settings) und erfasst Abmessungen, was der KI hilft, über Layout und Abstände nachzudenken.

FAQ

Wie weise ich die KI auf einen bestimmten Button oder Text hin?

Verwende den Visual Editor-Modus und klicke auf das Element. Dadurch wird eine präzise, strukturierte Referenz an die KI übergeben — weit besser als das Element in Worten zu beschreiben.

Demnächst verfügbar

Die folgenden Capture Tools sind intern implementiert, aber noch nicht in der Benutzeroberfläche verfügbar:

• Annotate — erfasse die aktuelle Vorschau und zeichne Pfeile, Rechtecke, Kreise, Freihandstriche und Textbeschriftungen darauf, bevor du sie an die KI sendest.
• Screen Record — nimm eine mehrstufige Interaktion auf (Klicks, Navigation, Animationen) und hänge die aufgenommenen Frames an deine Chat-Nachricht an. Ideal für zeitkritische Bugs, die ein einzelner Screenshot nicht erfassen kann.