iterative-build-page

用途

Iterative Build Page 用于逐段、增量的方式构建 Nuxt 3 落地页。用户一次描述一个区块，智能体使用 RDS Vue UI 设计系统组件将每个区块添加进页面，页面随之交互式增长。区块可在任意时点添加、修改、重排或删除。当用户满意后，智能体将页面定稿为可用于生产环境的 Nuxt 3 .vue 文件，并附带一个内容 JSON 文件。

该技能依赖 rds-component-mapper 技能，将自然语言的区块描述翻译为正确的 @rds-vue-ui/* 组件。

工作流程

1. 脚手架（Scaffold）——从一个空白页面脚手架开始，包含布局包裹器和 <script setup>。
2. 描述（Describe）——用户用自然语言描述一个区块。
3. 映射（Map）——使用 rds-component-mapper 决策树选择最合适的组件。
4. 生成（Generate）——生成带有组件及其 props 的 Vue 模板片段。
5. 追加（Append）——将区块添加进页面并显示当前页面状态。
6. 迭代（Iterate）——用户可添加更多区块、修改已有区块、重排或删除。
7. 汇总（Summarize）——每次变更后，以编号列表形式呈现当前页面结构。
8. 定稿（Finalize）——当用户说“done”或“finalize”时，生成最终页面及内容 JSON。

支持的操作

• Add（add <description>）：在页面末尾追加一个新区块。
• Insert（insert before/after <section>）：在特定位置插入一个区块。
• Modify（modify <section> <changes>）：更改已有区块的 props、内容或组件。
• Remove（remove <section>）：从页面中删除一个区块。
• Reorder（reorder <section> to position N）：将区块移动到不同位置。
• Preview（preview）：显示当前页面结构摘要。
• Finalize（finalize）：生成最终的 .vue 页面和内容 JSON。

区块通过其从 1 开始的位置编号或摘要列表中显示的区块名称来引用（例如 modify 3 change title to "Our Programs" 或 remove hero）。

区块描述 → 组件映射

以下为常见自然语言描述及其对应的 RDS 组件映射。当用户描述区块时，优先匹配这些模式；对于不匹配的描述，回退使用 rds-component-mapper 决策树。

• “Hero with dark gradient and centered title” → HeroStandardApollo（theme prop 用于渐变变体）
• “Hero with video background” → HeroStandardApollo（设置 videoSrc prop）
• “Hero with image slider” → HeroCarouselApollo（提供 slides 数组）
• “3 cards showing programs” → CardImageArticle（包裹在 Bootstrap row/col-md-4 网格中）
• “Card grid with icons” → CardIconArticle（包裹在 Bootstrap 网格中）
• “FAQ accordion” → OverlapAccordionAtlas（提供含问答对的 items 数组）
• “Student testimonial with photo” → SectionTestimonialFalcon（设置 quote、author、image props）
• “Multiple testimonials carousel” → CarouselTestimonialApollo（提供 testimonials 数组）
• “Standard footer” → FooterStandard（全站页脚组件）
• “Stats showing 50,000 graduates” → SectionStatApollo（提供含 label/value 对的 stats 数组）
• “Image carousel” → CarouselImageApollo（提供 images 数组）
• “Full-width parallax image section” → SectionParallaxApollo（设置 backgroundImage prop）
• “Content section with text and image” → SectionApollo（标准内容块）
• “Video embed” → VideoApollo（设置 videoId 或 src prop）
• “Call-to-action banner” → SectionApollo（使用 CTA 变体及按钮 props）
• “Navigation bar” → NavbarStandard（含 logo 与链接的顶部导航）

使用方式

每个新页面从以下脚手架开始：

<template> <div> <!-- Sections will be added here --> </div> </template>

<script setup> // RDS components are auto-imported — no explicit imports needed. // Content JSON is loaded from assets/content/<page-name>.json

const { data: content } = await useAsyncData('content', () => import(~/assets/content/<page-name>.json).then(m => m.default) ) </script>

<div> 包裹器作为根元素，每个区块作为直接子元素追加。

区块模板模式包括：单组件区块（如 Hero）、重复组件网格（如 Programs 卡片）、带手风琴条目的区块（如 FAQ）。修改已有区块时的规则：更改组件需整体替换模板片段但保留 JSON 中的内容键；更改 props 需更新内容 JSON 中相关键值对；更改布局需调整 Bootstrap 网格类；添加条目需追加到内容 JSON 的 items 数组；删除条目需从 items 数组移除并在需要时调整网格。重排时需同时移动模板区块和对应的 JSON 块。

输出格式

定稿时生成两个文件：

页面文件 pages/<page-name>.vue：使用 <script setup> 与 Composition API；RDS 组件自动导入（无显式 import 语句）；使用 Bootstrap 5 网格类（container、row、col-*）布局；内容通过 useAsyncData 从 JSON 文件绑定；每个区块用语义化注释包裹（<!-- Section: Name -->）。

内容文件 assets/content/<page-name>.json：顶层键对应区块名称（kebab-case）；每个键包含该区块的 props/数据；重复项目（卡片、手风琴条目、证言）使用数组；所有文本内容存储于此——Vue 模板中不含硬编码字符串。

限制

资料中未提供该技能对 Nuxt 版本、RDS 组件库版本、可用主题或样式自定义范围的进一步说明。此外，资料未提供该技能的安装方式、许可或收费信息，暂未提供。