mcpField
P
page-builder

page-builder

github.com/kostja94设计与 UI140 次安装5 周前更新
代码仓库

关于 page-builder

Page Builder 是用于在目标产品中创建新页面的技能,面向需要遵循现有产品规范的页面开发工作。它要求先检查内容、组件和设计系统,再构建并验证页面;不用于修改或审查现有页面。

主要功能

  1. 01分析目标产品与页面上下文
  2. 02按需读取页面构建参考
  3. 03复用项目组件与设计规范
  4. 04实现响应式、无障碍与页面状态
  5. 05在实际路由中验证页面

适用场景

  1. 01为产品新增符合现有规范的页面
  2. 02依据真实内容构建页面层级
  3. 03在指定路由检查页面状态与适配

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/kostja94/pagina --skill page-builder

安装后在 Claude Code 中输入/page-builder确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
contextus.md
delivery-localization.md
references/pages/
404.md
about.md
article.md
auth.md
blog-index.md
campaign.md
careers.md
case-study.md
changelog.md
collection.md
commerce.md
community.md
comparison.md
contact.md
create-edit.md
dashboard.md
detail.md
documentation.md
faq.md
feedback-disclosure.md
homepage.md
integration.md
landing.md
learning.md
legal-policy.md
marketplace-directory.md
migration.md

详细介绍

页面构建器

构建一个真正属于目标产品的页面,而不是生成通用模板。

从产品入手

检查目标路由、相邻页面、产品及其受众、源内容、设计系统、可复用组件、数据契约、框架、渲染模型、响应式规范、元数据和测试。

确定:

  • 页面类型及其必须完成的用户任务;
  • 用户如何进入页面、需要了解或执行什么操作,以及接下来去哪里;
  • 哪些声明、数据、素材和状态是真实的;
  • 应复用哪些现有组件和项目规范;
  • 此页面与全站决策之间的边界。

如果缺失的信息会实质性地改变页面职责、内容、数据或主要操作,请提出一个简洁的问题。不要删除受影响的部分,也不要用通用文案代替缺失的事实。

仅加载相关指南

阅读 references/workflow.md,了解构建流程;在最终验证前阅读 references/quality-gates.md。如果路由、部署、语言区域、市场或配套数据能力会影响页面,请阅读 references/delivery-localization.md。如果需要使用项目上下文或返回任务中发现的持久事实,请阅读 references/contextus.md。

如果 ../../catalog/pages.json 中有匹配的页面参考,仅加载该参考。如果不包含此页面类型,请使用共享工作流;除非任务涉及仓库维护,否则不要创建永久目录条目。

根据页面的产品上下文调整优先级,但不要编造新的页面定位。组件建议引用 Bricks 中的稳定 ID。优先复用目标项目中已有的组件;只有必须新建组件时,才参考 Bricks 指南。即使未安装 Bricks,Pagina 仍可使用。

构建

  1. 定义页面契约:目的、受众、主要任务、必需事实、输入、输出和排除项。
  2. 先确定信息层级和内容,再选择视觉构成。
  3. 复用目标项目的组件、设计令牌、布局、图标、内容模型和路由规范。
  4. 实现真实状态、响应式行为、无障碍支持、元数据和故障处理。
  5. 如果 Contextus 可用,通过它返回用户确认的持久事实和 Agent 发现的候选信息;否则直接报告,不要另建一套并行的上下文系统。
  6. 在实际路由和产品上下文中验证页面。

边界

  • Pagina 一次只负责一个页面,包括其内容结构和组件构成。
  • 仅构建新页面。不要使用此技能审计、优化、修补或重建现有页面。
  • 页面参考体现持久决策和验收标准,而非固定的视觉模板。
  • 可复用组件的行为应归属目标设计系统或 Bricks 等组件参考。
  • 站点地图、全局导航、URL 架构、跨页面用户旅程和完整网站规划不属于此技能的范围。
  • 不要编造产品声明、客户证据、价格、法律条款或运营能力。
  • 除非有明确的具体需求,否则不要替换已确立的技术栈或设计系统。

完成

报告创建的页面、复用的现有规范和组件、验证过的路由及状态、持久上下文更新或候选信息,以及仍待解决的重大依赖或产品决策。

评论

支持 Markdown