Vibe code din fotografportfolio

01Så här skiljer det sig från en mallväljare

Mallgallerier visar en färdig design och ber dig tycka om den eller inte. Det här verktyget går ett lager djupare: var och en av de sex riktningarna nedan bygger på en riktig, fungerande fotografportfolio som verkligen undersöktes (skärmbilder, live-layout, beräknade färger, beräknade typsnitt), inte en palett som någon hittat på för att den ser fin ut som färgprov. Riktningen Editorial använder till exempel EB Garamond, eftersom det bokstavligen är typsnittet som en verklig modefotografs webbplats är satt i, matchat genom att undersöka sidan direkt.

Två mönster dök upp nästan överallt på de riktiga webbplatser som det här bygger på, och de finns inbakade i varje riktning här: navigationen gömd bakom en enda hamburgarikon utan synlig länklista, även på dator, och en stor bild i taget i stället för ett rutnät. Gränssnittets färg hålls nära noll hela vägen: fotografierna står för färgen, inte gränssnittet.

02Det här får du i slutändan

En enda strukturerad prompt som täcker den övergripande riktningen, exakta hexfärger, typsnittsnamn och kombination, sidlista, navigationsbeteende, gallerilayout och bildinramning, vilka funktioner som ska med, en rekommendation om webbhotell med verkliga kostnadsavvägningar och en fast uppsättning krav på byggkvalitet (tillgänglig alt-text, responsiva brytpunkter, inga hårdkodade hemligheter, bilder som laddas lat). Klistra in den i din AI-kodapp och den har allt den behöver för att börja.

03Från prompt till live-sajt: hela genomgången

Prompten är designunderlaget, inte mållinjen. Här är varje steg mellan att kopiera den och att ha en riktig webbadress du kan sätta på ett visitkort, gratis eller nästan.

Kopiera prompten och öppna en AI-kodapp

Claude, Cursor, Claude Code, Windsurf eller Replits AI-agent fungerar alla, vilken som helst som kan skriva och spara filer åt dig, inte bara chatta. Om du aldrig använt en, kräver ett webbläsarbaserat alternativ som claude.ai eller Replit ingen installation: klistra in prompten som ditt första meddelande.

Låt den bygga, titta sedan på vad den gjort

Be den bygga sajten som statisk HTML/CSS/JS (eller vad webbhotellsdelen av prompten angav) och visa en förhandsvisning. Kontrollera de sex sakerna som prompten bad om (färger, typsnitt, galleriets beteende, navigation, inramning, sidor) innan du går vidare. Det är mycket billigare att rätta en felaktig accentfärg nu än när bilderna väl är inkopplade.

Byt in dina riktiga bilder, din biografi och dina kontaktuppgifter

Byt ut varje platshållarbild och varje rad utfyllnadstext. Be din AI-app skriva ett riktigt, specifikt alt-attribut för varje bild medan den jobbar, inte ”image1.jpg” utan en faktisk beskrivning, eftersom det både är ett tillgänglighetskrav och en liten SEO-vinst. Det här är också läget att dubbelkolla att kontaktformuläret verkligen pekar på en e-postadress du läser.

Publicera det på ett gratis webbhotell

Om du valde nivån ”Statisk & gratis”, be din AI-app guida dig genom att koppla projektets mapp eller GitHub-repo till ett av webbhotellen på sidan Hosting i menyn ovan. Alla fyra bygger och publicerar automatiskt varje gång du skickar upp en ändring; inget manuellt uppladdningssteg när det väl är anslutet.

Koppla en egen domän (valfritt, men värt det)

En gratis underdomän (som yourname.netlify.app) fungerar bra till att börja med. När du är redo för yourname.com handlar det om ett domänköp plus en DNS-ändring, vilket beskrivs i detalj längre ned.

04Vilket gratis webbhotell ska du använda?

Vilket som helst av dessa får en statisk sajt live utan kostnad, med gratis HTTPS och en gratisnivå som lätt räcker för en privat portfolios trafik. Gränserna i gratisnivåerna ändras ganska ofta, så se siffrorna på sidan Hosting som en allmän bild snarare än exakta aktuella värden, och kontrollera varje leverantörs egen prissida innan du bestämmer dig.

Be din AI-kodapp göra själva publiceringsstegen tillsammans med dig: ”koppla det här projektet till Netlify” är en helt normal sak att be om, och den kan oftast guida dig genom kontoskapandet och den första publiceringen på ett par minuter.

05Koppla en egen domän

En domän är en liten årsavgift (vanligtvis $10 till 20 per år beroende på ändelse), skild från webbhotellet, som förblir gratis. De tre delarna:

1. Köp domänen. Namecheap, Cloudflare Registrar eller efterträdaren till Google Domains (Squarespace Domains).
2. Lägg till en DNS-post. En CNAME (eller A-post) som pekar din domän mot ditt webbhotell, tillagd i registrarens adminpanel. Det är två rader i registrarens tabell: en CNAME för www som pekar på adressen ditt webbhotell ger dig, till exempel your-portfolio.netlify.app, och en A-post för själva domänen som pekar på webbhotellets IP.
3. Lägg till den hos ditt webbhotell. Klistra in samma domän i webbhotellets inställningar för ”egen domän”; HTTPS ordnar sig självt.

Varje webbhotell på sidan Hosting har en flik ”Custom domain” eller ”Domains” som ger dig exakt vilken post som ska läggas till: kopiera in den, lägg till den hos din registrar och vänta. DNS-ändringar tar vanligtvis från några minuter till några timmar, ibland upp till 24 till 48 timmar. Din AI-kodapp kan guida dig genom just din registrars adminpanel om du kör fast; ta en skärmbild av inställningssidan och fråga vad du ska klicka på. Hänglås syns, ingen varning om ”inte säker”: det är mållinjen.

06Checklista inför lansering

Fem minuter med den här listan fångar det mesta som får en portfolio att se ofärdig ut. Kontrollerna finns på sidan Before launch i menyn ovan; bocka av dem allteftersom.

07Vanliga frågor