AI UI Designer Logo
AI UI Designer

Få styr på siden, før du bygger den

En gratis UI-designskill til Codex og Claude Code

Omsæt sidens krav til en statisk SVG-wireframe. Vurder felter, indhold og hovedhandling, og arbejd derefter med det visuelle udtryk sammen med din kodeassistent. Du behøver ikke en betalt scenepakke.

Download uden login. Resultatet er statisk SVG; adgang til assistent og modelbrug er separat.

Fra krav til et layout, du kan vurdere

Placér først indhold og handlinger. Justér derefter skrifter, farver og luft.

SVG-wireframe med produktfelter, størrelser, hovedknap og fire resultatkort
02 Gennemgå wireframen
Farvelagt SVG-design med violette betjeningselementer og plakater af flaskeprodukter
03 Tilpas UI-designet

Samme opbygning fra wireframe til design

Eksemplet viser et værktøj til produktplakater uden en betalt pakke. Felter, formatvalg og resultater går igen i begge SVG-filer, som du kan åbne og sammenligne.

01 Beskriv sidens opgave

Brug skillen ai-ui-designer.
Design et værktøj til produktplakater med produktnavn, salgsargumenter, størrelsesvalg, genereringsknap og resultatgitter.

Fortæl, hvad brugeren skal kunne gøre.

02 Gennemgå wireframen

SVG-wireframe med produktfelter, størrelser, hovedknap og fire resultatkort
Kontrollér felterne, hovedhandlingen og pladsen til resultater.
Åbn SVG

03 Tilpas UI-designet

Farvelagt SVG-design med violette betjeningselementer og plakater af flaskeprodukter
Behold den godkendte struktur, mens du justerer typografi, afstande og farver.
Åbn SVG

Installér og lav din første wireframe

Hent og udpak ZIP-filen. Læg mappen ai-ui-designer i skill-mappen i dit eksisterende Codex- eller Claude Code-miljø.

  1. 1.Placér filerne korrekt

    SKILL.md skal ligge direkte i ai-ui-designer. Downloaden indeholder designinstruktioner, referencer og hjælpescripts.

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

    Tjek, at udpakningen ikke har tilføjet et ekstra mappeniveau.

  2. 2.Angiv målgruppe og hovedhandling

    Kald skillen i assistenten, og beskriv siden og det nødvendige indhold.

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

Design en SVG-wireframe til min produktforside med værditilbud, funktioner og tilmelding.

  3. 3.Åbn SVG-filen og bed om ændringer

    Se filen i en browser eller SVG-fremviser. Bed om konkrete rettelser, fx tydeligere overskrifter eller mere luft ved hovedknappen.

    Kan du ikke se skillen? Tjek sti og SKILL.md. Codex registrerer ændringer automatisk; genstart om nødvendigt. I Claude Code skal du se i /-menuen.

Du skal have egen assistent og modeladgang. Lokale pakkehjælpere kræver Python 3.9 eller nyere. Download af valgfrie pakker fra hjemmesiden kræver et aktivt betalt abonnement.

Tag designbeslutninger i etaper

Afklar informationshierarkiet

Fordel indholdsblokke, formularfelter og handlinger i en wireframe i gråtoner.

Arbejd med det visuelle udtryk

Tilpas typografi, afstande, farver og billeder på den godkendte opbygning.

Fortsæt på samme design

Gem SVG-filerne i projektet, og giv konkrete ændringsønsker, når kravene bliver klarere.

Det får du med gratis

Start med dine egne krav

Skillen omfatter wireframes, UI-design i farver, anvendelse af temaer og lokal pakkehåndtering.

Scenepakker er valgfrie designreferencer. Du kan bruge det gratis forløb uden dem.

Statiske oplæg til gennemgang

Resultatet er SVG-filer og designvejledning. Tegnede knapper udfører ikke login, betaling eller billedgenerering.

Applikationen kræver en særskilt udviklingsopgave. Assistentens tilgængelighed og modelpris følger det enkelte værktøjs vilkår.

Før du går i gang

Kræver det abonnement eller en pakke?
Skillen kan hentes gratis og bruges med dine egne krav. Kun download af valgfrie scenepakker fra denne hjemmeside kræver et aktivt betalt abonnement.
Hvordan kalder jeg den i de to assistenter?
Efter installation i den rigtige mappe bruger du $ai-ui-designer i Codex eller /ai-ui-designer i Claude Code og beskriver opgaven.
Får jeg en fungerende app?
Forløbet laver statiske SVG-wireframes og UI-design. Appkode, backend og faktiske interaktioner kræver separat implementering.
Hvorfor vises skillen ikke?
Tjek stien, og at SKILL.md ligger direkte i ai-ui-designer. Genstart Codex om nødvendigt; søg efter /ai-ui-designer i Claude Code.

Giv din næste side en tydelig struktur

Installér den gratis UI-designskill, og gør krav til et SVG-layout, du kan gennemgå og forbedre før udviklingen.

Hent skill gratisTilbage til installation