关于 page-builder
Page Builder 是用于在目标产品中创建新页面的技能,面向需要遵循现有产品规范的页面开发工作。它要求先检查内容、组件和设计系统,再构建并验证页面;不用于修改或审查现有页面。
主要功能
- 01分析目标产品与页面上下文
- 02按需读取页面构建参考
- 03复用项目组件与设计规范
- 04实现响应式、无障碍与页面状态
- 05在实际路由中验证页面
适用场景
- 01为产品新增符合现有规范的页面
- 02依据真实内容构建页面层级
- 03在指定路由检查页面状态与适配
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ kostja94/ pagina --skill page-builder安装后在 Claude Code 中输入/page-builder确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/contextus.mddelivery-localization.mdreferences/pages/404.mdabout.mdarticle.mdauth.mdblog-index.mdcampaign.mdcareers.mdcase-study.mdchangelog.mdcollection.mdcommerce.mdcommunity.mdcomparison.mdcontact.mdcreate-edit.mddashboard.mddetail.mddocumentation.mdfaq.mdfeedback-disclosure.mdhomepage.mdintegration.mdlanding.mdlearning.mdlegal-policy.mdmarketplace-directory.mdmigration.md详细介绍
页面构建器
构建一个真正属于目标产品的页面,而不是生成通用模板。
从产品入手
检查目标路由、相邻页面、产品及其受众、源内容、设计系统、可复用组件、数据契约、框架、渲染模型、响应式规范、元数据和测试。
确定:
- 页面类型及其必须完成的用户任务;
- 用户如何进入页面、需要了解或执行什么操作,以及接下来去哪里;
- 哪些声明、数据、素材和状态是真实的;
- 应复用哪些现有组件和项目规范;
- 此页面与全站决策之间的边界。
如果缺失的信息会实质性地改变页面职责、内容、数据或主要操作,请提出一个简洁的问题。不要删除受影响的部分,也不要用通用文案代替缺失的事实。
仅加载相关指南
阅读 references/workflow.md,了解构建流程;在最终验证前阅读 references/quality-gates.md。如果路由、部署、语言区域、市场或配套数据能力会影响页面,请阅读 references/delivery-localization.md。如果需要使用项目上下文或返回任务中发现的持久事实,请阅读 references/contextus.md。
如果 ../../catalog/pages.json 中有匹配的页面参考,仅加载该参考。如果不包含此页面类型,请使用共享工作流;除非任务涉及仓库维护,否则不要创建永久目录条目。
根据页面的产品上下文调整优先级,但不要编造新的页面定位。组件建议引用 Bricks 中的稳定 ID。优先复用目标项目中已有的组件;只有必须新建组件时,才参考 Bricks 指南。即使未安装 Bricks,Pagina 仍可使用。
构建
- 定义页面契约:目的、受众、主要任务、必需事实、输入、输出和排除项。
- 先确定信息层级和内容,再选择视觉构成。
- 复用目标项目的组件、设计令牌、布局、图标、内容模型和路由规范。
- 实现真实状态、响应式行为、无障碍支持、元数据和故障处理。
- 如果 Contextus 可用,通过它返回用户确认的持久事实和 Agent 发现的候选信息;否则直接报告,不要另建一套并行的上下文系统。
- 在实际路由和产品上下文中验证页面。
边界
- Pagina 一次只负责一个页面,包括其内容结构和组件构成。
- 仅构建新页面。不要使用此技能审计、优化、修补或重建现有页面。
- 页面参考体现持久决策和验收标准,而非固定的视觉模板。
- 可复用组件的行为应归属目标设计系统或 Bricks 等组件参考。
- 站点地图、全局导航、URL 架构、跨页面用户旅程和完整网站规划不属于此技能的范围。
- 不要编造产品声明、客户证据、价格、法律条款或运营能力。
- 除非有明确的具体需求,否则不要替换已确立的技术栈或设计系统。
完成
报告创建的页面、复用的现有规范和组件、验证过的路由及状态、持久上下文更新或候选信息,以及仍待解决的重大依赖或产品决策。