## haih.site

Dịch vụ dành cho chủ doanh nghiệp. Khách hàng không cần phải trở thành lập trình viên hay thành thạo các công cụ AI: họ chỉ cần giao việc và nhận lại kết quả hoàn chỉnh. AI được sử dụng trong quá trình vận hành kết hợp với sự giám sát của chuyên gia giàu kinh nghiệm.

Dịch vụ khách hàng chuyên phát triển, chỉnh sửa và bảo trì website dài hạn với AI là công nghệ sản xuất cốt lõi.

haih.site

## Ý nghĩa

AI hiện đại đã đơn giản hóa đáng kể việc tạo ra các bản mẫu và trang web, nhưng chưa làm cho quá trình phát triển và vận hành trở nên đơn giản. Vibe-coding cho phép một người không chuyên nhanh chóng đạt được kết quả ấn tượng, tuy nhiên các dự án thực tế chắc chắn sẽ phải đối mặt với môi trường, các phần phụ thuộc (dependencies), dữ liệu, cơ sở hạ tầng, việc triển khai, lỗi và hỗ trợ sau này. AI hiện vẫn thường xuyên mắc lỗi và mang lại hiệu quả cao nhất ở những nơi mà công việc của nó được định hướng bởi một chuyên gia có kinh nghiệm.

haih.site không nên bán công cụ AI cho khách hàng và không hướng tới việc biến chủ doanh nghiệp thành lập trình viên. Giá trị mang lại cho khách hàng: bàn giao trang web và các nhiệm vụ cho chuyên gia mà không cần phải tìm hiểu tại sao một thứ gì đó không hoạt động về mặt kỹ thuật. Trang web phải hoạt động mượt mà và tiếp tục phát triển.

## Kịch bản tiếp thị

Trên trang web, hãy đặt một CTA đơn giản **"Làm lại trang web của tôi"**.

Khách hàng chỉ cần cung cấp:
- URL của trang web hiện tại;
- email để nhận kết quả/thông báo.

Sau khi gửi, một yêu cầu sẽ được tạo. Yêu cầu này **không được thực hiện hoàn toàn tự động**: quy trình có sự tham gia của con người (human-in-the-loop) được sử dụng.

Chuyên gia nhận yêu cầu, khởichạy và định hướng AI agent. Agent sẽ nghiên cứu trang web nguồn và các phần chính của nó (mục tiêu khoảng ~20 trang quan trọng), trích xuất thông tin về doanh nghiệp, dịch vụ và nội dung. Dựa trên cơ sở đó, một trang web mới được tạo ra: cấu trúc mới, thiết kế, chủ đề và nội dung được cập nhật.

Đây không phải là việc nhập khẩu kỹ thuật hay chuyển đổi nguyên trạng CMS/mẫu/HTML. Trang web gốc được sử dụng như một **nguồn tri thức về kinh doanh và tài liệu kỹ thuật không chính thức (TЗ)**: "đã đọc trang web hiện tại → hiểu về doanh nghiệp → thiết kế lại từ đầu".

Chuyên gia kiểm tra kết quả, điều chỉnh công việc của agent nếu cần thiết và chỉ xuất bản trang web mới sau khi đã kiểm tra. Sau khi xuất bản, thông báo sẽ được gửi qua email cho khách hàng.

## Vai trò tiếp thị

Kịch bản này phải thể hiện giá trị của dịch vụ thông qua kết quả hoàn chỉnh, chứ không phải thông qua lời hứa "AI sẽ làm thay bạn mọi thứ". Khách hàng không cần phải tìm hiểu về câu lệnh (prompts), trình soạn thảo, Git, Docker hay cấu trúc của trang web.

Đây đồng thời là điểm gia nhập dịch vụ quản lý chính (managed-service): sau khi làm lại trang web thành công, việc đề xuất khách hàng tiếp tục duy trì, phát triển và hỗ trợ trang web bởi đội ngũ haih.site là một điều tất yếu.

Tạo lối vào đơn giản cho dịch vụ được quản lý (managed-service): khách hàng cung cấp URL của trang web hiện tại và email, và nhận về một trang web mới đã được chuẩn bị và xuất bản.

Triển khai kịch bản tiếp thị "Làm lại trang web của tôi"

## Mục tiêu

Phát triển và ra mắt **haih.site** làm trang web công khai chính cho triết lý mới của HAIH.

Trang web không chỉ đơn thuần mô tả công nghệ hoặc engine hiện có, mà còn **giải thích trực quan cho người dùng cuối về cách tiếp cận phát triển mới với AI**, đồng thời cung cấp các showcase hoạt động trực tiếp trên trang, trong khi thư viện trường hợp sử dụng trên GitHub vẫn chưa được hoàn thiện.

