Lovable.dev dobre praktyki , mistrzowskie prompty. Jak pisać prompty скачать в хорошем качестве

Lovable.dev dobre praktyki , mistrzowskie prompty. Jak pisać prompty

1. Złota Zasada: "Context-Action-Constraint"Najczęstszym błędem jest pisanie zbyt ogólnych promptów. Mistrzowski prompt w Lovable musi zawierać trzy elementy:Context (Kontekst): Co budujemy i dla kogo?Action (Akcja): Co dokładnie ma się zmienić?Constraint (Ograniczenia/Technologia): Jakich bibliotek użyć, a czego unikać?Przykład "Mistrzowskiego Promptu":Zły prompt: „Dodaj wykresy do panelu użytkownika.”Mistrzowski prompt: „W komponencie UserDashboard dodaj interaktywny wykres liniowy (recharts) pokazujący trendy wydatków z ostatnich 30 dni. Dane pobierz z tabeli transactions w Supabase. Wykres powinien być responsywny i używać kolorów z naszej palety Tailwinda (slate-900). Nie twórz makiety danych, użyj istniejącego hooka useTransactions.”2. Dobre Praktyki: Architektura i PrzepływA. Buduj modularnie (The Atomic Approach)Lovable najlepiej radzi sobie z modyfikacją konkretnych komponentów. Zamiast prosić o „cały system CRM”, buduj go warstwami:Layout & Navigation (Sidebar, Navbar).Data Schema (Tabele w Supabase).Core Logic (Listy, tabele danych).Advanced Features (Filtrowanie, wykresy, powiadomienia).B. "Prompt-to-Supabase" WorkflowLovable ma natywną integrację z Supabase. Aby uniknąć błędów w bazie danych:Zawsze najpierw opisz strukturę danych: „Utwórz tabelę 'projects' z polami: id, title, status (enum), owner_id (FK to profiles). Włącz RLS (Row Level Security).”Dopiero gdy baza jest gotowa, proś o UI.C. Używanie "Knowledge Base"Jeśli masz specyficzne wymagania (np. specyficzna biblioteka UI lub brandbook), wklejaj je jako tekst na początku sesji, aby Lovable „nauczyło się” Twoich standardów.3. Typy Promptów "Ratunkowych" (Gdy coś idzie nie tak)Kiedy Lovable zaczyna robić błędy wizualne lub logiczne, użyj tych technik:The Debugger Prompt:„Zanalizuj ostatnią zmianę w komponencie AuthForm. Przycisk 'Submit' przestał reagować na kliknięcia. Sprawdź, czy onSubmit jest poprawnie przekazany do formularza i czy e.preventDefault() nie blokuje akcji.”The Refactor Prompt:„Ten komponent ProductCard stał się zbyt duży (200+ linii). Wydziel logikę przycisku 'Add to Cart' do osobnego komponentu w folderze /components/products i użyj lucide-react dla ikon.”4. Tabela: Strategie promptowania w LovableCelStrategia PromptowaniaPrzykład Słów KluczyNowa FunkcjaOpisz stan wejściowy i wyjściowy."Mając dane X, stwórz widok Y..."Wygląd UIReferencja do shadcn/ui i Tailwinda."Użyj komponentu Card z shadcn, padding p-6..."Logika BazySQL-first prompting."Dodaj relację jeden-do-wielu między..."Poprawa BłęduOpisz zachowanie oczekiwane vs aktualne."Oczekiwałem X, widzę błąd Y w konsoli..."