SVG-bronbestanden om aan te passen
Bewerk tekst, vormen en indeling. Bewaar het oorspronkelijke pakket als referentie en voer wijzigingen uit in een werkkopie.
Schermontwerp voor AI-beeldendiensten · SVG-pakket
UI-kit voor AI-beelden: ontwerp ook wat er na de prompt gebeurt
Deze UI-kit helpt zelfstandige ontwikkelaars en productteams de schermen van een beeldendienst op elkaar af te stemmen. Bekijk genereren, afbeeldingen terugvinden en een abonnement kiezen als één gebruikersflow. Pas de SVG’s daarna aan met de gratis AI UI Designer Skill in Codex of Claude Code.
Inbegrepen bij een actief betaald abonnement. Er worden geen credits afgeschreven.
Statische SVG-ontwerpen · Chinese voorbeeldteksten · Geen applicatiecode
- Desktoppagina’s
- 6
- Kleurthema’s
- 2
- Mobiele referenties
- 2
- Bewerkbare bronnen
- SVG
Van startpagina naar genereren, terugzoeken en accountbeheer
Controleer vóór het downloaden welke schermen je kunt gebruiken. Elke desktoppagina heeft een wireframe in grijstinten en een licht en donker ontwerp, zodat je zowel de hiërarchie als de vormgeving kunt bekijken.
Startpagina
Plan de productuitleg, voorbeeldbeelden en de ingang naar genereren.
Inloggen en registreren
Bekijk de inlogvelden en raadpleeg registratie en foutmeldingen op het statusbord.
Generatiescherm
Orden prompt, model, beeldverhouding, aantal, creditkosten en resultaten.
Afbeeldingsgeschiedenis
Bekijk zoeken, details, parameters hergebruiken en verwijderen bevestigen.
Abonnementen en credits
Raadpleeg het saldo, voorbeeldabonnementen en ontwerpen voor aankoopresultaten.
Accountinstellingen
Bepaal de plaats van profielvelden, opslagbevestiging en uitloggen.
De previews tonen de Chinese voorbeeldteksten uit het pakket en fictieve productgegevens. Knoppen, formulieren en aankoopschermen zijn statische ontwerpen.
Neem lege schermen en foutmeldingen mee in je ontwerp
Het ZIP-bestand bundelt schermen, componenten en scenariobeschrijvingen. Zo kun je een aanpassing vergelijken met de overige pagina’s van je dienst.
Eerst de structuur, dan het thema
Bij de schermen horen 2 JSON-bestanden voor kleurthema’s. Beoordeel de informatiehiërarchie in grijstinten en kies daarna een licht of donker ontwerp.
Componenten en belangrijke statussen
Raadpleeg knoppen, velden, keuzelijsten, kaarten en dialoogvensters, plus statussen voor lopende generatie, lege geschiedenis, te weinig credits, inlogfouten en mislukte betalingen.
Mobiele referenties met een duidelijke grens
Genereren en geschiedenis zijn getekend op 390px breedte. Voor de overige pagina’s beschrijft het scenario het mobiele gedrag; aparte mobiele tekeningen zijn niet inbegrepen.
Importeer het pakket en maak je wijzigingen concreet
Importeren kan met de gratis Skill. De hulpscripts vereisen Python 3.9 of nieuwer.
- 1
Download het ZIP-bestand met je abonnement
Log in met een actief betaald AI UI Designer-abonnement. Het downloaden van het pakket verbruikt geen generatiecredits.
- 2
Geef de Skill het lokale bestandspad
Installeer AI UI Designer Skill in Codex of Claude Code. Geef het lokale pad van het ZIP-bestand door en vraag de assistent het te importeren.
- 3
Pas aan en controleer het SVG-resultaat
Kies een thema en beschrijf de velden en indeling die je nodig hebt. Bekijk het resultaat en werk verder in een kopie, met behoud van de bronbestanden.
Voorbeeldopdracht: productbeelden voor een webshop
Gebruik het lichte thema van het beeldgeneratiepakket voor een scherm waarmee een webshop productbeelden kan laten maken. Neem productnaam, beeldbeschrijving en een keuze voor beeldverhouding op. Behoud de uitleg over creditkosten en de resultaatkaarten. Lever een bewerkbaar SVG-ontwerp.
Ontwerpen vanuit je eigen eisen of vanuit bestaande schermen?
De gratis Skill ondersteunt ontwerpen op basis van je eisen, pakketten importeren en thema’s toepassen. Voor het downloaden van deze schermenset op de website heb je een actief betaald abonnement nodig.
- Ontwerpen vanuit je eigen eisen
- Gratis Skill · Gratis
- Pakketten importeren en thema’s toepassen
- Gratis Skill · Gratis
- Deze schermenset downloaden
- Scènepakket · Actief betaald abonnement
- Gedownloade bestanden lokaal gebruiken
- Scènepakket · Ook na afloop van je abonnement
FAQ
Bestanden, taal en voorwaarden voor downloaden
Bekijk wat de ontwerpset biedt en welke onderdelen je zelf moet ontwikkelen.
Bekijk de schermen en werk je eigen product verder uit
Controleer in de UI-kit hoe genereren, geschiedenis en abonnementen op elkaar aansluiten. Past de opzet bij je product, download dan de SVG’s met je actieve betaalde abonnement en pas ze aan met de gratis Skill.
Download de SVG-ontwerpenInbegrepen bij een actief betaald abonnement. Er worden geen credits afgeschreven.