## Thông điệp chúng tôi muốn truyền tải

Ý tưởng chính:

> **Đừng bắt đầu dự án bằng một engine cồng kềnh. Hãy bắt đầu với kiến trúc tối thiểu giải quyết đúng bài toán hiện tại, và chỉ thêm lớp tiếp theo khi thực sự cần thiết.**

HAIH nên giúp con người và các coding agent phát triển dự án với chi phí thấp: từ vài file tĩnh cho đến một ứng dụng có kiểu dữ liệu đầy đủ (typed application).

Giá trị cốt lõi không nằm ở số lượng tính năng "có sẵn" (out-of-the-box), mà là **chi phí để bổ sung tính năng cần thiết tiếp theo**.

Nếu bài toán chỉ cần HTML/CSS/JS — không cần React, cơ sở dữ liệu, GraphQL hay application server.

Nếu phát sinh nhu cầu lưu trữ dữ liệu — bổ sung persistence (khả năng lưu trữ).

Nếu cần cung cấp dữ liệu cho các client dạng phần mềm — xuất hiện API.

Nếu API cần frontend — tích hợp client có kiểu dữ liệu rõ ràng.

Nếu cần người dùng — bổ sung hệ thống xác thực (auth).

Nếu cần một sản phẩm thương mại hoàn chỉnh — kiến trúc sẽ mở rộng theo hướng đó, nhưng dự án không phải trả chi phí đó từ trước.

## Định vị

Hiện tại, không nên giới thiệu HAIH như một full-stack framework cồng kềnh khác hay một danh mục các mô đun bắt buộc.

Mô hình chính xác hơn là:

**nền tảng tối thiểu + nguyên tắc kiến trúc tương thích + best practices (thực tiễn tốt nhất) + các trường hợp mẫu theo chiều dọc (vertical cases) hoàn chỉnh dành cho phát triển có sự hỗ trợ của AI.**

Về lâu dài, đây có thể giống một **giao thức kiến trúc (architectural protocol)** hơn là một runtime đơn lẻ: các dự án khác nhau sử dụng các phần khác nhau của ngăn xếp công nghệ (stack), nhưng vẫn giữ được tính dễ đoán và rõ ràng đối với coding agent.

Nguyên tắc cốt lõi:

> **Sử dụng kiến trúc tiết kiệm nhất giải quyết trọn vẹn yêu cầu.**

Mỗi phần phụ thuộc (dependency) mới phải được chứng minh là cần thiết bởi tính năng phục vụ người dùng.

## Trang web này dành cho ai

Trước hết là:

- Các lập trình viên tích cực sử dụng Claude Code, Codex, Cursor và các coding agent khác;
- Lập trình viên đơn lẻ (solo developers) và các nhóm nhỏ cần triển khai và thay đổi sản phẩm nhanh chóng;
- Lập trình viên đã mệt mỏi với sự phức tạp dư thừa của các full-stack boilerplate hiện đại;
- Những người muốn có nền tảng tự lưu trữ/mã nguồn mở (self-hosted/open-source) và khả năng tùy chỉnh kiến trúc theo ý mình;
- Tác giả của các giải pháp và trường hợp sử dụng riêng, những người muốn chia sẻ chúng với cộng đồng sau này.

Trang web phải dễ hiểu đối với một người lần đầu nghe về HAIH và không biết lịch sử của `haih-net/agent` hiện tại.

## Lời hứa tiếp thị chính

Không hứa hẹn "chúng tôi đã triển khai mọi thứ".

Thay vào đó, hãy thể hiện:

> **Bắt đầu với gần như con số không. Chỉ thêm kiến trúc khi yêu cầu bắt buộc.**

Và lời hứa thứ hai:

> **Cung cấp cho coding agent các hợp đồng (contracts) rõ ràng, các ví dụ đã được kiểm chứng và ngữ cảnh tối thiểu — và nó sẽ có thể phát triển dự án cùng với các yêu cầu.**

Sau khi tìm hiểu trang web, người dùng phải hiểu được rằng:

1. họ không bị ép phải chấp nhận một ngăn xếp công nghệ khổng lồ từ trước;
2. một dự án đơn giản thực sự có thể giữ được sự đơn giản;
3. khi các yêu cầu tăng lên, đã có sẵn các lộ trình nâng cấp đã được kiểm chứng;
4. các giải pháp được thiết kế sao cho AI agent có thể dễ dàng hiểu, sửa đổi và kiểm tra;
5. các showcase không phải là ảnh chụp màn hình dạng đồ chơi, mà là các mẫu hoạt động thực tế về chuyển đổi kiến trúc;
6. việc triển khai cuối cùng sẽ được người dùng và AI điều chỉnh cho phù hợp với bài toán cụ thể, chứ không bị bắt buộc cài đặt một mô đun đa năng nào.

