Non-Developer Guide to Creating a Landing Page with AI

Before creating any code, first organize "what content goes on the landing page." If you skip this step, you will make vague requests to the AI and get vague results. Jot down the following in a notepad or Notion. 5-10 minutes is enough. [Basic structure of an effective landing page - 7 sections] 1. Hero section: Core value proposition in one sentence + "Get Started" button 2. Problem statement: Describe the difficulties your customers face (build empathy) 3. Solution introduction: How your service solves the problem 4. Key features: 3-4 core features displayed as cards 5. Customer reviews: 2-3 real user testimonials (with star ratings) 6. Pricing: Plan costs or pricing info (if applicable) 7. Final CTA: "Get Started Now" button + company info (footer) [You can also ask Claude for planning help] If organizing the content is difficult, ask Claude for help first. Paste the prompt below into claude.ai and Claude will suggest both the structure and copywriting.

# === Paste into claude.ai - Planning stage help request ===

"I run a pet health food subscription service.
The service is called 'PetMeal', and we deliver customized food
designed by veterinarians every month.
Our target customers are pet dog owners in their 30s-40s.

I want to create a landing page for this service.
Suggest an effective landing page structure and the content
for each section.
Also advise on copywriting strategies that increase conversion rates."

# ^ Just replace the service name, description, and target customers with your own.
# Claude will suggest a 7-section structure with titles, descriptions,
# and button text for each section.
...

Once planning is complete, ask Claude to generate the actual code. [Key point: Request "a single HTML file"] Landing pages are typically one page, so requesting "put CSS and JavaScript all inside a single index.html file" is the simplest approach. This way, you just save one file and can open it directly in your browser. [What to include in your prompt] - Service name and description - Desired colors (e.g., blue, pink) - Section structure and content for each section - "Make it as a single HTML file" (important!) - "Responsive design" (works on both mobile and desktop) - "Write all content in English" Copy and paste the prompt below into claude.ai. Just replace the service name, description, colors, etc. with your own. If the Artifacts preview is not showing, ask additionally "Show this code as an Artifact preview."

# === Paste into claude.ai - Code generation prompt ===

"Create a landing page based on the requirements below.
Include the CSS inside the HTML file, and complete it as a single index.html with no separate files.

[Service Info]
- Service name: PetMeal
- One-line description: Customized healthy dog food designed by veterinarians
- Main color: #2563EB (blue), Secondary: #F59E0B (amber)
- Tone & manner: Trustworthy and warm feeling

[Section Structure]
1. Hero: 'Your pet\'s health starts with every meal' + 'Start Free Trial' button
2. Problem statement: 3 problems with commercial dog food
3. Solution: PetMeal\'s differentiators + 3-step service process
...

Save the code Claude generated to your computer and open it in a browser. [Saving the code - 3 minutes] 1. Click the "Copy" button in the top right of the HTML code Claude showed. (Or select all the code with your mouse and copy with Ctrl+C) 2. Open Notepad (Windows) or TextEdit (Mac). 3. Paste the copied code (Ctrl+V). 4. Choose "Save As." 5. Enter the filename as index.html (it must be .html, not .txt!). 6. Save to your desktop or desired location. If Notepad will not let you save as .html: -> Change "File type" to "All Files (*.*)" before saving. [Checking in your browser] 1. Double-click the saved index.html file (it automatically opens in your browser). Or drag and drop the file into a browser (Chrome). 2. The landing page appears on screen! [Modifying the design - Ask Claude again] It is normal for the design not to be 100% to your liking. Continue making modification requests in the same conversation on claude.ai. Each time you get new code, overwrite the index.html file. [How to check on mobile] To check on an actual smartphone, you need to deploy first (Step 5), but you can preview mobile screens on your PC: 1. With index.html open in Chrome, press F12. 2. Click the smartphone icon in the top left. 3. Select "iPhone SE," "iPad," etc. from the dropdown to preview at those screen sizes.

# === Design modification prompt examples for Claude ===
# (Continue in the same conversation)

# [Change colors]
"Change the hero section background to a gradient.
Light blue on the left, light purple on the right."

# [Modify buttons]
"Make the CTA button bigger and more eye-catching.
On mobile, make it full-width across the screen."

# [Modify review cards]
"Add a round profile image placeholder to the customer review cards."

# [Modify footer]
...

