Table of Contents

Chapter 3: Site Generation

"Hongik Ingan: Creating a website should be as simple as describing what you want."

3.1 Clone and Customize

Benchmarking Mode
=================

See a website you like?
Clone it with your branding.

Process:
  1. Enter competitor URL
  2. AI analyzes structure
  3. Clone with your info
  4. Customize colors/content
  5. Launch!


Site Analysis
=============

WIA-HOME analyzes:

Structure:
  - Pages (home, about, contact, etc.)
  - Navigation patterns
  - Layout type

Features:
  - Shop functionality
  - Blog capability
  - Contact forms
  - Booking system

Technology:
  - Framework used
  - CMS type
  - Hosting provider

Performance:
  - Load time
  - Page size
  - Optimization score


Example Analysis
================

URL: https://famous-bakery.com

Structure:
  Pages: 8 detected
  - Home, About, Menu, Gallery
  - Contact, Blog, Order, FAQ
  Layout: Single column with hero
  Navigation: Horizontal menu

Features:
  [OK] Shop (product catalog)
  [OK] Contact form
  [OK] Social links
  [ ] Booking system
  [ ] Newsletter

Tech:
  Framework: React
  Hosting: AWS (~$50/month)

Recommendations:
  [i] Add booking for reservations
  [i] Optimize images (save 60%)
  [i] Add blog for SEO


Customization Options
=====================

Branding:
  - Business name
  - Logo upload
  - Primary/secondary colors
  - Font selection

Content:
  - Replace text
  - Replace images
  - Add/remove sections

Features:
  - Enable shop
  - Enable booking
  - Enable blog

3.2 Intent-Based Generation

Father (INTENT) Integration
===========================

Just describe what you want.
Father designs the house.

Natural Language Input:
  "I run a local bakery.
   Show bread types and prices.
   Enable reservations.
   Connect Instagram."

Father generates:
  - Homepage with hero
  - Product catalog
  - Reservation system
  - Instagram feed widget
  - Contact page


Example Prompts
===============

Bakery:
  "I'm a neighborhood bakery.
   Show our bread and cakes.
   Online ordering with Kakao Pay.
   Display our hours and location."

Freelancer:
  "I'm a UI/UX designer.
   Portfolio with 10 projects.
   About me section.
   Contact form for quotes.
   Dark mode, modern feel."

Hair Salon:
  "Hair salon in Gangnam.
   Show our work portfolio.
   Online booking system.
   Staff introduction.
   Link to Instagram."


How It Works
============

1. Parse Intent
   - Extract business type
   - Identify required features
   - Understand style preferences

2. Select Template
   - Match to industry
   - Adjust for features

3. Generate Content
   - Create page structure
   - Add placeholder content
   - Apply styling

4. Customize
   - Insert user info
   - Apply colors
   - Optimize layout

5. Review and Launch
   - Preview site
   - Make adjustments
   - Go live

3.3 Industry Templates

Pre-Built Templates
===================

Restaurant:
  Features: Menu, Reservation, Delivery, Reviews
  Integration: Baemin, Yogiyo, Coupang Eats

Cafe:
  Features: Menu, Location, Instagram Feed
  Integration: Instagram, Naver Place

Bakery:
  Features: Products, Order, Payment, Gallery
  Integration: Kakao Pay, Naver Pay

Hair Salon:
  Features: Portfolio, Booking, Price List, Staff
  Integration: Naver Booking, Kakao Hairshop

Clinic:
  Features: Departments, Doctors, Appointment
  Integration: Naver Place, Kakao Map

Academy:
  Features: Courses, Schedule, Enrollment
  Integration: Naver Academy

Photographer:
  Features: Portfolio, Pricing, Booking, Blog
  Integration: Instagram

Designer:
  Features: Portfolio, Services, Quote Form
  Integration: Behance, Dribbble


Template Selection
==================

Choose template:
  1. Select industry
  2. Choose locale (ko-KR, en-US, etc.)
  3. Select features
  4. Customize branding
  5. Launch


Template Customization
======================

Every template allows:
  [OK] Color scheme change
  [OK] Font selection
  [OK] Logo upload
  [OK] Content editing
  [OK] Feature toggle
  [OK] Layout adjustments
  [OK] Section reordering

3.4 Migration from Existing Sites

Supported Platforms
===================

WordPress:
  - Posts and pages
  - Media library
  - Comments
  - Products (WooCommerce)

Wix:
  - Export file import
  - Page structure
  - Images and content

Squarespace:
  - Site export
  - Blog posts
  - Products

Shopify:
  - Products
  - Customer data
  - Order history

Naver Blog:
  - All posts
  - Images
  - Categories

Tistory:
  - Blog posts
  - Attachments
  - Comments


Migration Process
=================

1. Connect Source
   - Enter credentials or
   - Upload export file

2. Select Content
   - Pages to import
   - Posts to import
   - Media to import
   - Products (if applicable)

3. Map Content
   - Assign to new structure
   - Match categories
   - Handle redirects

4. Import
   - Transfer content
   - Download media
   - Preserve links

5. Review
   - Check all content
   - Fix any issues
   - Update as needed


Benefits
========

[OK] Keep all your content
[OK] No more hosting fees
[OK] Redirect old URLs
[OK] Gradual transition
[OK] Keep SEO rankings

3.5 Quick Start

5-Minute Website
================

For busy business owners:

const mySite = await WIAHome.quickStart({
  benchmark: 'https://competitor.com',
  myInfo: {
    name: 'Happy Bakery',
    phone: '010-1234-5678',
    address: 'Seoul Gangnam',
    hours: '09:00-21:00'
  }
});

await mySite.start();
// Live at: happy-bakery.wia.shop


What Quick Start Does
=====================

1. Analyzes benchmark URL (30 sec)
2. Clones structure (30 sec)
3. Applies your branding (30 sec)
4. Inserts your info (30 sec)
5. Optimizes for performance (1 min)
6. Starts server (30 sec)

Total: ~5 minutes


Quick Start Output
==================

Domain: happy-bakery.wia.shop

Generated:
  [OK] Home page with hero
  [OK] Product/menu page
  [OK] About page
  [OK] Contact page
  [OK] Order/booking system

Optimizations:
  [OK] Images compressed (60% smaller)
  [OK] Lazy loading enabled
  [OK] Mobile responsive
  [OK] SEO meta tags

Cost: $0

Chapter Summary


Previous: Chapter 2 - P2P Architecture | Next: Chapter 4 - Content Management