套件：浏览、预览和添加模块

知识库浏览器正好分为三个层级，每一层都位于页面自身的地址中，而不仅仅是组件状态：类别网格（/projects/kit 或 /projects/<id>/kit）、单个类别的模块列表（添加 ?cat=<key>），以及单个模块的完整详情页（添加 &module=<id>）。这意味着浏览器的“后退”按钮始终能正确工作，而且特定模块的详情页是一个真实、可分享的链接——您可以直接把某人带到“报价或估价请求表单能为您带来什么”的页面，而无需告诉对方去哪里点击。按 Esc 键每次只返回一个层级，与“后退”相同。

从项目内部打开（/projects/<id>/kit）时，页面会知道您正在查看哪个项目，因此可以显示项目中已有的内容，并让您直接添加到该项目中。单独打开（/projects/kit，从“套件”标签页的链接进入，或直接访问）时，同样是三个层级，但不涉及任何特定项目——适用于在决定构建什么之前进行浏览，或向他人展示目录而无需打开某个特定项目。

在类别网格顶部，与 aiKit 其他地方相同的双向切换开关可划分整个目录：网站套件是成为网站或应用本身一部分的板块和功能（页面、表单、图库、商店、预约、SEO）；商务工具套件是与项目并行运行而非内置于项目中的工具（营销自动化、开票、客户关系管理、员工工具、报表）。每个类别卡片都会显示其包含的模块数量，只要其中至少有一个“即刻可用”模块（见下文），还会显示“N 个即刻可用”徽章。

类别上方的搜索框会同时匹配整个目录中的模块名称或描述——包括网站套件和商务工具套件，无论当前选择的是哪个切换项——因此即使您正在查看网站套件，搜索“发票”也能找到相关模块。

从项目内部打开时，且仅在未搜索时，如果 aiKit 有真实的建议，类别网格上方会出现“为此项目推荐”一行：基于项目类型的简单非 AI 规则进行匹配（例如，网站会推荐报价表单、联系表单、评价展示、本地 SEO 和常见问题页面；在线商店会推荐购物车和结账、弃单挽回和产品评价；落地页、应用、管理系统、仪表板、客户门户、博客和营销自动化项目也各有相应推荐），再加上根据项目目标文本进行的一些关键词匹配（提到“报价”“预约”“评价”“邮件”“发票”或“在线销售”，都会显示对应模块及其一句话推荐理由）。项目中已有的内容会被排除，列表最多显示六项。

每个模块都带有两种状态标签之一，其措辞刻意保持字面意义，而非营销用语。“即刻可用”表示该模块是构建引擎经过测试的模块之一——拥有真实代码，能用示例数据代替您的信息渲染出实际页面，与正式网站所用的模板完全相同。“为您定制”表示该模块是目录中真实规划的一部分，但目前尚未有渲染结果：选择它会将其加入计划并创建一个真实的工作项，该模块会以网站自身的代码、品牌和文字构建完成，与其他任何 AI 编辑方式相同——只是今天还没有经过测试的现成模板。

这两种状态都不代表“不真实”或“假设性”。两者都是 aiKit 会真正为您构建的内容。标签的区别仅在于：您现在能否看到它的最终效果，还是必须根据描述和示意图来想象。

打开某个类别时，其中每个模块都以卡片形式显示：包括缩略图、模块名称、状态标签、一行简短描述、“最适合”标签行（最多三个），以及若已添加则显示的“在此项目中”（在项目内浏览时）。“即刻可用”模块的缩略图是真实页面的小型实时预览——仅在滚动进入视图后才会加载，并且屏幕上最多同时显示六个实时缩略图，因此即使类别很长也不会拖慢页面；超出此数量的缩略图在真正可见之前只显示普通的加载占位符。“为您定制”模块的缩略图与下文所述的示意图相同，只是更小——但具有可用预览的模块除外（见下文），其卡片会显示缩小后的真实示例网站、“可用预览 · N 种变体”徽章，以及“查看效果”按钮，而不是“查看详情”。“查看详情”会打开该模块自己的页面。

