Erstelle und veröffentliche eine Website mit Claude Code Desktop

Auf Dribbble nach einem Website-Design suchen, das dir gefällt

Dribbble öffnen

https://dribbble.com

Eine Designrichtung auswählen

Screenshot aufnehmen und speichern

Visuals für deine Website erstellen oder sammeln

Erstelle eigene Visuals mit Google Flow, lade fertige Inhalte von Pexels herunter oder nutze echte Unternehmensmaterialien.

Google Flow öffnen

https://labs.google/fx/tools/flow

Pexels öffnen

https://www.pexels.com

Erstelle ein Website-Bild

Erstelle einen website-tauglichen Google-Flow-Bild-Prompt.

Create one premium, photorealistic, website-ready image for {{BUSINESS_TYPE}}. The image should show {{IMAGE_TYPE}}, shot in a {{VISUAL_STYLE}} style. Aim for {{MOOD}}. For colors, use {{BRAND_COLORS}}. Make it realistic and high-end, like professional commercial photography: clean, well lit, and uncluttered, with natural depth, sharp detail, and calm empty space where website text can sit on top. Generate one single, final, website-ready image only, and set its aspect ratio to {{ASPECT_RATIO}}. Do not create multiple variations, a collage, an image grid, a contact sheet, a split-screen or multi-panel composition, or several images combined into one result — return exactly one image. Avoid text, logos, watermarks, distorted faces or hands, busy or distracting backgrounds, heavy filters, neon glow, and any obviously AI-generated look.

Google Flow öffnen

Art des Unternehmens oder Projekts

Wähle eine Option

Bildtyp

Wähle eine Option

Visueller Stil

Wähle eine Option

Markenfarben

Wähle eine Option

Stimmung

Wähle eine Option

Seitenverhältnis

Wähle eine Option

Erstelle ein Hero-Video

Erstelle einen cinematischen Google-Flow-Video-Prompt.

Create a short, cinematic background video for the hero section of {{BUSINESS_TYPE}}. It should show {{VIDEO_SUBJECT}}, filmed using {{CAMERA_MOVEMENT}}. Aim for {{VISUAL_MOOD}}. The overall style should be {{BRAND_STYLE}}. Keep the clip short and easy to loop, around 5 to 10 seconds, with smooth, slow, steady motion. Make it premium and realistic, like a high-end commercial, and simple enough that a headline stays readable on top of it. Keep the lighting and color consistent with a professional website. Avoid text, logos, watermarks, fast cuts, shaky or jarring movement, distorted faces or hands, busy backgrounds, and any obviously AI-generated look. Deliver the video in {{VIDEO_ORIENTATION}}.

Google Flow öffnen

Art des Unternehmens oder Projekts

Wähle eine Option

Motiv oder Szene

z. B. Dampf, der von frisch gebrühtem Kaffee auf einer Holztheke aufsteigt

Kamerabewegung

Wähle eine Option

Visuelle Stimmung

Wähle eine Option

Markenstil

Wähle eine Option

Videoausrichtung

Wähle eine Option

Website-Assets organisieren

Lege die Website-Bilder und das Hero-Video in einen assets-Ordner. Den Inspirations-Screenshot bewahrst du außerhalb davon auf.

Claude Desktop installieren und anmelden

Claude Desktop herunterladen

https://claude.ai/download

Ordner für das Website-Projekt erstellen

Assets-Ordner und Inspirations-Screenshot hinzufügen

Projekt in Claude Desktop öffnen

Claude Desktop Code Local Select Project Folder Open Trust Workspace

Claude-Skill frontend-design installieren

frontend-design

Install the frontend-design Claude Skill from https://github.com/anthropics/skills/tree/main/skills/frontend-design for my user account. Inspect the SKILL.md and LICENSE.txt files first, then copy the complete frontend-design folder to ~/.claude/skills/frontend-design while preserving its structure. Confirm when it is installed and ready to use.

