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
- [OK] Clone mode lets you benchmark and customize competitor sites
- [OK] Intent-based generation creates sites from natural language
- [OK] Industry templates provide pre-built solutions
- [OK] Migration imports content from existing platforms
- [OK] Quick Start creates a website in 5 minutes