a month ago

Certamente. Dato che Windframe è un generatore di UI basato su AI che utilizza Tailwind CSS, il modo migliore per ottenere un risultato fedele è fornirgli un "System Prompt" molto dettagliato che definisca prima lo stile globale (colori, font, layout mobile) e poi descriva i componenti specifici che abbiamo nel codice. Ecco il prompt ottimizzato. Copialo e incollalo nell'input AI di Windframe. Prompt per Windframe AI Copia e incolla questo blocco intero: Create a high-fidelity mobile-first UI for a library application called "Shelfone" using Tailwind CSS. Design System Rules: Layout: The app must look like a mobile view (max-w-md, mx-auto, min-h-screen, overflow-hidden). Colors: Use these exact hex codes: Primary Blue: #0088FF Light Blue: #80CFFE Background: #FCFCFD (Light Gray/White) Text: Dark Gray #324054 and Black. Borders: #E0E0E0 Shapes: Use heavy rounding. Buttons should be rounded-full. Cards and images should be rounded-2xl or rounded-[31px]. Typography: Clean sans-serif. Headings are bold/thick. Body is legible. Shadows: Use soft shadows (shadow-lg, shadow-xl) for depth on cards and the bottom navigation. Views to Generate (combine into a vertical scrollable preview): Part 1: The App Shell Create a main container with the #FCFCFD background. Header: A simple header with the text logo "shelf" (black) and "one." (blue #0088FF) on the left, and a small circular user avatar on the right. Bottom Navigation: A fixed bottom bar, white background, rounded-t-[31px], shadow-lg. It should have 5 icons evenly spaced: Home (active), Book, Search, Settings, and a floating Chat button (Message icon) in a blue square container (bg-[#0088FF], rounded-2xl) slightly raised above the bar. Part 2: Home Page Content Welcome Text: "Bentornato Luca," (medium) followed by "scopri le novità..." (small, gray). New Arrivals Grid: A generic 2-column grid. Inside each cell, place a placeholder book cover image (vertical rectangle, h-52, w-full, object-cover, rounded-2xl). Top 3 Section: A container with a light gray background (bg-[#FCFCFD] or slightly darker). Title: "Top 3 libri presi in prestito". Horizontal list of 3 book covers. Add small ranking badges on the top-left of these covers: #1 Gold (#AF9500), #2 Silver (#B4B4B4), #3 Bronze (#AD8A56). Part 3: Book Detail Card (Overlay or separate section) A detail view with a large Title "Il Piccolo Principe". Author Name below it. Publisher logo on the right. Action Button: A pill-shaped button on the right aligned: "prenotalo ora", background #0088FF, text white, rounded-full, shadow-lg. Content: Split view with the book cover on the left and a short description text on the right. Below that, a quote section in italic text. Part 4: Chat Interface (Mockup) A chat view with a header showing an "Helpdesk" user. Message bubbles: Incoming (Left): White background, rounded-2xl, rounded-tl-sm. Outgoing (Right): Blue background (#0088FF), white text, rounded-2xl, rounded-tr-sm. Bottom input field: White pill-shaped container with a "Messaggio..." placeholder and icon buttons.

Fork

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates