AI UI Designer Logo
AI UI Designer

Maak je schermindeling duidelijk vóór de bouw

Een gratis UI-designskill voor Codex en Claude Code

Je weet wat de pagina moet doen, maar nog niet hoe alles past? Zet je eisen om in een statisch SVG-wireframe. Beoordeel de indeling en werk daarna de vormgeving uit met je coding-assistent, zonder betaald scenariopakket.

Download zonder inloggen. Statische SVG-uitvoer; je assistent en modelgebruik staan hier los van.

Van eisen naar een indeling die je kunt beoordelen

Bepaal eerst de velden en hoofdactie. Verfijn daarna tekst, kleur en witruimte.

SVG-wireframe met productvelden, formaatkeuze, genereerknop en vier resultaatkaarten
02 Beoordeel het wireframe
Gekleurd SVG-ontwerp met paarse bedieningselementen en posters van flessen
03 Verfijn het UI-ontwerp

Dezelfde pagina als wireframe en visueel ontwerp

Deze productpostertool laat de gratis werkwijze zien. Velden, formaatkeuze en resultaten blijven herkenbaar in beide SVG-bestanden. Je kunt ze openen zonder betaald pakket.

01 Beschrijf de taak

Gebruik de skill ai-ui-designer.
Ontwerp een productpostertool met productnaam, verkoopargumenten, formaatkeuze, een genereerknop en een resultatenraster.

Leg uit wat de gebruiker moet kunnen doen.

02 Beoordeel het wireframe

SVG-wireframe met productvelden, formaatkeuze, genereerknop en vier resultaatkaarten
Controleer de invoer, hoofdactie en ruimte voor resultaten.
SVG openen

03 Verfijn het UI-ontwerp

Gekleurd SVG-ontwerp met paarse bedieningselementen en posters van flessen
Behoud de afgesproken structuur en pas lettertypen, afstanden en kleuren aan.
SVG openen

Installeer de skill en maak je eerste wireframe

Download en pak de ZIP uit. Zet de map ai-ui-designer in de skillmap van je bestaande Codex- of Claude Code-omgeving.

  1. 1.Zet de bestanden op de juiste plek

    SKILL.md moet direct in ai-ui-designer staan. De download bevat ontwerpinstructies, referenties en hulpscripts.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    Controleer of bij het uitpakken geen extra maplaag is ontstaan.

  2. 2.Geef doel en hoofdactie aan

    Roep de skill aan en beschrijf de pagina, doelgroep en gewenste actie.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Ontwerp een SVG-wireframe voor mijn producthomepage met waardepropositie, functies en een aanmeldactie.

  3. 3.Open het SVG-bestand en geef feedback

    Bekijk het in een browser of SVG-viewer. Vraag gericht om duidelijkere koppen of meer ruimte rond de hoofdknop.

    Niet zichtbaar? Controleer pad en SKILL.md. Codex herkent wijzigingen automatisch; herstart indien nodig. Bekijk in Claude Code het /-menu.

Je hebt een eigen assistent en modeltoegang nodig. Lokale pakketscripts vereisen Python 3.9 of nieuwer. Voor optionele pakketdownloads op deze site is een actief betaald abonnement nodig.

Neem ontwerpbeslissingen in stappen

Begin bij de informatie

Orden inhoudsblokken, velden en acties in een grijs wireframe.

Werk de vormgeving uit

Verfijn typografie, afstanden, kleuren en beelden op de goedgekeurde indeling.

Bouw voort op hetzelfde ontwerp

Bewaar de SVG-bestanden in je project en geef concrete wijzigingsverzoeken door.

Wat zit er in de gratis download?

Start met je eigen eisen

De skill ondersteunt wireframes, gekleurde UI-ontwerpen, thema’s toepassen en lokaal pakketbeheer.

Scenariopakketten zijn optionele ontwerpreferenties; ze zijn niet nodig om te beginnen.

Statische ontwerpen om te bespreken

Je krijgt SVG-bestanden en ontwerprichtlijnen. Getekende knoppen voeren geen login, betaling of beeldgeneratie uit.

De toepassing bouw je in een afzonderlijke ontwikkeltaak. Beschikbaarheid en modelkosten volgen de voorwaarden van je assistent.

Voor je begint

Heb ik een abonnement of pakket nodig?
De skill is gratis te downloaden en werkt met je eigen eisen. Alleen optionele scenariopakketten van deze website vereisen een actief betaald abonnement voor de download.
Hoe gebruik ik de skill in beide tools?
Installeer in de juiste map en gebruik $ai-ui-designer in Codex of /ai-ui-designer in Claude Code. Beschrijf daarna je ontwerptaak.
Krijg ik een werkende app?
Deze werkwijze levert statische SVG-wireframes en UI-ontwerpen. Applicatiecode, backend en werkende interacties vragen om een aparte implementatie.
Waarom vindt mijn assistent de skill niet?
Controleer de map en of SKILL.md direct in ai-ui-designer staat. Herstart Codex zo nodig; zoek in Claude Code naar /ai-ui-designer.

Geef je volgende pagina een duidelijke indeling

Installeer de gratis UI-designskill en zet je eisen om in een SVG-ontwerp dat je vóór de bouw kunt beoordelen en verfijnen.

Skill gratis downloadenTerug naar installatie