对于“立即可用”模块，预览是实际已测试页面的真实 iframe，以完整尺寸显示，外观类似一个小型浏览器窗口，带有“桌面/手机”切换按钮，可真正调整框架大小，让你查看它在手机上的显示效果（在真实手机上，该切换按钮会被替换为普通的“手机预览”标签，并且框架会自动滚动到表单本身，因此你可以看到字段，而不仅仅是首屏）。框架底部逐渐淡出；其下方的“打开完整预览”会在新标签页中打开整个页面，下方的说明文字会注明所用数据来自哪个示例商家。如果在项目内打开，“在此网站配色中显示”切换按钮会重新请求相同的预览，并使用项目自身的品牌色（直接从简报品牌备注中输入的任何 #十六进制颜色代码读取）和项目名称进行替换，因此你看到的内容更接近你实际网站的显示效果，而不是通用示例。

对于“为你定制”模块，没有实时 iframe——取而代之的是与分类列表中相同的示意线框图，但尺寸更大：一个简洁的单线条 SVG 图表，展示布局的形状（表单的字段、日历的网格、仪表板的方块，以适合该模块的屏幕类型为准），并带有几个从模块自身预览数据中提取的简短标签。每个此类模块下方都必定有一段说明文字，且绝不会被移除：“布局示意图。你的版本将设计为与你的网站相匹配。”它的存在正是为了确保布局草图不会被误认为是成品的、符合品牌风格的预览。

可操作预览（2026-10-04）：越来越多的“为你定制”模块不再显示草图，而是打开一个完整的、可点击的示例网站，并在详情上方全宽显示。所有十二个电商/在线商店模块都打开同一个示例陶艺店 Juniper Kiln，每个模块聚焦其相关部分：商品目录（筛选、排序、搜索、打开商品并选择釉料和尺寸——图片和价格随之变化）；购物车和结账（更改数量、删除商品、输入 WELCOME10、FREESHIP 或 GIFT-2580、按邮编估算配送时间，并结账进入确认页面）；付款方式（信用卡、Pay in 4 和电子钱包按钮）；运费标准；折扣码和礼品卡；商品评价（按星级或照片筛选、标记为有用、撰写评价）；套装和附加商品；销售税（更改配送州，税费行随之变化）；客户账户（登录、再次购买、追踪包裹、发起退货）；订单邮件（确认、已发货和已送达邮件，并附有可用的物流追踪页面）；退货和换货（查找订单、选择商品和原因、获取退货标签）；以及库存（店主视图，更改库存会改变购物者看到的内容）。所有十个在线课程与数字产品模块都打开一个示例面包学校 Rise & Crumb：播放课程（速度、字幕）、标记为已完成、观看进度环填充、参加测验、从免费预览报名、查看证书、在课程下方提问、购买数字下载、选择课程套餐或勾选结账附加项，并切换到店主视图以重命名、重新排序、添加或取消发布课程，并设置每周开放时间。在发布时间表模块中，框架上方的“预览时间”行提供“快进一周”（以及“回到今天”），让你观看锁定的课程在其日期开放。

框架上方是该模块提供的每个变体的一行选项（例如，店铺布局：网格、列表或精选；购物车：滑出式购物车或购物车页面，以及结账：单页或分步；发布规则：按设定日期、加入后的天数，或完成最后一课后）。选择其中一项会立即以该变体重绘示例网站，并保存在页面地址中（?v=…），因此可以分享特定变体的链接。“桌面”和“手机”会调整框架大小，使示例网站像在手机上一样重新排版（在真实手机上，这将显示为普通的“手机视图”标签）。“重置”会将示例网站恢复为初始状态。一行简短的“待办事项”列出首先应点击的内容，每个所选变体的说明位于框架下方。在简报中设有品牌色的项目中，“在此网站配色中显示”会将示例网站的主色替换为项目自身的颜色（仅当该颜色足够深，能够保证白色按钮文字清晰可读时）。

可操作预览中的任何内容都不会传送到服务器。没有支付连接：结账页面标注为“预览——不收取任何费用，也不会发送订单”，卡号是固定的只读示例，电子钱包按钮（Apple Pay、Google Pay、PayPal）仅显示提示说明。不会发送任何邮件，不会发布任何评价，也不会保存任何内容；离开页面后，所有内容都会被清除。示例商家、商品、人员和价格均为虚构。框架下方的说明文字写明：“使用虚构商家示例数据的可操作预览。你的版本将使用你自己的商品、价格、文案和品牌。此处的任何内容均不会收费、保存或发送。”其他所有“为你定制”模块仍只显示布局示意图。

