De obicei Claude decide singur, dar poți să-l forțezi. Folosește aceste formulări,
'Construiește asta ca artifact HTML într-un singur fișier.'
'Creează un artifact cu o componentă React folosind Tailwind.'
'Fă un artifact cu o diagramă Mermaid.'
Dacă Claude îți arată codul în chat în loc de un panou lateral, spune-i doar, 'Deschide asta ca artifact'.
Lecția 3, Trucul Tailwind + Lucide (combinația de zile mari)
Artifacts din Claude au Tailwind și iconițele Lucide incluse din start. Asta înseamnă că poți livra interfețe frumoase și moderne în câteva secunde, fără niciun setup.
📜 Prompt Playbook,
Cel mai bun AI.•De ce.
Construiește un artifact React într-un singur fișier pentru un [nume tool].
Folosește Tailwind pentru stilizare. Folosește lucide-react pentru iconițe. Folosește doar librăriile deja disponibile în artifacts din Claude (fără pachete externe).
Layout, [descrie layout-ul, ex. sidebar + 3 stat cards + un grafic].
State, tot în React useState, fără localStorage.
Style, temă dark, carduri rounded-2xl, umbre subtile, spațiere generoasă.
Fă-l de calitate de producție. Include date placeholder realiste.
Lecția 4, Cum iterezi pe un Artifact fără să-l strici
Trei comenzi de iterare care funcționează ca prin magie,
'Păstrează totul la fel. Schimbă doar [lucrul specific].' Editare chirurgicală, fără regresii.
'Arată-mi 3 alternative de design pentru secțiunea hero.' Claude generează variante într-un singur răspuns.
'Fă-l cu 10 la sută mai [adjectiv].' Folosește cu măsură, dar funcționează (mai cinematic, mai jucăuș, mai minimal).
Lecția 5, Limitele și cum le ocolești
Doar un singur fișier. Dacă ai nevoie de mai multe fișiere, copiază fiecare manual în editorul tău.
Fără apeluri către API-uri externe în preview-ul artifactului, fetch()-ul tău va fi izolat în sandbox.
Fără localStorage sau sessionStorage în artifacts. Folosește doar state din React.
Lungime maximă, artifactele foarte lungi pot fi tăiate. Ține-le sub ~1500 de linii.
Când depășești Artifacts, sari la Nivel 5 (Claude Code).
🎯 Pachetul de quest-uri pentru Nivel 3
🥉 QUEST BRONZ+100 XP
🧮Construiește un calculator de prețuri pentru freelanceri
Obiectiv. Primul tău Artifact util.
Pași
Deschide Claude. Lipește acest prompt, 'Construiește un artifact React într-un singur fișier pentru un calculator de tarif orar pentru freelanceri. Input-uri, venitul anual dorit, orele facturabile pe săptămână, săptămânile libere pe an, cheltuielile de business. Output, tariful orar. Tailwind, temă dark, carduri rotunjite, iconițe lucide-react.'
Iterează, cere o îmbunătățire de design și adăugarea unei funcționalități.
Fă un screenshot cu rezultatul final.
Postează-l în comunitate împreună cu promptul folosit.
Gata când…
☐ Am un artifact calculator funcțional
☐ Am postat un screenshot în comunitate
🥈 QUEST ARGINT+200 XP
📊Construiește un dashboard de business live pentru un prieten
Obiectiv. Exersează transformarea nevoilor unei persoane reale într-un tool funcțional.
Pași
Alege un prieten cu un business mic. Intervievează-l 15 minute despre ce cifre îl interesează (venituri, costuri, clienți, ore lucrate).
Construiește un artifact dashboard React într-un singur fișier, cu date fictive realiste și graficele potrivite.
Iterează cu el în timp real, dă-i share la ecran, editează live.
Exportă artifactul ca fișier HTML de sine stătător folosind 'View source' sau salvând codul React, făcând build local cu Vite și făcând deploy pe Vercel.
Gata când…
☐ Prietenul a folosit dashboard-ul cel puțin o dată
☐ Am fie un URL live funcțional, fie un fișier HTML descărcabil
🥇 QUEST AUR+400 XP
💼Vinde un tool interactiv de 500 până la 2.000 USD unui client real
Obiectiv. Transformă Artifacts într-un serviciu vandabil.
Pași
Idei de oferte frecvente, calculator de ROI pentru o landing page de SaaS, calculator de credit ipotecar pentru un agent imobiliar, tracker de macro-uri pentru un antrenor personal, quiz funnel pentru un creator de cursuri.
Trimite cold-pitch la 10 clienți ideali, cu un screenshot al unui tool similar pe care l-ai construit în nișa ta.
Prinde 1 client plătitor.
Construiește-i tool-ul în Claude ca artifact, iterează cu el.
Exportă într-un proiect Vite, fă deploy pe Vercel sub domeniul lui.