สร้างและเผยแพร่เว็บไซต์ด้วย Claude Code Desktop

ค้นหาดีไซน์เว็บไซต์ที่คุณชอบบน Dribbble

เปิด Dribbble

https://dribbble.com

เลือกแนวทางการออกแบบเพียงหนึ่งแบบ

จับภาพหน้าจอและบันทึกไว้

สร้างหรือรวบรวมภาพสำหรับเว็บไซต์ของคุณ

สร้างภาพเฉพาะของคุณด้วย Google Flow ดาวน์โหลดคอนเทนต์สำเร็จรูปจาก Pexels หรือใช้สื่อจริงของธุรกิจ

เปิด Google Flow

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

เปิด Pexels

https://www.pexels.com

สร้างรูปสำหรับเว็บไซต์

สร้างพรอมป์ตภาพ Google Flow หนึ่งชุดที่พร้อมใช้กับเว็บไซต์

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

ประเภทธุรกิจหรือโปรเจกต์

เลือกตัวเลือก

ประเภทรูปภาพ

เลือกตัวเลือก

สไตล์ของภาพ

เลือกตัวเลือก

สีของแบรนด์

เลือกตัวเลือก

อารมณ์ของภาพ

เลือกตัวเลือก

อัตราส่วนภาพ

เลือกตัวเลือก

สร้างวิดีโอ hero

สร้างพรอมป์ตวิดีโอสไตล์ภาพยนตร์สำหรับ Google Flow

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

ประเภทธุรกิจหรือโปรเจกต์

เลือกตัวเลือก

ตัวแบบหรือฉาก

เช่น ไอที่ลอยขึ้นจากกาแฟร้อนบนเคาน์เตอร์ไม้

การเคลื่อนกล้อง

เลือกตัวเลือก

อารมณ์ของภาพ

เลือกตัวเลือก

สไตล์ของแบรนด์

เลือกตัวเลือก

แนวการวางวิดีโอ

เลือกตัวเลือก

จัดระเบียบแอสเซทของเว็บไซต์

วางภาพเว็บไซต์และวิดีโอหลักไว้ในโฟลเดอร์ assets และเก็บภาพหน้าจอต้นแบบการออกแบบไว้นอกโฟลเดอร์นั้น

ติดตั้งและเข้าสู่ระบบ Claude Desktop

ดาวน์โหลด Claude Desktop

https://claude.ai/download

สร้างโฟลเดอร์สำหรับโปรเจกต์เว็บไซต์

เพิ่มโฟลเดอร์แอสเซทและภาพหน้าจอต้นแบบ

เปิดโปรเจกต์ใน Claude Desktop

Claude Desktop Code Local Select Project Folder Open Trust Workspace

ติดตั้ง Claude Skill ชื่อ frontend-design

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.

ปรับแต่งพรอมป์ตสำหรับเว็บไซต์

สร้างเว็บไซต์

สร้างพรอมป์ตสำหรับสร้างเว็บไซต์แบบครบถ้วน โดยใช้ข้อมูลธุรกิจและภาพอ้างอิงที่เตรียมไว้

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.

รายละเอียดเพิ่มเติมที่ไม่บังคับ หากไม่แน่ใจ ให้เว้นว่างไว้ — Claude จะถามเองหากจำเป็น

ชื่อร้าน

เช่น Apex Auto Detail

ประเภทธุรกิจ

เลือกตัวเลือก

ที่ตั้ง

เช่น ลิสบอน โปรตุเกส

บริการหลัก

เบอร์โทร

ไม่บังคับ

อีเมล

ไม่บังคับ

ที่อยู่

ไม่บังคับ

ข้อมูลติดต่อ

สีของแบรนด์

เลือกตัวเลือก

สไตล์ภาพที่ต้องการ

เลือกตัวเลือก

ส่วนต่าง ๆ ของเว็บไซต์

เลือกตัวเลือก

ปุ่มเรียกร้องให้ลงมือทำหลัก

เลือกตัวเลือก

เรื่องอื่น ๆ เกี่ยวกับร้าน

ไม่บังคับ — เวลาทำการ พื้นที่ให้บริการ จุดที่ทำให้ร้านต่างจากที่อื่น…

สร้างและดูตัวอย่างเว็บไซต์

วางพรอมป์ตลงใน Claude Desktop กดส่ง แล้วเปิดตัวอย่างแรกเมื่อการบิลด์เสร็จสิ้น

ตรวจสอบและปรับปรุงเว็บไซต์

ตรวจสอบเลย์เอาต์บนเดสก์ท็อปและมือถือ จากนั้นอธิบายสิ่งที่ต้องการแก้ไข หรือแนบภาพหน้าจอหากจำเป็น

เปิด Hostinger

เปิด Hostinger

เปิดแดชบอร์ด Hostinger ของคุณเพื่ออัปโหลดและเผยแพร่เว็บไซต์

https://www.hostg.xyz/SHJlq

ตั้งค่าการย้ายเว็บไซต์

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

เลือกโดเมน

เลือกโดเมนชั่วคราว ขอรับโดเมนที่รวมอยู่ในแพ็กเกจ หรือเชื่อมต่อโดเมนที่คุณมีอยู่แล้ว

อัปโหลดไฟล์ ZIP ของเว็บไซต์

บีบอัดไฟล์และโฟลเดอร์ที่อยู่ภายในไดเรกทอรีโปรเจกต์ ไม่ใช่โฟลเดอร์แม่ เพื่อให้ index.html อยู่ที่รากของไฟล์ ZIP

ทดสอบเว็บไซต์ที่ใช้งานจริง

เปิดโดเมนที่เลือกและยืนยันว่าเว็บไซต์ทำงานถูกต้องทั้งบนเดสก์ท็อปและมือถือ