• 访客所见——以编号、通俗易懂的方式逐步说明使用该模块的人实际体验到的内容。
• 你获得的内容——说明该模块为项目所有者提供了什么（例如记录在真实位置的潜在客户、可更新的状态等）。
• 功能，以及——仅针对在目录中定义了真正具名变体的模块——本节中可直接选择的“选择变体”卡片组（默认选中第一个，并带有小勾号标记），因此真正的二选一决定在此处选择，而不是手动输入。
• 为何重要——说明商家为何需要它的客观理由。
• 如何定制（立即可用）或可供选择的变体（为你定制）——该功能真正可以做出哪些不同的调整。
• 最适合：与卡片上相同的商家类型标签，完整显示。
• 构建方式——用一句简单的话说明这个模块究竟如何产生（要么是引擎目前渲染的经过测试的页面，要么是AI在构建期间内置到网站中），如果需要支付或地图等第三方账户，请一并注明。

在所有内容下方是“添加到 <项目名称>”（如果尚未选择项目，则为“添加到你的项目”，即无项目浏览）。如果该模块已有任何自定义建议，则会先以清单形式显示——对于“现已就绪”模块标为“推荐自定义”，对于“为你定制”模块标为“选择你想要的变体”——勾选其中任何一项，都会将该具体内容加入发送内容，而不只是一个无声的复选框。

对于带有可用预览的模块，面板位于左栏预览下方，并以“你的变体”开头——即在预览的选项行中选定的变体（例如“购物车：购物车页面 · 结账：分步进行”）。点击添加时预览中显示的内容就是被记录的内容：它会与该模块一起保存在项目的简报中，工作项显示为“变体：…”，以便负责构建的人按该布局进行构建。如果模块在“功能”部分还有命名选项，则会在那里询问“哪一项对你最重要？”，以免两项选择混淆。

“你的需求有何不同？”是一个自由文本备注，带有与 aiKit 其他地方相同的语音输入按钮，另有“附加照片或 PDF”按钮（仅限图片和 PDF，每个最大 2.5 MB），用于上传徽标、参考照片或规格表——附加的文件会在此处以可移除的标签显示。如果模块有真正需要具体回答才能构建好的问题，它们会显示在“我们会问你”下方，每个问题都有单独的可选文本框，因此你可以提前回答，而无需等待日后被询问。

一旦进入真实项目，“添加到计划”始终可用：它会将所选内容记录在项目简报中（即“网站计划”页面和项目页面所读取的同一份计划），并在“反馈”标签中创建一个真实的、面向员工的工作项，标记为“等待我们处理”，与其他任何请求的处理方式完全相同。“立即添加并构建”仅在项目已有可编辑的真实文件时才会出现在其旁边——即首次构建已完成，或网站已上线；它会执行相同的两项操作，然后立即通过“修复”（Fix with AI）所使用的同一个 AI 编辑器运行该工作项，没有单独的队列。如果尝试添加项目中已有的模块，将直接被拒绝，并显示简单的“已在此项目中”消息，而不会创建重复项。

发送后，确认信息会取代按钮，显示实际发生的情况——简单的“已作为工作项添加到计划”消息，或者对于立即构建的请求，显示真实状态（已开始，或无法开始的具体原因，例如因需先审核而被暂停），并附上两个直达链接“打开计划”和“查看请求”，让你随时知道它去了哪里。

在 /projects/kit 页面——与托管项目仪表板其他部分相同的真实登录方式，无需项目——一切功能都完全相同，直到你尝试添加内容为止。按下“添加到项目”（当未加载项目时，按钮显示此文字，而不是“添加到计划”）会打开“添加到哪个项目？”，这是一个小型选择器，列出你账户上的所有项目。选择一个后，你会直接进入该项目自己的 Kit Explorer，并保持同一模块打开，随时可以完成添加。如果你还没有任何项目，选择器会直接说明，并提供“创建项目 →”的直接链接，而不会让你束手无策。