AI UI Designer Logo
AI UI Designer

Design af AI-billedtjenester · SVG-pakke

UI-kit til AI-billeder: få overblik over siderne før du bygger

Et UI-kit til udviklere og produktteams, der vil planlægge en billedtjeneste fra prompt til historik og abonnement. Se på hele forløbet, før du vælger felter og layout. Tilpas derefter SVG-skitserne med den gratis AI UI Designer Skill i Codex eller Claude Code.

Inkluderet i et aktivt betalt abonnement. Der trækkes ingen kreditter.

Se alle skærmskitser

Statiske SVG-skitser · Kinesiske eksempeltekster · Ingen programkode

Lys skitse af genereringssiden med promptfelt, billedindstillinger og resultatkort
Genereringsside fra pakken · Lyst tema
Sider til computer
6
Farvetemaer
2
Mobilreferencer
2
Redigerbare kildefiler
SVG

Kan brugeren finde videre efter det første billede?

Gennemgå opbygningen af forsiden, billedgenerering, historik og konto, inden du henter pakken. Hver side til computer har en wireframe i gråtoner samt en lys og en mørk udgave.

Lys forsideskitse med produktintroduktion, billedgalleri og brugstrin

Forside

Planlæg produktbeskrivelse, eksempelbilleder og indgangen til generering.

Skitse af login med formularfelter og vejledning til registrering

Login og registrering

Gennemgå loginfelterne, og se registrering og fejlbeskeder på tilstandstavlen.

Genereringsskitse med promptfelt, parametre og kort med billeder

Billedgenerering

Placér prompt, model, billedformat, antal, kreditforbrug og resultater.

Historikskitse med søgefelt, billedkort og detaljer for det valgte billede

Billedhistorik

Undersøg søgning, billeddetaljer, genbrug af parametre og bekræftelse af sletning.

Lys skitse med kreditsaldo og tre fiktive abonnementer

Abonnementer og kreditter

Se saldo, eksempelabonnementer og design af købsresultater.

Kontoskitse med profilformular og tilbagemelding efter gemning

Kontoindstillinger

Planlæg profilfelter, besked efter gemning og log ud.

Forhåndsvisningerne har kinesiske eksempeltekster og fiktive produktdata. Knapper, formularer og købsskærme er statiske design.

Sider og beskeder skal hænge sammen

ZIP-filen samler skærmskitser, komponenter og scenarieanvisninger, så du kan sammenholde ændringer på tværs af tjenesten.

SVG-filer med redigerbar tekst og layout

Tilpas tekst, former og placering til dit produkt. Bevar originalerne, og lav dine ændringer i en arbejdskopi.

Vurdér strukturen før farverne

Der følger 2 JSON-filer med farvetemaer med. Brug wireframes til at kontrollere informationshierarkiet, og vælg derefter et lyst eller mørkt udtryk.

Også tomme sider og fejl

Se knapper, felter, vælgere, kort og dialoger samt tilstande for igangværende generering, tom historik, manglende kreditter, loginfejl og mislykket betaling.

Et afgrænset sæt mobilreferencer

Genereringssiden og historikken er tegnet i 390px bredde. For de øvrige sider beskriver scenariet mobiladfærden; der er ingen særskilte mobiltegninger.

Hent pakken, importér den, og beskriv dine ændringer

Brug den gratis Skill til importen. Hjælpescripts kræver Python 3.9 eller nyere.

  1. 1

    Hent ZIP-filen med dit abonnement

    Log ind med et aktivt betalt AI UI Designer-abonnement. Download af pakken bruger ingen genereringskreditter.

  2. 2

    Giv assistenten stien til filen

    Installér AI UI Designer Skill i Codex eller Claude Code. Angiv ZIP-filens lokale sti, og bed assistenten om at importere den.

  3. 3

    Tilpas og gennemgå SVG-skitserne

    Vælg tema, og beskriv felter og layout. Kontrollér resultatet, og arbejd videre i en kopi, mens de oprindelige ressourcer bevares.

Eksempel: en arbejdsflade til produktbilleder

Brug billedgenereringspakkens lyse tema til en arbejdsflade til produktbilleder. Tilføj felter til produktnavn og billedbeskrivelse samt valg af billedformat. Bevar oplysningen om kreditforbrug og kortene med resultater. Levér et redigerbart SVG-design.

Har du brug for en designproces eller et sæt skærme?

Den gratis Skill kan designe ud fra dine krav, importere pakker og anvende temaer. Et aktivt betalt abonnement er nødvendigt for at hente dette skærmsæt fra hjemmesiden.

Design fra egne krav
Gratis Skill · Gratis
Importér pakker og anvend temaer
Gratis Skill · Gratis
Hent dette sæt sider
Scenepakke · Aktivt betalt abonnement
Brug hentede filer lokalt
Scenepakke · Også efter abonnementets ophør
FAQ

Filer, indhold og adgang til download

Afklar hvad pakken indeholder, og hvad der skal udvikles særskilt.

Vurdér siderne, og gør dem til en del af dit eget design

Se skærmene i dette UI-kit: generering, historik og abonnement. Passer forløbet til dit produkt, kan du hente SVG-filerne med et aktivt betalt abonnement og tilpasse dem med den gratis Skill.

Hent SVG-designpakken

Inkluderet i et aktivt betalt abonnement. Der trækkes ingen kreditter.