Sunt Zoltán și am construit Type UI împreună cu Robert Tanislav ca să rezolvăm o problemă pe care am tot văzut-o în proiectele generate cu AI: interfețe care arată acceptabil la prima vedere, dar au spațieri ciudate, componente puse fără logică și un aspect generic. Type UI funcționează ca un server MCP și poate fi folosit cu instrumente precum Cursor, Claude, Lovable sau v0, astfel încât modelul să nu mai genereze UI doar dintr-un prompt, ci pe baza unui sistem de design.
În tutorial arăt cum folosesc Type UI împreună cu Cursor pentru a construi un landing page SaaS și un dashboard pentru utilizatori. Ideea este simplă: alegi un design system, îl aduci în workspace, iar Cursor primește fișiere Markdown cu reguli pentru culori, tipografie, spacing, butoane, formulare, carduri și layout. Aceste reguli funcționează ca un ghid pentru modelul AI, ca să păstreze aceeași direcție vizuală pe toate paginile.
Pasul 1: instalez Type UI în Cursor
Primul pas este să intri pe TypeUI.sh și să mergi în documentația pentru Cursor. Instalarea se face prin integrarea MCP, iar după autentificare Cursor poate accesa resursele din workspace-ul Type UI. În exemplul meu verific întâi dacă sunt logat în MCP, apoi îi cer lui Cursor să folosească sistemul de design ales pentru proiect.
În platformă ai acces la design skills și prompturi gândite pentru interfețe web, aplicații, magazine și landing page-uri. Le-am structurat astfel încât AI-ul să primească nu doar o cerință generală, ci și direcții despre poziționarea elementelor, ierarhie vizuală, conversie și consistență.
Pasul 2: aleg design system-ul Paper
Pentru demonstrație folosesc tema Paper, un stil minimalist, cu tonuri gri și o structură potrivită pentru produse SaaS. Când aleg acest design skill, Type UI îl copiază în workspace-ul meu și îl transformă într-un design system pe care îl pot folosi în proiect. De aici pot adăuga logo, pot redenumi proiectul și pot lucra cu fișierele Markdown care definesc componentele.
Pasul 3: generez landing page-ul și dashboard-ul
În Cursor cer un landing page pentru un produs SaaS și un dashboard unde utilizatorii își pot vedea descărcările digitale, zona de billing și setările contului. Type UI trimite către Cursor regulile din design system, iar modelul începe să construiască interfața pe baza lor. În demonstrație se generează o pagină de prezentare cu hero section, navigație și zone de funcționalități, apoi un dashboard cu descărcări digitale, plan curent, metodă de plată și istoric de facturi.
Type UI nu elimină complet verificarea manuală. În tutorial apar câteva elemente care trebuie ajustate, mai ales switch-uri și butoane din pagina de setări. Diferența este că nu mai refaci totul de la zero: îi ceri lui Cursor să corecteze poziționarea, iar interfața rămâne în același stil vizual.
Preț și acces
Type UI este un produs plătit. Abonamentul costă 30 USD pe lună sau 120 USD pe an, iar varianta anuală este mai avantajoasă dacă îl folosești constant. În abonament sunt incluse design skills, prompturi, gestionarea propriilor design systems, generarea de layout-uri multiple și compatibilitatea cu mai multe instrumente AI.
Lucrăm în continuare la îmbunătățirea specificațiilor Markdown, la prompturi noi și la algoritmul MCP. Există și o comunitate privată pe Discord, unde primim feedback direct de la utilizatori. În plus, dezvoltăm o aplicație desktop pentru macOS, iar tutorialul video poate fi urmărit aici.