Website-Prompt anpassen

Baue die Website

Erstelle einen vollständigen Website-Build-Prompt aus deinen Unternehmensdaten und den vorbereiteten visuellen Referenzen.

Build a premium, visually impressive website for my business using the brief below. BUSINESS Business name: {{BUSINESS_NAME}} Business type: {{BUSINESS_TYPE}} Location: {{BUSINESS_LOCATION}} Main services: {{MAIN_SERVICES}} {{CONTACT_DETAILS}} Additional information: {{EXTRA_INFO}} DESIGN DIRECTION Brand colors: {{BRAND_COLORS}} Visual style: {{VISUAL_STYLE}} Main call to action: {{MAIN_CTA}} Sections: {{WEBSITE_SECTIONS}} Use the inspiration screenshot in this project folder as the visual direction. Match its layout feel, spacing, and quality level. Do not copy it exactly, and do not reuse its brand, logo, or text. ASSETS Use the images, logo, and video inside the assets folder in this project folder. Use the hero video wherever it makes the design stronger, and keep the headline readable on top of it. Do not use placeholder or stock images when a real file exists in the assets folder. WHAT TO BUILD Build a complete static website using only HTML, CSS, and JavaScript. If you ask me to choose a project type, use a multi-file static site. Name the main file index.html. Organize every required file clearly inside this project folder. Make the website: - premium, modern, and visually impressive - fully responsive on desktop, tablet, and mobile - built around a memorable, visually strong hero section - premium in its typography, with polished spacing and clear visual hierarchy - smooth, with tasteful animations and interactive details - easy to navigate, with clear navigation and obvious calls to action Avoid: - a generic AI-generated appearance - cluttered layouts, excessive gradients, or neon glow - placeholder text left in the final result - broken links or empty sections - React, Vite, npm, a build step, a backend, or a database Before you start building, ask me any essential questions if important information is missing. Do not invent contact details, prices, reviews, awards, or business claims. Use clearly editable placeholders instead.

Optionale Zusatzangaben. Lass sie leer, wenn du unsicher bist – Claude fragt nach, falls er sie braucht.

Geschäftsname

z. B. Apex Auto Detail

Geschäftstyp

Wähle eine Option

Standort

z. B. Lissabon, Portugal

Haupt-Services

Telefonnummer

Optional

E-Mail-Adresse

Optional

Adresse

Optional

Kontaktdaten

Markenfarben

Wähle eine Option

Bevorzugter visueller Stil

Wähle eine Option

Website-Abschnitte

Wähle eine Option

Haupt-Call-to-Action

Wähle eine Option

Sonstiges über das Unternehmen

Optional — Öffnungszeiten, Einzugsgebiet, was das Unternehmen besonders macht…

Website erstellen und Vorschau öffnen

Füge den Prompt in Claude Desktop ein, sende ihn und öffne die erste Vorschau, sobald der Build fertig ist.

Website prüfen und verfeinern

Prüfe das Desktop- und Mobil-Layout und beschreibe anschließend Änderungen oder hänge bei Bedarf einen Screenshot an.

Öffne Hostinger

Öffne Hostinger

Öffne dein Hostinger-Dashboard, um die Website hochzuladen und zu veröffentlichen.

https://www.hostg.xyz/SHJlq

Website-Migration einrichten

Hostinger Add Website Migrate an Existing Website Upload Website or Backup Files

Domain auswählen

Wähle eine temporäre Domain, beanspruche eine im Tarif enthaltene Domain oder verbinde eine, die dir bereits gehört.

Website-ZIP hochladen

Komprimiere die Dateien und Ordner innerhalb des Projektverzeichnisses – nicht den übergeordneten Projektordner –, damit index.html im Stammverzeichnis des ZIP bleibt.

Live-Website testen

Öffne die ausgewählte Domain und prüfe, ob die Website auf Desktop und Mobilgerät korrekt funktioniert.