🚀 Vibe Coding Projektplan

Features

Færdige

0 kr

Månedlig

Fremgang

Tip: Planlæg dit vibe coding-projekt med features, tidsrammer og budget. Læs vibe coding-guiden for at komme i gang med AI-understøttet udvikling.

Projekt Setup

📝 Grundlæggende Info

Projektnavn

Beskrivelse

Mål

Deadline

Budget (kr)

Projekttype

🎯 Vibe Coding Overblik

Vibe Coding er en tilgang til softwareudvikling hvor du bruger AI-værktøjer som primære kodeassistenter. Denne planner hjælper dig med at strukturere dit projekt.

✓ Definer projektet klart

✓ Vælg den rigtige tech stack

✓ Brug AI prompts strategisk

✓ Track features og omkostninger

✓ Iterer hurtigt med feedback

📈 Fremgang

0 af 0 features færdige0%

🔄 AI-assisteret Workflow

Definer Projektet

Skriv en klar projektbeskrivelse til AI'en

          "Jeg bygger en [PROJEKTTYPE] til [MÅLGRUPPE]. Projektet skal [FUNKTION].

          Tech stack: [TECH]. Designstil: [STIL].

          Deadline: [DATO]. Budget: [BELØB]."

Vælg Tech Stack

Lad AI anbefale den optimale tech stack baseret på dine behov

          "Anbefal en tech stack til mit projekt. Jeg behøver: [FUNKTIONER].

          Jeg er fortrolig med [Erfaring]. Projektet skal [KRAV].

          Giv mig: Frontend, Backend, Database, Hosting."

Byg Grundstrukturen

Scaffolding og projektarkitektur

          "Byg grundstrukturen for mit [PROJEKTTYPE] projekt.

          Tech stack: [TECH]. Opret: mappestruktur, konfigurationsfiler,

          basis routing, database schema, og en tom forside.

          Brug [FRAMEWORK] bedste praksis."

Implementer Features

Byg feature for feature med AI-assistance

          "Implementer feature: [FEATURENAVN].

          Beskrivelse: [BESKRIVELSE].

          Den skal [FUNKTIONALITET]. Brug [KOMPONENT/KLASSE] mønster.

          Inkluder: UI komponent, logik, eventuelt API endpoint.

          Gør den responsive og tilgængelig."

Test og Debug

AI-assisteret debugging og kvalitetssikring

          "Der er en fejl: [FEJLBESKRIVELSE].

          Koden: [KODER/FEJLMEDDELSE].

          Forventet adfærd: [ØNSKET]. Faktisk adfærd: [NUVÆRENDE].

          Gennemgå koden, find årsagen, og giv mig en fix.

          Forklar også hvad der forårsagede fejlen."

Deploy

Klargør til produktion og deploy

Deployment Checklist:
□ Miljøvariabler sat korrekt
□ Database migreringer kørt
□ SSL certifikat installeret
□ DNS pointer sat
□ Performance testet (Lighthouse > 90)
□ Fejlhåndtering implementeret
□ Analytics / logging sat op
□ Backup strategi på plads
□ Domain + hosting konfigureret

🛠 Tech Stack Anbefaling

Vælg projekttype for anbefaling

🤖 Populære AI Værktøjer til Vibe Coding

Cursor

AI-powered IDE. Bedst til komplekse projekter. Har multi-file editing og codebase forståelse.

ChatGPT Plus

Generel AI assistent. God til brainstorming, debugging, og kodegenerering. GPT-4o inkluderet.

GitHub Copilot

Kodekomplettering i din editor. Fungerer i VS Code, JetBrains osv. God til hurtig kodning.

v0 by Vercel

UI-generering med React/Tailwind. Perfekt til at lave pæne interfaces hurtigt.

Bolt.new / Lovable

Browser-baserede app-buildere. Genererer hele apps fra prompt. God til MVP'er.

Claude

Anthropics AI. God til længere koder, refaktoring og kompleks logik. Lang context window.

📋 Feature Tracker

Features

Feature

Prioritet

AI Værktøj

Tid (t)

Status

Ingen features endnu. Klik "Tilføj Feature" for at komme i gang.

📈 Fremgangsstatus

0 af 0 færdige0%

Ventende

I gang

Færdige

💬 Prompt Bank

Klik på en prompt for at kopiere den til din AI-assistent. Tilpass den til dit specifikke projekt.

🌐 Hjemmesider & UI

Byg en landing page

HTML/CSS

