SVG-kilder du kan bearbeide
Endre tekst, former og plassering. Behold originalpakken som referanse, og gjør tilpasningene i en arbeidskopi.
Skjermskisser for AI-bildetjenester · SVG-pakke
UI-design for AI-bilder: planlegg brukerflyten før utviklingen
UI-design for deg som utvikler en bildetjeneste og trenger å se hvordan skjermene henger sammen. Gå fra prompt og bilderesultat til historikk, abonnement og konto. Bruk SVG-skissene som utgangspunkt, og tilpass tekst, oppsett og tema med gratis AI UI Designer Skill i Codex eller Claude Code.
Inkludert i et aktivt betalt abonnement. Ingen kreditter trekkes.
Statiske SVG-skisser · Kinesiske eksempeltekster · Ingen applikasjonskode
- Sider for datamaskin
- 6
- Fargetemaer
- 2
- Mobilreferanser
- 2
- Redigerbare kildefiler
- SVG
Se sammenhengen mellom generering, historikk og konto
Vurder skjermene før du velger pakken. Hver side for datamaskin er tegnet som en wireframe i gråtoner og som et lyst og mørkt design, slik at du kan undersøke både struktur og uttrykk.
Forside
Planlegg presentasjon av tjenesten, bildeeksempler og inngang til generering.
Innlogging og registrering
Se innloggingsfeltene og vurder registrering og feilmeldinger på tilstandstavlen.
Bildegenerering
Plasser prompt, modell, sideforhold, antall, kredittkostnad og resultater.
Bildehistorikk
Vurder søk, bildedetaljer, gjenbruk av parametre og bekreftelse ved sletting.
Abonnementer og kreditter
Se saldo, eksempelabonnementer og skisser av kjøpsresultater.
Kontoinnstillinger
Planlegg profilredigering, lagringsbeskjed og utlogging.
Forhåndsvisningene viser kinesiske eksempeltekster og fiktive produktdata. Knapper, skjemaer og kjøpsskjermer er statiske skisser.
Planlegg også det brukeren ser når noe mangler
ZIP-filen samler sider, komponenter og scenariobeskrivelser. Bruk dem til å sammenligne endringer og holde flyten gjennom tjenesten oversiktlig.
Struktur først, farger etterpå
Pakken har 2 JSON-filer med fargetemaer. Undersøk informasjonshierarkiet i wireframene før du velger et lyst eller mørkt uttrykk.
Komponenter og viktige tilstander
Se knapper, felter, velgere, kort og dialoger, samt pågående generering, tom historikk, for få kreditter, innloggingsfeil og mislykket betaling.
Tydelig avgrensede mobilreferanser
Genereringssiden og historikken er tegnet i 390px bredde. For de andre sidene beskriver scenariet mobilatferden; egne mobiltegninger følger ikke med.
Importer pakken og beskriv hva du vil endre
Bruk gratis Skill til importen. Hjelpeskriptene krever Python 3.9 eller nyere.
- 1
Last ned ZIP-filen med abonnementet ditt
Logg inn med et aktivt betalt AI UI Designer-abonnement. Nedlasting av pakken bruker ingen genereringskreditter.
- 2
Oppgi den lokale filstien
Installer AI UI Designer Skill i Codex eller Claude Code. Gi assistenten stien til ZIP-filen og be den importere pakken.
- 3
Tilpass og kontroller skissene
Velg tema og beskriv ønskede felter og oppsett. Se gjennom SVG-resultatet og jobb videre i arbeidskopien, med originalene bevart.
Eksempel: produktbilder til en nettbutikk
Bruk det lyse temaet i bildegenereringspakken til å designe en arbeidsflate for produktbilder. Legg inn produktnavn, bildebeskrivelse og valg av sideforhold. Behold opplysningen om kredittforbruk og resultatkortene. Lever skissen som redigerbar SVG.
Begynne med egne krav eller bruke skjermskisser?
Gratis Skill kan designe ut fra kravene dine, importere pakker og bruke temaer. Du trenger et aktivt betalt abonnement for å laste ned dette sidesettet fra nettstedet.
- Design fra egne krav
- Gratis Skill · Gratis
- Importer pakker og bruk temaer
- Gratis Skill · Gratis
- Last ned dette sidesettet
- Scenepakke · Aktivt betalt abonnement
- Bruk nedlastede filer lokalt
- Scenepakke · Også etter at abonnementet slutter
FAQ
Hva følger med, og hva må du utvikle selv?
Avklar filinnhold, språk og nedlastingsvilkår før du velger pakken.
Se om brukerflyten passer før du tilpasser sidene
Vurder UI-design for generering, historikk og abonnement i forhåndsvisningene. Last ned SVG-pakken med et aktivt betalt abonnement, og bruk gratis Skill til å tilpasse den til produktet ditt.
Last ned SVG-skisseneInkludert i et aktivt betalt abonnement. Ingen kreditter trekkes.