AI UI Designer Logo
AI UI Designer

Avklar skjermbildet før utviklingen starter

En gratis UI-designskill for Codex og Claude Code

Gjør kravene dine om til en statisk SVG-wireframe. Vurder innhold, felter og hovedhandling før du finpusser utseendet med kodeassistenten. Du kan starte uten en betalt scenepakke.

Nedlasting uten innlogging. Statiske SVG-filer; assistent og modellbruk kommer separat.

Fra krav til et utkast du kan vurdere

Avklar først plasseringen av innhold og handlinger. Juster deretter skrift, luft og farger.

SVG-wireframe med produktfelt, størrelser, hovedknapp og fire resultatkort
02 Gå gjennom wireframen
Fargelagt SVG-utkast med lilla kontroller og plakater med flaskeprodukter
03 Finpuss UI-designet

Fra grov struktur til visuelt utkast

Eksemplet med produktplakater viser den gratis arbeidsflyten uten betalt pakke. Begge SVG-ene har de samme feltene, størrelsesvalgene og resultatene. Åpne dem og sammenlign.

01 Beskriv hva siden skal gjøre

Bruk skillen ai-ui-designer.
Design et verktøy for produktplakater med produktnavn, salgsargumenter, størrelsesvalg, generer-knapp og rutenett med resultater.

Oppgi brukerens oppgave og nødvendige felt.

02 Gå gjennom wireframen

SVG-wireframe med produktfelt, størrelser, hovedknapp og fire resultatkort
Kontroller feltene, hovedhandlingen og plassen til resultatene.
Åpne SVG

03 Finpuss UI-designet

Fargelagt SVG-utkast med lilla kontroller og plakater med flaskeprodukter
Behold den godkjente strukturen mens du tilpasser typografi, avstander og farger.
Åpne SVG

Installer og lag din første wireframe

Last ned og pakk ut ZIP-filen. Legg mappen ai-ui-designer i skills-mappen i ditt eksisterende Codex- eller Claude Code-miljø.

  1. 1.Plasser filene riktig

    SKILL.md må ligge direkte i ai-ui-designer. Nedlastingen inneholder designinstruksjoner, referanser og hjelpeskript.

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

    Sjekk at utpakkingen ikke har lagt til et ekstra mappenivå.

  2. 2.Beskriv målgruppe og hovedhandling

    Kall opp skillen i assistenten og forklar siden og det nødvendige innholdet.

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

Lag en SVG-wireframe for produktforsiden min med verdiforslag, funksjoner og registrering.

  3. 3.Åpne SVG-en og be om endringer

    Bruk en nettleser eller SVG-viser. Be om konkrete rettelser, for eksempel tydeligere overskrifter eller mer luft rundt hovedknappen.

    Vises ikke skillen? Sjekk sti og SKILL.md. Codex oppdager endringer automatisk; start på nytt ved behov. I Claude Code ser du i /-menyen.

Du trenger egen assistent og tilgang til modeller. Lokale pakkeskript krever Python 3.9 eller nyere. Nedlasting av valgfrie pakker fra nettstedet krever et aktivt betalt abonnement.

Ta designvalg trinn for trinn

Sorter informasjonen først

Plasser innholdsblokker, skjemafelt og handlinger i en wireframe i gråtoner.

Utform det visuelle uttrykket

Juster typografi, avstander, farger og bilder på den avklarte strukturen.

Jobb videre med samme utkast

Behold SVG-filene i prosjektet og gi konkrete tilbakemeldinger når kravene blir tydeligere.

Dette følger med gratis

Start med dine egne krav

Skillen omfatter wireframes, UI-design i farger, bruk av temaer og lokal pakkehåndtering.

Scenepakker er valgfrie designreferanser. De er ikke nødvendige for å komme i gang.

Statiske utkast til gjennomgang

Resultatet er SVG-filer og designveiledning. Tegnede knapper utfører ikke innlogging, betaling eller bildegenerering.

Applikasjonen krever en separat utviklingsoppgave. Assistentens tilgjengelighet og modellkostnader følger vilkårene til hvert verktøy.

Før du begynner

Trenger jeg abonnement eller scenepakke?
Skillen er gratis å laste ned og bruker dine egne krav. Bare nedlasting av valgfrie pakker fra dette nettstedet krever et aktivt betalt abonnement.
Hvordan bruker jeg den i begge assistentene?
Installer i riktig mappe og bruk $ai-ui-designer i Codex eller /ai-ui-designer i Claude Code. Beskriv deretter designoppgaven.
Blir resultatet en fungerende app?
Arbeidsflyten lager statiske SVG-wireframes og UI-utkast. Appkode, backend og ekte interaksjoner må implementeres separat.
Hvorfor finner ikke assistenten skillen?
Kontroller stien og at SKILL.md ligger direkte i ai-ui-designer. Start Codex på nytt ved behov; se etter /ai-ui-designer i Claude Code.

Gi den neste siden en tydelig struktur

Installer den gratis UI-designskillen og gjør kravene om til et SVG-oppsett du kan vurdere og forbedre før utviklingen.

Last ned gratis skillTilbake til installasjonen