moogle.eth

ENS

moogle.eth

钱包地址0x91e321eE2c574C113C71eB11474323462DD61bB5
网络Ethereum

建站工具

Pages Kit

Pages Kit 是一个以 section 为单位的轻量建站工具,帮助用户组合页面、管理多语言内容、用代码自定义区块,并快速完成发布。

Overview

这个产品的定位介于模板网站和 Framer 这类高自由度工具之间。它不要求用户从空白画布开始调整每个字体、间距和响应式细节,而是把网页拆成 Header、Hero、Feature、Pricing、FAQ、Footer 和 Custom Block 等可组合的 section。

Web 产品建站工具多语言No-code / Code

问题

01

很多用户并不需要无限自由的画布,他们需要的是更快完成发布。

一个建站工具本质上要同时处理页面结构、内容表达、视觉细节、响应式和发布。高自由度工具很强,但对于轻量网站来说,空白画布也会让简单任务变得过重。

瑞士风信息图,对比自由画布编辑和 section 组合建站

区块模型

02

用成熟 section 组合页面,而不是从零画每个元素。

Pages Kit 的核心假设很简单:一个网页通常就是一组 section 的顺序组合。区块库给用户一个结构化起点,画布和属性面板则负责承接具体内容编辑。

Pages Kit 空白页面状态,引导用户添加区块
Pages Kit 区块库,包含分类和 Hero 模板
Pages Kit 添加 Hero section 后的编辑器界面

使用流程

03

核心流程贴近用户理解网站的方式。

选择区块、编辑内容、完成翻译、预览不同设备尺寸,然后一键发布。界面把路径压短,让用户把注意力放在页面要表达什么。

Pages Kit 从空白页面到网站发布的流程图

多语言

04

多语言内容是发布流程的一部分,而不是后期补丁。

Pages Kit 提供独立的翻译工作区,用户可以并排对比默认语言和目标语言内容,也能处理图片 Alt 文本、多语言图片内容、搜索筛选、AI 翻译,以及 Ignore、Done、NEW 这些单字段状态。

Pages Kit 多语言发布系统图
Pages Kit 翻译工作区,左侧为英文内容,右侧为中文内容

自定义区块

05

模板让默认流程简单,代码让系统保持开放。

当预设 section 不够用时,用户可以通过代码创建自定义区块,并在同一个工作区中实时预览效果。这样普通用户可以直接使用模板,高级用户也能扩展出更个性化的页面模块。

Pages Kit 自定义区块编辑器,左侧是代码,右侧是实时预览

编辑器结构

06

编辑器围绕结构、结果和设置三个位置组织。

三栏结构让每类任务都有稳定位置:左侧管理页面和区块,中间展示实时画布,右侧编辑属性。顶部工具栏则负责设备预览、设置、预览和发布。

Pages Kit 三栏编辑器结构圆形图

总结

07

一个更轻量、内容优先的建站工具。

Pages Kit 把网页创建从自由画布绘制转成结构化页面组合。它面向更轻量的发布场景:用户更关心内容、多语言、自定义能力和快速上线,而不是从零处理每个视觉细节。

Section 降低了字体、间距和响应式布局的前期设置成本。
翻译工作区让多语言发布成为同一个产品流程的一部分。
自定义代码区块保留扩展性,但不会让所有用户都从代码开始。
Pages Kit | Portfolio Site