"Byg en moderne landing page for [PRODUKT/YDELSE]. Siden skal indeholde: hero-sektion med CTA, feature-oversigt med ikoner, social proof (anmeldelser/tal), pricing-sektion, FAQ, og footer. Brug et clean design med [FARVEPALETTE]. Gør den responsive og hurtig. Implementer smooth scrolling og animerede overgange."

Responsive navigation

"Lav en responsive navigation til mit website. Den skal have: logo venstre, links højre, hamburger menu på mobil med smooth slide-in animation. Include: dropdown menus til under-sider, active state for nuværende side, søgefelt, og dark mode toggle. Brug [FRAMEWORK] bedste praksis."

Portfolio layout

Layout

"Design et portfolio website layout med: masonry grid til projekter, filtrerbar kategori-navigation, projekt-detalje modal/lightbox, om mig sektion med billede og bio, kontaktformular, og en blog-sektion. Brug CSS Grid og animationer ved scroll. Tema: [TEMPA]."

⚙️ Backend & API

REST API med autentificering

Backend

"Opret en REST API med [FRAMEWORK]. Endpoints: POST /auth/register, POST /auth/login, GET /users/me, GET /resources, POST /resources, PUT /resources/:id, DELETE /resources/:id. Brug JWT autentificering, password hashing med bcrypt, rate limiting, input validering, og fejlhåndtering. Include middleware til CORS og logging."

Database schema

Database

"Design et database schema til [PROJEKTTYPE]. Tabeller: [ENHEDER med relationer]. Brug [DATABASE]. Inkluder: primære nøgler, fremmede nøgler, indekser til hyppige forespørgsler, timestamps, soft delete. Giv mig SQL migreringer og en ER-diagram beskrivelse."

Brugerautentificering

Sikkerhed

"Implementer komplet brugerautentificering med: tilmelding med email/password, login med JWT, password reset flow, email verification, session management, og OAuth2 (Google). Brug [FRAMEWORK]. Implementer CSRF-beskyttelse, rate limiting på login, og sikker password politik."

🎨 Frontend Features

Interaktivt dashboard

React

"Byg et interaktivt dashboard med React/[FRAMEWORK]. Sektioner: KPI-kort med sparklines, data tabel med sortering/filtering/pagination, chart sektion (line, bar, pie), notifikationscenter, og hurtige handlinger. Brug [DATAKILDE] til data. Implementer real-time opdateringer og loading states."

Formular med validering

Formular

"Opret en avanceret formular med: multi-step wizard, client-side validering i real-tid, filupload med preview, dynamiske felter baseret på valg, auto-udfyldning, og hukommelse af trin. Brug [BIBLIOTEK] til validering. Inkluder tilgængelighed (ARIA labels, keyboard navigation)."

Søgefilter system

"Byg et avanceret søgefilter system med: tekst-søgning med debounce, kategori-filtre (checkbox), pris-interval slider, dato-range picker, sorteringsmuligheder, og URL-baseret filter-state (så man kan dele links). Animér filter-ændringer og vis antal resultater."

🚀 Deploy & Infra

Docker setup

DevOps

"Opret Docker konfiguration til mit [PROJEKTTYPE] projekt. Include: Dockerfile med multi-stage build, docker-compose.yml med [SERVICES], .dockerignore, miljøvariabel håndtering, sundhedstjek, og Volume til persistent data. Giv mig også en README sektion omkring local udvikling med Docker."

CI/CD pipeline

Automatisering

"Lav en CI/CD pipeline med GitHub Actions til mit [PROJEKT]. Steps: lint, test, build, deploy til [HOSTING]. Include: caching af dependencies, miljø-specifikke secrets, automatic rollback ved fejl, Slack/email notifikationer, og branch-baserede deployment (staging/production)."

💰 AI Værktøjer – Omkostningsberegner

Vælg dine AI værktøjer

Værktøj	Plan	Pris/måned	Brug
Cursor		140 kr
ChatGPT Plus		175 kr
GitHub Copilot		0 kr
Claude Pro		0 kr
v0 by Vercel		0 kr
Bolt.new		0 kr

📊 Månedlig Oversigt

0 kr / måned

Vælg værktøjer for at beregne

Årlig omkostning0 kr

Cost per feature (est.)-

Effektiv timepris besparelse-

💡 Anbefaling

Markér de AI-værktøjer du bruger for at se en samlet oversigt over dine månedlige omkostninger.

📤 Eksporter Projektplan

Klik "Generer Plan" for at oprette en fuld projektplan baseret på dine indtastninger.