## Tại sao điều này quan trọng đối với AI

Trang web cần giải thích rõ ràng về **Trải nghiệm của Agent (Agent Experience - AX)**.

Đối với coding agent, những yếu tố sau là quan trọng:

- Ngữ cảnh tối thiểu cần thiết (minimum necessary context);
- Cấu trúc dự án dễ đoán;
- Tính cục bộ của các thay đổi (locality of changes);
- Các phần phụ thuộc rõ ràng;
- Không trùng lặp thủ công các hợp đồng;
- Các điểm kết nối thành phần có kiểu dữ liệu rõ ràng;
- Lỗi compiler/runtime rõ ràng;
- Cách thức kiểm tra kết quả có thể tái tạo;
- Các trường hợp mẫu có sẵn để mang nguyên tắc kiến trúc sang bài toán mới.

Tính an toàn kiểu dữ liệu xuyên suốt (end-to-end typing) trong các ứng dụng phức tạp nên được thể hiện như một vòng lặp phản hồi (feedback loop) cho AI, ví dụ:

```text
Prisma schema
    ↓
Prisma types
    ↓
Pothos
    ↓
GraphQL schema
    ↓
GraphQL Codegen
    ↓
Typed frontend
    ↓
tsc / tests
```

Tuy nhiên, không được tạo ấn tượng rằng toàn bộ ngăn xếp này là bắt buộc đối với mọi dự án.

## Showcase là phần trung tâm của trang web

Trong khi cơ sở dữ liệu showcase/cases trên GitHub chưa được hoàn thiện, **cần triển khai các showcase nền tảng trực tiếp trên haih.site**.

Showcase phải thể hiện không phải là danh sách công nghệ, mà là các trạng thái kiến trúc hợp lý và quá trình chuyển đổi giữa chúng.

Mỗi showcase phải trả lời được các câu hỏi:

- Bài toán đặt ra là gì;
- Tại sao kiến trúc hiện tại là đủ hoặc đã không còn đủ;
- Yêu cầu mới nào đã xuất hiện;
- Chính xác những gì đã được thêm vào;
- Tại sao không thêm nhiều hơn nữa;
- Cấu trúc dự án trông như thế nào;
- Những phần phụ thuộc nào đã xuất hiện;
- Làm thế nào để kiểm tra kết quả;
- AI có thể mang phần nào từ trường hợp này sang dự án khác.

### Showcase 1. Trang web tĩnh

**Bài toán:** Trang web doanh nghiệp / trang giới thiệu / trang tài liệu không có dữ liệu động.

Kiến trúc tối thiểu:

```text
HTML / CSS / JS / assets
+ Docker Compose
+ Traefik
```

Không có CSDL, GraphQL, xác thực (auth), React hay application server.

Luận điểm chính: **nếu chỉ cần trang tĩnh — không cần engine.**

Cho thấy AI có thể thay đổi một dự án như vậy với chi phí rẻ thế nào.

### Showcase 2. API độc lập

**Bài toán:** Dịch vụ cung cấp API lập trình và hoàn toàn không cần frontend riêng.

Trình bày dự án API-first như một trạng thái hoàn chỉnh độc lập, chứ không phải một trang web chưa hoàn thiện.

Các hướng phát triển:

```text
API only
```

hoặc khi cần persistence:

```text
PostgreSQL
+ Prisma
+ API
```

Cho thấy UI không phải là lớp bắt buộc của hệ thống.

### Showcase 3. Trang web tĩnh + tính năng động nhỏ

**Bài toán:** Ví dụ, biểu mẫu liên hệ (feedback form).

Không vì thế mà biến toàn bộ trang web thành một ứng dụng full-stack.

Hiển thị bước chuyển đổi tối thiểu:

```text
static site
+ small endpoint/service
```

Nếu có thể gửi trực tiếp tin nhắn đến dịch vụ ngoài — không cần thêm CSDL.

Đây là trường hợp quan trọng chống lại việc thiết kế quá đà (overengineering).

### Showcase 4. Trang web có persistence (lưu trữ)

**Bài toán:** Dữ liệu cần phải được lưu trữ: đơn hàng, danh mục, bản ghi hoặc đối tượng miền (domain object) khác.

Bổ sung:

```text
PostgreSQL
+ Prisma
```