Once the basic design is complete, add real images and configure search engine/social media sharing settings. [Replacing images] The code Claude creates usually includes placeholder images. To replace them with actual service photos: 1. Prepare your image files (JPG or PNG). 2. Create an images folder in the same directory as index.html and put images in it. 3. Ask Claude "Change the image path to images/hero.jpg." If you do not have images yet: -> Ask Claude "Use Unsplash URLs as placeholders for free images." Image size tips: - Hero background: 1920px wide or smaller - Feature card icons: 200px wide or smaller - Large images slow down page loading, so use liminfo's image compression tool. [SEO and social media sharing setup] Send the prompt below to Claude, and it will configure settings so your page shows up well in search engines and displays a nice preview when shared on social media.

# === SEO/sharing setup prompt for Claude ===

"Add the following settings to this landing page:

[SEO Meta Tags]
- title: PetMeal - Customized Healthy Dog Food Designed by Veterinarians
- description: The right nutrition for your pet. Fresh ingredients delivered monthly. First month free trial.

[Open Graph Tags for Social Media Sharing]
- og:title: PetMeal - Custom Healthy Dog Food
- og:description: Protect your pet's health with vet-designed recipes. First month free!
- og:image: (will be replaced with actual image URL later)
- og:type: website

[Favicon]
...

Publish your completed landing page to the internet. Anyone will be able to access it via URL. [Easiest method: GitHub + Vercel integration (recommended)] This method also lets you automatically reflect changes later by just updating the file. 1. Sign up at github.com (or log in if you already have an account). 2. Click the "+" button in the top right -> "New repository" 3. Enter "my-landing-page" for Repository name 4. Click "Create repository" 5. Click the "uploading an existing file" link 6. Drag and drop the index.html file to upload 7. Click the "Commit changes" button at the bottom [Deploying on Vercel] 1. Go to vercel.com and log in with your GitHub account 2. Click "Add New Project" 3. Select "my-landing-page" from the GitHub repository list 4. Click "Deploy" 5. After 1-2 minutes, deployment is complete! The URL appears on screen. If you want to make changes after deployment: -> Editing the index.html file on GitHub will trigger Vercel to auto-redeploy. -> GitHub repository -> click index.html -> pencil icon (Edit) -> edit -> "Commit changes" [Connecting your own domain (optional)] - Purchase a domain from namecheap.com or godaddy.com ($10-15/year) - Vercel Dashboard -> Settings -> Domains -> Enter your purchased domain - HTTPS (SSL certificate) is automatically configured by Vercel What the free plan includes: - Automatic HTTPS - Global CDN (fast loading anywhere) - 100GB traffic per month (sufficient for small services) - Free yourproject.vercel.app URL

# === Deployment without terminal (recommended for non-developers) ===
#
# 1. Go to github.com -> Log in
# 2. Click + button at top right -> New repository
# 3. Repository name: my-landing-page -> Create
# 4. Click "uploading an existing file"
# 5. Drag and drop index.html -> Commit changes
# 6. Go to vercel.com -> Log in with GitHub account
# 7. New Project -> Select the repository you just made -> Deploy
# 8. Done! A URL is generated.
#
# === When making changes ===
# 1. Ask Claude for changes -> Get new code
# 2. Click index.html in the GitHub repository
# 3. Click the pencil icon (Edit)
...

Once the landing page is deployed, refer to these tips for more effective management. [Analyzing visitors - Google Analytics (free)] See who visits, when, and from where. 1. Sign up for free at analytics.google.com 2. Get a "Tracking ID" (G-XXXXXXXXXX format) 3. Ask Claude "Add the Google Analytics tracking code to index.html. The ID is G-XXXXXXXXXX." 4. Update the modified code on GitHub [Tips for increasing conversion rates] - Keep the CTA button always visible on screen (fixed even when scrolling) - Hero titles ideally under 8 words - Phrases like "free," "first month free," "7-day trial" significantly boost conversions - If you have customer reviews, always include them (social proof effect) [Page speed optimization] - Always compress images (use liminfo's image compression tool) - WebP format is the lightest (ask Claude "Convert to WebP format") - Remove unnecessary animations on mobile [A/B testing] Try different landing page titles, button colors, etc. to compare which version is more effective. If you create branches on GitHub, Vercel will deploy each one with a separate URL. -> Ask Claude "Create two versions of the hero title for A/B testing"

# === Frequently used expansion prompts ===

# [Essential] Google Analytics integration
"Add the Google Analytics tracking code to index.html.
The tracking ID is G-XXXXXXXXXX."

# [Essential] Social media sharing preview check
"Set og:image to https://mydomain.com/images/og-preview.jpg"

# [Recommended] Contact form
"Add a contact form at the bottom.
Include name, email, and message input fields,
and when the 'Submit' button is clicked, send an email to hello@example.com."

# [Recommended] Live chat button
...