diff --git a/docs/html-pages/build-page-with-chatgpt-codex.md b/docs/html-pages/build-page-with-chatgpt-codex.md
new file mode 100644
index 00000000..daa945d9
--- /dev/null
+++ b/docs/html-pages/build-page-with-chatgpt-codex.md
@@ -0,0 +1,255 @@
+---
+description: Generate, preview, and package a SeaTable HTML page with ChatGPT Codex. Includes setup, permissions, example prompts, and upload steps.
+---
+
+# Build an HTML page with ChatGPT Codex
+
+This guide shows how to use the SeaTable HTML Page skill in the ChatGPT client to build an HTML page. It uses a customer registration form as an example.
+
+The example uses two linked tables for customer management: a customer registration table and a sales personnel table.
+
+When creating a customer record, users enter basic customer information and link one or more sales personnel records.
+
+## Prepare for page generation
+
+### Set up the app and HTML page
+
+In the relevant base, create an app and add an HTML page to it.
+
+
+
+### Configure permissions
+
+Configure page access permissions according to the page's intended use, as shown below.
+
+
+
+Configure table permissions as shown below.
+
+
+
+**Table 1: Customer Registration**
+
+The page needs to add customer records to this table and update linked records. Enable the "Can add records" and "Can modify records" permissions for this table.
+
+!!! warning "Review field permissions"
+
+ For testing, this example enables adding values to all fields. Adjust the field permissions to suit your needs, especially before using the page in production.
+
+
+
+**Table 2: Sales Personnel**
+
+When adding a customer record, users select one or more records from this table to link. Enable the table's "Can list records" permission so the page can display the available records.
+
+!!! warning "Review field permissions"
+
+ For testing, this example also enables access to all fields. Adjust the field permissions to suit your needs, especially before using the page in production.
+
+
+
+
+
+### Install the skill
+
+If you have not used the skill before, install it first. This guide assumes that the ChatGPT client is already installed on your computer.
+
+You can install the skill in either of the following ways.
+
+**Method 1**: Send an installation command
+
+In a conversation with the ChatGPT client, send the following command:
+
+```plaintext
+npx skills add seatable/skills@seatable-html-page
+```
+
+!!! note "GitHub connection required"
+
+ If the ChatGPT client cannot connect to GitHub, this method may fail. Resolve the connection issue and try again, or use Method 2.
+
+**Method 2 (recommended)**: Copy the skill to your local AI tool's skills directory
+
+The skill is available in the [seatable/skills repository](https://github.com/seatable/skills). Download the repository using your preferred method, then copy `seatable-html-page` from its `skills` directory to the directory where your AI tool stores skills.
+
+The following screenshots show where the `seatable-html-page` skill is installed on a local computer.
+
+
+
+
+
+In ChatGPT, open **Plugins -> Skills** and check that "SeaTable HTML Page" appears in the list.
+
+
+
+You can also enter `/seatable` in a conversation. If "SeaTable HTML Page" appears in the list of available skills, the skill is installed.
+
+
+
+### Create a ChatGPT project
+
+To keep your work organized, create a ChatGPT project for each HTML page. You will create a local folder for the page and link it to the project in the following steps.
+
+
+
+
+
+Create a folder for the page in a convenient location, using any method you prefer.
+
+
+
+The project name is optional. If you leave it blank, ChatGPT uses the folder name by default.
+
+
+
+Once the project has been created, a new conversation for it starts automatically.
+
+
+
+
+
+## Generate a page with ChatGPT Codex
+
+### Select the skill and configure the local development environment
+
+Enter `/seatable` and select the page-generation skill from the pop-up list.
+
+
+
+
+
+
+
+After selecting the skill, ask it to set up the local development environment.
+
+
+
+
+
+In the configuration file, enter the server address, `appUuid`, and `pageId` shown for the blank HTML page you created during setup.
+
+!!! warning "Keep your account token private"
+
+ Find your `accountToken` under **Personal Settings -> Personal Information -> Account Token**. Do not share it in the conversation, because it could give others access to your account.
+
+
+
+
+
+### Describe the page and data structure
+
+Describe the page you want to generate, including its functionality, workflow, and visual style. Providing detailed requirements can reduce the amount of revision needed later. For example:
+
+
+
+!!! example "Example prompt"
+
+ ```plaintext
+ Create a customer registration page.
+
+ Functions:
+ - Validate required fields
+ - Allow multiple sales personnel to be linked
+ - After successful submission, display a confirmation message and clear the form
+
+ Process:
+ 1. Enter the customer's basic information in the registration form.
+ 2. Link one or more sales personnel records.
+ 3. When the form is submitted, first create a customer record, then link it to the selected sales personnel records.
+ 4. Select sales personnel from the existing records in the Sales Personnel table.
+ 5. Style the "Submit" button with a purple gradient.
+ ```
+
+The skill may ask for details about the tables, fields, and other data structures the page needs. If you have not already provided this information, the AI will prompt you for it.
+
+You can also include these details in your initial request. If the AI detects that you have already specified the data structure, it will proceed directly to generating the page.
+
+**Example of additional data structure details:**
+
+
+
+!!! example "Example data structure"
+
+ ```plaintext
+ Table 1: Customer Registration. Relevant fields:
+ - Customer Name, text
+ - Contact Phone Number, text
+ - Customer Type, single select; options: Individual / Corporate
+ - Remarks, long text
+ - Sales Personnel, linked to the "Sales Personnel" table; allows each customer record to be associated with multiple sales personnel records. This is the key part of this example.
+
+ Table 2: Sales Personnel. Relevant fields:
+ - Name, text; used as the display name
+ - Department, single select; options for distinguishing departments: Sales Department I / Sales Department II
+ - Employee ID, text
+ - Mobile Number, number
+ - Email, email
+ - Date of Joining, date
+ - Customer, linked to the "Customer Registration" table; establishes the relationship between sales personnel and customers and is the key field in this table.
+ ```
+
+
+### Generate and refine the page
+
+After you provide the requirements and data structure, the AI begins generating the page.
+
+If a confirmation prompt like the one below appears, select "Allow once."
+
+
+
+
+
+The AI then completes the generation process.
+
+When generation is complete, the AI displays a summary similar to the following:
+
+
+
+Generated page:
+
+
+
+The generated files are also saved in the corresponding local folder:
+
+
+
+
+
+Choose **Preview Page** to preview the result. After making any needed changes, package the page for upload.
+
+If the page does not meet your requirements, ask the AI to revise it. For example, you can correct field definitions, as shown below.
+
+
+
+
+
+## Preview page
+
+When the preview service starts, the page opens automatically in ChatGPT. You can also open the service address in your preferred browser. By default, the address is [http://127.0.0.1:3005](http://127.0.0.1:3005/).
+
+
+
+When you finish testing, send the **Cancel Preview** command to stop the preview service.
+
+**Test features such as input validation and form submission:**
+
+
+
+**Check the data submitted to the base:**
+
+
+
+
+## Package and upload the page
+
+After testing the page and confirming that it works as expected, send the instruction "Package as an upload ZIP". The AI will then run the packaging script.
+
+
+
+Upload the ZIP file to the HTML page in the app.
+
+
+
+The uploaded page appears in the app as follows:
+
+
diff --git a/docs/media/build-page-with-chatgpt-codex/01-create-html-page.jpg b/docs/media/build-page-with-chatgpt-codex/01-create-html-page.jpg
new file mode 100644
index 00000000..d7d32220
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/01-create-html-page.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/02-configure-page-permissions.jpg b/docs/media/build-page-with-chatgpt-codex/02-configure-page-permissions.jpg
new file mode 100644
index 00000000..bb65ebb9
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/02-configure-page-permissions.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/03-configure-table-permissions.jpg b/docs/media/build-page-with-chatgpt-codex/03-configure-table-permissions.jpg
new file mode 100644
index 00000000..b90291c3
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/03-configure-table-permissions.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/04-customer-table-permissions.jpg b/docs/media/build-page-with-chatgpt-codex/04-customer-table-permissions.jpg
new file mode 100644
index 00000000..9972f8e9
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/04-customer-table-permissions.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/05-sales-personnel-table-permissions.jpg b/docs/media/build-page-with-chatgpt-codex/05-sales-personnel-table-permissions.jpg
new file mode 100644
index 00000000..e49ec644
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/05-sales-personnel-table-permissions.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/06-skill-installation-path.jpg b/docs/media/build-page-with-chatgpt-codex/06-skill-installation-path.jpg
new file mode 100644
index 00000000..0cbb5570
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/06-skill-installation-path.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/07-skill-files.jpg b/docs/media/build-page-with-chatgpt-codex/07-skill-files.jpg
new file mode 100644
index 00000000..beeebe1b
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/07-skill-files.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/08-verify-skill-installation.jpg b/docs/media/build-page-with-chatgpt-codex/08-verify-skill-installation.jpg
new file mode 100644
index 00000000..fc904cbe
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/08-verify-skill-installation.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/09-find-html-page-skill.jpg b/docs/media/build-page-with-chatgpt-codex/09-find-html-page-skill.jpg
new file mode 100644
index 00000000..8dfaa69d
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/09-find-html-page-skill.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/10-create-chatgpt-project.jpg b/docs/media/build-page-with-chatgpt-codex/10-create-chatgpt-project.jpg
new file mode 100644
index 00000000..a5d5b390
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/10-create-chatgpt-project.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/11-create-project-folder.jpg b/docs/media/build-page-with-chatgpt-codex/11-create-project-folder.jpg
new file mode 100644
index 00000000..96cc344c
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/11-create-project-folder.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/12-link-folder-to-project.jpg b/docs/media/build-page-with-chatgpt-codex/12-link-folder-to-project.jpg
new file mode 100644
index 00000000..fd5dddd6
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/12-link-folder-to-project.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/13-project-conversation.jpg b/docs/media/build-page-with-chatgpt-codex/13-project-conversation.jpg
new file mode 100644
index 00000000..ea692d15
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/13-project-conversation.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/14-select-html-page-skill.jpg b/docs/media/build-page-with-chatgpt-codex/14-select-html-page-skill.jpg
new file mode 100644
index 00000000..e23a2554
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/14-select-html-page-skill.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/15-start-skill-conversation.jpg b/docs/media/build-page-with-chatgpt-codex/15-start-skill-conversation.jpg
new file mode 100644
index 00000000..af9687ae
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/15-start-skill-conversation.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/16-configure-local-environment.jpg b/docs/media/build-page-with-chatgpt-codex/16-configure-local-environment.jpg
new file mode 100644
index 00000000..1bfd694b
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/16-configure-local-environment.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/17-verify-local-configuration.jpg b/docs/media/build-page-with-chatgpt-codex/17-verify-local-configuration.jpg
new file mode 100644
index 00000000..66b37c3c
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/17-verify-local-configuration.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/18-customer-registration-prompt.jpg b/docs/media/build-page-with-chatgpt-codex/18-customer-registration-prompt.jpg
new file mode 100644
index 00000000..55cbe53a
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/18-customer-registration-prompt.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/19-provide-table-schema.jpg b/docs/media/build-page-with-chatgpt-codex/19-provide-table-schema.jpg
new file mode 100644
index 00000000..1db29328
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/19-provide-table-schema.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/20-allow-sdk-download.jpg b/docs/media/build-page-with-chatgpt-codex/20-allow-sdk-download.jpg
new file mode 100644
index 00000000..02983e63
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/20-allow-sdk-download.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/21-allow-api-docs-access.jpg b/docs/media/build-page-with-chatgpt-codex/21-allow-api-docs-access.jpg
new file mode 100644
index 00000000..d210ff21
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/21-allow-api-docs-access.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/22-page-generation-summary.jpg b/docs/media/build-page-with-chatgpt-codex/22-page-generation-summary.jpg
new file mode 100644
index 00000000..59b0743d
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/22-page-generation-summary.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/23-generated-customer-form.jpg b/docs/media/build-page-with-chatgpt-codex/23-generated-customer-form.jpg
new file mode 100644
index 00000000..16f7656b
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/23-generated-customer-form.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/24-generated-project-files.jpg b/docs/media/build-page-with-chatgpt-codex/24-generated-project-files.jpg
new file mode 100644
index 00000000..a9a3d298
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/24-generated-project-files.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/25-request-page-changes.jpg b/docs/media/build-page-with-chatgpt-codex/25-request-page-changes.jpg
new file mode 100644
index 00000000..4b50dc0f
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/25-request-page-changes.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/26-preview-customer-form.jpg b/docs/media/build-page-with-chatgpt-codex/26-preview-customer-form.jpg
new file mode 100644
index 00000000..d1cdf2b5
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/26-preview-customer-form.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/27-test-form-validation.jpg b/docs/media/build-page-with-chatgpt-codex/27-test-form-validation.jpg
new file mode 100644
index 00000000..b04195bc
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/27-test-form-validation.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/29-verify-submitted-record.jpg b/docs/media/build-page-with-chatgpt-codex/29-verify-submitted-record.jpg
new file mode 100644
index 00000000..99911705
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/29-verify-submitted-record.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/30-package-upload-zip.jpg b/docs/media/build-page-with-chatgpt-codex/30-package-upload-zip.jpg
new file mode 100644
index 00000000..1303ea83
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/30-package-upload-zip.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/31-upload-package-files.jpg b/docs/media/build-page-with-chatgpt-codex/31-upload-package-files.jpg
new file mode 100644
index 00000000..f7b2afeb
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/31-upload-package-files.jpg differ
diff --git a/docs/media/build-page-with-chatgpt-codex/32-uploaded-html-page.jpg b/docs/media/build-page-with-chatgpt-codex/32-uploaded-html-page.jpg
new file mode 100644
index 00000000..475c3b55
Binary files /dev/null and b/docs/media/build-page-with-chatgpt-codex/32-uploaded-html-page.jpg differ
diff --git a/mkdocs.yml b/mkdocs.yml
index 442fa0be..6d95f0a7 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -244,6 +244,7 @@ nav:
- html-pages/index.md
- Low-code quickstart: html-pages/low-code-quickstart.md
- Developer setup: html-pages/getting-started.md
+ - Build page with ChatGPT Codex: html-pages/build-page-with-chatgpt-codex.md
- Example: html-pages/example.md
- SDK Reference:
- Initialization: html-pages/sdk/initialization.md