Giới thiệu Prisma như nguồn cung cấp mô hình dữ liệu có kiểu rõ ràng và giải thích lý do tại sao persistence xuất hiện ở giai đoạn này.

API và frontend phức tạp chỉ được thêm vào nếu bài toán thực sự yêu cầu.

### Showcase 5. API có kiểu dữ liệu rõ ràng dựa trên dữ liệu

**Bài toán:** Dữ liệu đã lưu cần được sử dụng bởi nhiều client hoặc frontend cần làm việc với một API đầy đủ.

Thêm ví dụ:

```text
PostgreSQL
+ Prisma
+ Pothos
+ GraphQL
```

Hiển thị mối liên hệ giữa các kiểu của Prisma và GraphQL, đồng thời giảm thiểu mã nối (glue code) thủ công.

### Showcase 6. Ứng dụng web hoàn chỉnh có kiểu dữ liệu rõ ràng

**Bài toán:** Xuất hiện frontend tương tác làm việc với API riêng.

Kiến trúc phát triển thành:

```text
PostgreSQL
+ Prisma
+ Pothos / GraphQL
+ GraphQL Codegen
+ client
+ UI
```

Hiển thị hợp đồng xuyên suốt **database → server → API → frontend** và việc kiểm tra thay đổi tự động bằng trình biên dịch (compiler).

Không định vị framework frontend là bắt buộc. Việc chọn React hay giải pháp khác phải xuất phát từ bài toán cụ thể.

### Showcase 7. Ứng dụng người dùng có xác thực

**Bài toán:** Xuất hiện dữ liệu cá nhân, tài khoản hoặc các thao tác bị giới hạn quyền.

Chỉ đến lúc này mới thêm auth/session/permissions.

Chứng minh rằng xác thực không phải là cơ sở hạ tầng bắt buộc của mọi trang web, mà là câu trả lời cho một yêu cầu cụ thể.

Minh họa cách truyền thông tin định danh/quyền hạn qua API và UI mà không làm phá vỡ kiến trúc trước đó.

### Showcase 8. Cửa hàng trực tuyến hoàn chỉnh

**Bài toán:** Sản phẩm thực tế phức tạp.

Cần xuất hiện các phần miền cần thiết, ví dụ:

- Danh mục sản phẩm;
- Phân loại;
- Trang chi tiết sản phẩm;
- Tìm kiếm/lọc (nếu yêu cầu đặt ra);
- Giỏ hàng;
- Người dùng/người mua hàng;
- Quy trình thanh toán;
- Đơn hàng và trạng thái đơn hàng;
- Quản lý sản phẩm và đơn hàng phía quản trị viên;
- Hình ảnh/tệp tin;
- Tích hợp thanh toán như một bước kiến trúc độc lập;
- Các tiến trình nền/thông báo cần thiết.

Showcase này phải chứng minh rằng cách tiếp cận tối giản không chỉ giới hạn ở các trang landing: **từ cùng một hệ thống nguyên tắc, ta có thể tiến hóa thành một ứng dụng hướng sản xuất (production-oriented) hoàn chỉnh.**

Đồng thời, cần thể hiện trực quan/kiến trúc nguồn gốc của độ phức tạp: mỗi lớp mới tồn tại vì một yêu cầu kinh doanh cụ thể đòi hỏi nó.

## Thể hiện cả trạng thái lẫn quá trình chuyển đổi

Nên liên kết các showcase thành một đồ thị trực quan thay vì một chiếc thang tuyến tính.

Ví dụ:

```text
                  ┌→ small endpoint
static website ───┤
                  └→ persistence → API → typed web app → auth → commerce

API service ─────────→ persistence
        └────────────→ agent/client integrations
```

Ý tưởng chính: **không có ngăn xếp đích bắt buộc.**

Người dùng có thể dừng lại ở bất kỳ điểm nào nếu nó giải quyết trọn vẹn bài toán.

## Mỗi showcase trên trang web cần làm những gì

Không giới hạn ở việc mô tả bằng văn bản.

Nếu có thể, mỗi showcase phải là một ví dụ hoạt động thực tế:

- Mở xem kết quả;
- Xem kiến trúc/cấu trúc;
- Nhìn thấy các thành phần được sử dụng;
- Xem diff hoặc chuỗi thay đổi so với trạng thái trước đó;
- Đọc giải thích ngắn gọn về quyết định kiến trúc;
- Xem cách thức kiểm tra;
- Nhận hướng dẫn/prompt/ngữ cảnh để coding agent có thể tái tạo hoặc điều chỉnh giải pháp.

Về sau, các tài liệu này có thể được chuyển ra/đồng bộ hóa với các trường hợp mẫu riêng trên GitHub.

## Cấu trúc đề xuất cho trang chủ

### Hero

Giải thích cực kỳ ngắn gọn điểm khác biệt của HAIH.

Không phải "một AI framework khác", mà là ý tưởng về kiến trúc tiến hóa tối thiểu để phát triển cùng với các coding agent.

CTA chính nên dẫn đến các showcase đang hoạt động.

### Vấn đề

Các boilerplate/framework hiện đại thường ép dự án phải trả trước chi phí cho độ phức tạp.

AI phải trả thêm chi phí cho độ phức tạp đó bằng ngữ cảnh và số lượng mối liên hệ mà nó phải hiểu.

### Nguyên tắc

**Bắt đầu tối thiểu. Chỉ thêm những gì yêu cầu tiếp theo cần đến.**

Hiển thị sự tiến hóa trực quan từ trang tĩnh đến ứng dụng phức tạp.

### Live showcase

Phần trung tâm của trang web với các trường hợp mẫu đã mô tả ở trên.

### AI / AX

Giải thích lý do tại sao kiến trúc được tối ưu hóa đặc biệt cho coding agent: context, locality, types, compiler feedback, tests, cases.

### Best practices / Cases

Giải thích mô hình cơ sở tri thức: không áp đặt một cách triển khai cuối cùng duy nhất, mà tập hợp các giải pháp kiến trúc đã được kiểm chứng và các thay đổi theo chiều dọc hoàn chỉnh.

### Open source / Tham gia

Giải thích vòng lặp cộng đồng trong tương lai:

```text
requirement
→ minimal solution
→ verified case
→ AI reuse
→ new projects
→ new cases
```

Mời gọi dùng thử phương pháp, điều chỉnh các trường hợp mẫu và xuất bản giải pháp của riêng mình.

## Những điều không nên hứa hẹn lúc này

- Không định vị HAIH là một nền tảng SaaS đa năng có sẵn;
- Không nhấn mạnh vào việc bán hàng/kiếm tiền;
- Không hứa hẹn một chợ ứng dụng (marketplace) khổng lồ chứa các mô đun có sẵn mà thực tế chưa có;
- Không tạo ấn tượng rằng Prisma/Pothos/Apollo/React là bắt buộc;
- Không mang toàn bộ danh sách tính năng của `haih-net/agent` cũ sang sản phẩm mới;
- Không nói rằng chỉ có duy nhất một kiến trúc đúng;
- Không làm quá tải trang chủ bằng các chi tiết kỹ thuật trước khi người dùng hiểu được giá trị.

## Tiêu chí thành công của trang web

Một khách truy cập mới không biết lịch sử của HAIH, sau khi xem trang web phải hiểu được rằng:

> "Tôi có thể bắt đầu với một dự án tối thiểu. Khi có yêu cầu mới, AI có thể lấy trường hợp mẫu đã được kiểm chứng, chỉ thêm kiến trúc cần thiết và kiểm tra kết quả. Tôi không cần phải chấp nhận một framework khổng lồ từ trước và mang vào dự án những tính năng mà tôi chưa dùng đến."

Sau khi hiểu được ý tưởng này, người dùng phải có khả năng **mở ngay một live showcase**, nhìn thấy nó trên một dự án thực tế và nhận đủ thông tin để tự mình thử nghiệm cách tiếp cận tương tự.

## Mục tiêu phổ biến

Ở giai đoạn hiện tại, tối ưu hóa trang web để **hiểu ý tưởng, thử nghiệm và tham gia**, chứ không phải để bán hàng.

Chu kỳ mong muốn:

```text
khách truy cập
→ hiểu nguyên tắc
→ xem live case
→ thử nghiệm cách tiếp cận
→ điều chỉnh giải pháp cùng AI
→ chia sẻ case/best practice của riêng mình
→ người dùng tiếp theo có thêm một con đường đã được kiểm chứng
```

Trang web phải trở thành màn trình diễn công khai đầu tiên của mô hình này và tạm thời đóng vai trò là cửa sổ trưng bày/cơ sở dữ liệu các showcase cốt lõi cho đến khi danh mục trường hợp mẫu mở hoàn chỉnh ra đời.

Phát triển và ra mắt haih.site làm trang web sản phẩm cho triết lý mới của HAIH: kiến trúc tối thiểu phát triển cùng các yêu cầu, cùng các bản showcase trực quan từ trang web tĩnh, API độc lập cho đến một cửa hàng trực tuyến hoàn chỉnh.

Nhiệm vụ

Phát triển và ra mắt trang web

Triển khai kịch bản tiếp thị "Làm lại trang web của tôi"