这个开源工具可以从单个提示器中旋转整个网站

本教程是创建用于使用 React 19 和 Next.js 15 自动生成网页的综合指南的第一部分。 开源: (https://github.com/aifa-agi/aifa) 以下是路线图: 部分 1 (你在这里):核心架构深潜 - 捕捉所有路径,PageHtmlTransformer组件和强烈键入的页面配置。 第二部分:先进的页面类型 - 自动化文档页面和交互式教程。 第三部分:人工智能引擎集成 — 连接外部模型(ChatGPT,Claude)和我们的内部aifa代理,以实现连续自主的内容生成。 奖金:案例研究 - 部署,赚取和扩展生产级AI SaaS,使用用户注册和 Stripe 付款。 此一步一步的蓝图将引导您建立自己的企业准备的v0克隆,并提供身份验证和付款流程. 从概念到推出,一个真实的AI产品 - 完整的源代码可在 . 订阅以跟随整个系列 - 这只是开始! 是的 技术堆栈: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT 我们的平台将企业级的稳定性与血腥的创新相结合: React 19 和 Next.js 15 与 App Router 一起提供 sub-100ms 渲染和真正的并行路线。 Vercel 支持零停机时间部署和全球边缘扩展。 Prisma & Neon 可提供型号安全、闪电快速的数据访问。 Stripe 处理即时、符合 PCI 的付款。 AI SDK + ChatGPT层在生成智能中,因此AIFA Dev Starter可以在几分钟内完成完整的UI,内容模块和原型 - 完整的内置身份验证和多语言AI聊天。 如何运作 提示:向 ChatGPT 发送单个自然语言请求。 生成:获取基于 JSON 的 PageConfig,定义您的页面的部分、元数据和布局。 构建:将配置文件投放到您的 Next.js 应用程序中,并运行 npm 运行构建。 需要企业整合? 只需在 [即将到来的 aifa.dev(https://aifa.dev) 中打开我们的“v0 企业模式”,以获得先进的自动化、基于角色的访问和可扩展的微服务架构。 下一篇: ( 用于先进的自动化、基于角色的访问和可扩展的微服务架构。 https://aifa.dev 谁赢得了AI驱动的网站生成器? 工作室,企业,初创公司和自由职业者 下一代设计机构:从模拟到几分钟的大规模生产 想象一下一个能够构建可扩展的技术生态系统的机构,而不仅仅是静态模拟器。 這不是科幻小說,這是創造性資本與自動執行相遇的新運作范式,並且有了內建的 Stripe 整合,您可以從第一天開始從這個新速度中賺錢。 企业部署:品牌一致性和激进的可扩展性 一个经典的企业用例:为国家餐厅特许经营商提供的转钥匙的QR菜单解决方案. 您只需一次构建核心用户体验的主设计系统,例如产品卡或菜单。 每个位置都通过一个简单的界面来定制其品牌和内容,而核心的用户体验、性能和设计完整性仍然被锁定并保持一致。 , ,和 . radical scalability bulletproof brand consistency unmatched speed-to-market 核心引擎:我们的 JSON-to-React 转换器架构 整个系统由两个关键组件驱动: Intelligent Prompt Engineering We use highly-tuned instructions that command the AI to pull battle-tested section templates from a vector database and tailor them to your specific request. The Component Transformer Architecture Our React components are engineered to interpret these JSON configs, instantly transforming them into fully-rendered, interactive pages. 虽然ChatGPT和Claude等外部模型负责内容生成,但我们的专有变压器组件是系统的核心引擎,我们建立的部分是为了保证性能和设计忠诚度。 人工智能原生文档:使用本教程作为活生生的知识库 停止 文档:开始 它。 阅读 指挥 此指南的真正力量不在于阅读它,它旨在成为您的项目的私人,专家知识库。 它是如何工作的: 将整个文件发送到ChatGPT。 提出具体的背景问题:“如何实现自定义部分?”“FullScreenWrapper的用途是什么?”“向我展示DoublePresentation组件的代码”。 通过完整的代码片段获得准确的、生产准备的答案。 试试这种方法,你会明白为什么2025年所有的技术文档都需要人工智能原生。 介绍:我们的哲学 - 一致性特朗普的原始速度 本指南不是关于创建最快的AI页面生成器,而像v0这样的AI工具优先考虑原始生成速度,但我们的方法专注于一个更关键的业务指标: 我们的主要目标是在您的整个数字足迹中提供防弹设计一致性和建筑和谐。 Total Cost of Ownership (TCO) 虽然单页的初始生成可能需要更长时间,但在开发,维护和品牌管理方面的下游节省是指数性的。 防弹性品牌一致性:每一个人工智能生成的页面都自动符合您已经建立的设计系统,没有恶意的组件,没有非品牌的设计。 无缝的用户体验:该架构确保了用户的和谐和凝聚力的旅程,消除了快速生成的网站中常见的棘手不一致。 大幅减少改造:通过在创建时强制执行标准,我们可以最大限度地减少通常需要后代的昂贵和耗时的手动调整。 真正的架构可扩展性:随着扩展,我们的方法变得更加高效. 您生成的页面越多,速度和一致性的回报就越大。 The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. 超越基本:处理现实世界的复杂性 本初步教程专注于使用我们的核心构建标准页面 , ,和 然而,开源代码库为更复杂的需求提供了先进的、外包解决方案: Header Body Footer 文件页面具有先进的,嵌入式导航。 交互式教程页面,具有时尚的,一步一步的元素。 我们的架构旨在实现可扩展性. 对于独特的、高度互动的功能,例如动画演示文稿、实时数据仪表板或具有复杂状态管理的组件,您可以注入 直接进入渲染管道,这为您提供了实现定制功能的灵活性,而不会损害系统的核心完整性。 Custom Components Your Next Step: Hands-On with Custom Components 要真正掌握这个系统,你的实际任务是探索创建和整合一个新的自定义组件的过程,这将巩固你对建筑的力量和灵活性的理解。 概念:AI作为您的品牌管理者,而不仅仅是内容引擎 现代数字操作需要速度,品牌完整性和市场敏捷性. 我们的架构通过将您的设计系统作为一个结构化,智能的知识库来实现这一目标。 通过为AI提供您精确的 UI/UX 标准,它不仅仅是内容生成器 - 它成为您品牌身份的最终管理者,在页面创建生命周期的每个阶段都执行一致性。 五步工作流程:从设计系统到SEO优化构建 注入您的设计系统:我们将您的组件模板和明确的说明,如何在视觉和结构上实施它们,确保100%的品牌一致性。 用提示符定义目标:用户、项目经理或开发人员提交一个简单的文本提示符,描述所需页面或其元素。 人工智能解释与结构:人工智能代理分析请求,生成语义内容,并智能地将其从知识库中绘制到适当的预先批准的模板中。 生成声明式PageConfig:基于所选模板,系统输出强有力的PageConfig - 最终页面的声明式JSON描述,这保证了品牌合规性,并简化了下游开发。 自动构建和部署:构建过程中由我们的渲染组件消耗,输出是一个生产准备的,SEO优化的页面,视觉上和技术上符合您的企业标准。 1.3. 业务影响:驱动转换和Slash TCO 加速进入市场:使用单个提示启动新的定位和产品页面,利用预先批准的模板实现无与伦比的速度。 Ironclad 品牌完整性:品牌一致性和质量控制都是自动化的,确保每个新页面都完美反映了您的设计系统。 减少手动和可扩展的A/B测试:授权营销团队扩展页面变量和A/B测试内容,而不涉及开发人员在布局过程中。 针对全球规模构建:所有文本和用户界面元素都集中化,使本地化和市场调整无缝。 架构灵活性:旨在完美整合到现代的CI/CD管道、托管平台和其他人工智能驱动的工作流程中。 1.4. 你的路线图通过这个系列 在这个全面的教程中,我们将引导您通过: 解构核心架构:深入探索PageHtmlTransformer、Wrapper/FullScreenWrapper系统以及部分组件如何相互作用。 掌握渲染管道:了解部分渲染、配置键入以及配置文件和 React 组件之间的关系背后的逻辑,以便您自己扩展系统。 学习如何指导人工智能:学习如何为元数据、标题和脚本创建结构化指令,并定义生成JSX片段的体内内容的规格。 根据需求生成页面:应用您的知识来创建人工智能使用的配置文件,以生成完全符合您的架构和设计标准的页面。 2. 我们的AI驱动架构的解剖学 我们的项目是为了最大限度地扩展、维护和开发速度而组织的,我们使用 Next.js 15 应用路由器公约,包括平行路线( )和私人文件夹( ,创造一个干净而强大的结构。 @right _folder 项目目录树 app/@right/ ├── public/ │ ├── (_routing)/ │ │ └── [[...slug]]/ │ │ └── page.tsx # 1. Dynamic Catch-All Route Handler │ └── (_service)/ │ ├── (_config)/ │ │ └── public-pages-config.ts # 6. AI-Generated Page Configurations │ └── (_libs)/ │ └── utils.ts # 7. Configuration Utilities └── (_service)/ ├── (_types) │ └── page-wrapper-types.ts # 5. The TypeScript Data Contract (AI UI) └── (_components)/ └── page-transformer-components/ ├── page-html-transformer.tsx # 2. The Core Page Transformer Engine ├── custom-sections/ # Directory for complex, interactive components ├── wrappers/ │ ├── full-screen-wrapper.tsx # 3. Immersive Full-Screen Wrapper │ └── wrapper.tsx # 4. Standard Content Section Wrapper ├── header-sections-components/ │ ├── header-section.tsx # 8. Standardized Header Component │ ├── page-header-elements.tsx # 9. Atomic Header Elements (H1/H2) │ └── announcement.tsx # 10. Announcement Banner Component ├── body-sections-components/ │ └── body-section.tsx # 12. Flexible Body Content Container └── footer-sections-components/ └── footer-section.tsx # 11. Standardized Footer Component 进入全屏模式 退出全屏模式 关键组成部分路径 1. @/app/@right/public/(_routing)/[[...slug]]/page.tsx 2. @/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer.tsx 3. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx 4. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx 5. @/app/@right/(_service)/(_types)/page-wrapper-types.ts 6. @/app/@right/public/(_service)/(_config)/public-pages-config.ts 7. @/app/@right/public/(_service)/(_libs)/utils.ts 8. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx 9. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx 10. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx 11. @/app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx 12. @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx 进入全屏模式 退出全屏模式 核心组件工具包:生产准备的页面脱离盒子 目的 我们的标准组件库为在规模上创建高度编写、品牌一致的页面提供了设计基础,该集合包括我们系统的架构支柱:动态路由、中央变压器引擎、多功能的内容包装、统一的标题和脚部部分以及驱动它们的配置文件和数据合同。 核心建筑原则: Bulletproof UI 一致性:每个组件都遵循统一的设计系统和行为模式,确保无缝和可预测的用户体验。 AI-Native by Design:该架构优化为自动生成,使AI能够在没有手动干预的情况下构建复杂的页面。 SEO从基础上优化:搜索引擎优化和语义HTML的最佳做法是注入的,而不是注入的。 Type-Safe & Predictable:我们利用TypeScript的严格打字来执行AI和UI之间的可靠数据合同,确保系统的稳定性。 模块化和复合:每个组件都是一个独立的单元,可以解决一个特定的问题,旨在实现最大限度的可重复使用性和可扩展性。 这些组件共同构成了系统的基石,确保每个AI生成的页面不仅是视觉一致的,而且在技术上也是强大和企业准备的。 第一百一十三条 该 组件:为动态 URL 提供通用捕获所有路线 [[...slug]]/page.tsx 2.1.1.1 捕获所有路径的战略价值:敏捷性和部署速度 catch-all 路径是 Next.js 中的动态路由模式,允许单个页面组件处理无限数量的 URL 片段。 公约,该 参数成为包含 URL 路径的每个部分的数组,无论它有多深。 [[...slug]] slug 从商业角度来看,这种建筑选择是一个巨大的竞争优势,这就是为什么: 无限的嵌入和内容深度:您不再受到项目的文件结构的限制. 像 /public/category/nike/sneakers/black/12345 这样的 URL 被与 /public/test 完全相同的组件处理。 无摩擦导航和即时页面启动:部署新页面就像将其配置添加到中央文件一样简单。页面即时生动,而无需创建新组件或导航复杂的文件系统。 内置自动化:此架构是完全自动化的内容生态系统的基础。可编程自动生成的侧栏或菜单来读取页面配置并动态构建导航。 2.1.1.2 AI 助理的动态 URL 价值:无限内容可扩展性 在当今竞争激烈的环境中,现代的SaaS和AI平台需要灵活地生成新页面,无论是由用户、管理员或自动人工智能代理发起,内容都必须为即时创建和部署进行架构。 Strategic Business Advantages: 消除建筑限制:消除内容结构和嵌入深度的所有限制,允许您的数字存在无限扩展,而无需代码更改。 Build complex content hierarchies for any use case. Navigation is driven purely by your business logic, not constrained by a rigid file system. This decouples your content strategy from engineering cycles, empowering product and marketing teams to execute faster. Unlocks Unmatched Agility: 允许人工智能驱动的自动化:该架构是为人工智能世界设计的,为人工智能代理提供了一个稳定的基础,可以自动生成,配置和部署您的网站的整个部分,从产品目录到知识库。 2.1.1.3 规模上的现实世界使用案例 该架构不是理论性的,而是用于部署高价值、深度嵌入的内容结构,推动业务增长的测试模型: Turnkey QR Menu Systems:为国家餐厅特许经营部署白色标签的解决方案.每个地点都可以有一个独特的,深度分类的菜单(例如, /public/menu/dallas-tx/dinner/mains/pasta-dishes),同时保持完美的品牌一致性和UX完整性。 电子商务产品目录:立即推出无限变化的广泛产品线,如 /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 等 URL 成为创建和管理的微不足道,使市场快速扩张和细微的产品组织成为可能。 企业和教育门户:构建广阔的知识库或教程平台,在其中内容可以被逻辑地组织,无论等级需要走多深(例如, /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting)。 At its core, the process is elegantly simple yet powerful: it dynamically translates any URL path into a corresponding page configuration, which is then rendered on the fly. This is the technical foundation that unlocks the business agility described earlier. The component's primary tasks are: It captures the incoming URL path as an array of segments (e.g., ). Receive the URL: ["category", "nike", "sneakers"] The function proactively reads your file. It informs Next.js of all valid page routes defined in your configuration. For the business, this translates to comprehensive Static Site Generation (SSG), ensuring every page is pre-built for lightning-fast load times and optimal SEO. Generate Static Paths: generateStaticParams public-pages-config.ts export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug ? page.metadata.slug.slice(1) : [], })); } When a user requests a URL, the component receives the array. It then uses the utility to perform a high-speed lookup against the configuration array (prepending for an accurate match). If a match is found, the configuration is passed to our universal component for rendering. Fetch and Render: slug getPageBySlug "public" PageHtmlTransformer export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) { return Page not found; } return ; } 因为该 可以是任何长度和搜索是直接匹配,这个系统提供了无限的巢穴深度,无路径碰撞的风险。 slugArr 2.1.1.5 关键职能及其业务影响 generateStaticParams:通过告诉Next.js哪个功能来驱动性能和SEO 1.1.7 组件:执行引擎 它是一个单一的,强大的 Next.js 服务器组件,作为每个动态生成的公共页面的通用处理器。它负责根据 URL 获取正确的页面配置,并组织最终渲染,确保最大性能和外包 SEO 合规性。 // @/app/@right/public/(_routing)/[[...slug]]/page.tsx

import { PageHtmlTransformer } from "@/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer"; import { getPageBySlug } from "@/app/@right/(_service)/(_config)/pages-config"; import { constructMetadata } from "@/lib/construct-metadata"; import type { PageConfig } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { getAllPublicPages } from "../../(_servise)/(_libs)/get-all-public-pages";

interface Props { params: Promise ; }

export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages();

return pages.map((page: PageConfig) => ({ slug: page.metadata.slug || [], })); }

export async function generateMetadata({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]);

if (!pageConfig) return {}; return constructMetadata(pageConfig.metadata); }

export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const publicPageConfig = getPageBySlug(["public", ...slugArr]);

if (!publicPageConfig) { return Page not found ; }

return ; } Enter fullscreen mode Exit fullscreen mode 2.1.1.7. The Bottom Line: Catch-All Routes as Your AI Content Engine 将捕捉所有路径与集中页面配置相结合,可创建一个最大限度的灵活、可扩展和专门用于AI驱动的内容编排的架构,这种方法对开发人员和AI代理人都是友好的,从概念到部署创造了无缝的工作流程。 核心原则简单但具有转变性: 没有新的代码文件,没有复杂的文件夹结构. 导航和渲染系统自动适应,这使得一个真正灵活和可扩展的AI驱动平台的基石。 A new page is just a new entry in a configuration file. 2.1.3. FullScreenWrapper vs. Wrapper: Crafting Immersive Full-Screen Experiences 1.3.1 主要目的 该 专为需要具有背景视频或图像支持的沉浸式全屏演示的部分而设计,它作为“英雄”部分的基本容器,内容优雅地覆盖丰富的媒体元素。 FullScreenWrapper 2.3.2 结构结构结构 该组件采用复杂的层结构,以确保内容保持可读性和视觉上不同于背景。 Technical Highlights: : Guarantees the section fills the entire viewport height, creating a captivating, full-bleed effect. min-h-screen Positioning: Enables precise control for stacking elements. relative z-index / ): Positioned with and to sit behind all other content. Background Elements ( video img absolute z-0 : Uses positioning with to ensure it always appears above the background. Content Container relative z-10 {backgroundElement} // z-0 {children} // Header → Body → Footer 进入全屏模式 退出全屏模式 2.1.3.3 定制和可扩展性 该 可轻松定制,您可以直接通过 靠近。 FullScreenWrapper className 进入全屏模式 退出全屏模式 : Background videos automatically receive an class to improve text readability, but this can be easily overridden. Opacity Control opacity-40 平滑过渡:一个过渡的所有持续时间500类是内置,以确保平滑的变化背景属性。 2.1.3.4. Advanced Styling and Reusable Templates 当您需要部分划分器、边界、闪光效果或背景模糊时, 提供了实现这些风格的理想基础,这使得它非常适合创建高度时尚、可重复使用的模板。 FullScreenWrapper typescript

Enter fullscreen mode Exit fullscreen mode 1.3.5 组件 // @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx

import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils";

interface FullScreenWrapperProps extends HTMLAttributes { videoUrl?: string; imageUrl?: string; className?: string; children: React.ReactNode; }

export function FullScreenWrapper({ videoUrl, imageUrl, className, children, ...props }: FullScreenWrapperProps) { let backgroundElement: React.ReactNode = null;

if (videoUrl) { backgroundElement = ( ); } else if (imageUrl) { backgroundElement = ( ); }

return ( {backgroundElement} {children} ); } Enter fullscreen mode Exit fullscreen mode 2.1.4. Wrapper: The Standard Sectional Container 2.1.4.1. Primary Use Case The 它是大多数内容部分的默认,可预测的容器,旨在为信息块提供标准叠加、内容中心化以及一致、可预测的布局。 Wrapper 2.4.2 结构与风格 typescript {children} // Header → Body → Footer 进入全屏模式 退出全屏模式 The component's structure is simple and optimized for performance, relying on a few key Tailwind CSS classes: py-10 lg:py-14:适用于响应式垂直涂层,可在设备上保持一致的间隔。 容器 mx-auto px-4:创建一个中心化,最大宽度的容器,具有水平垫,确保内容是清晰的和可读的。 : Utilizes the current theme's CSS variable for the background color, ensuring seamless integration with light/dark modes. bg-background 2.1.4.3. Customization Points 虽然从设计上来说是最小的,但 是通过自定义风格的灵活基础 prop. It's the perfect base for adding: Wrapper className Custom background colors or gradient effects. Borders or dividers between sections. Subtle visual enhancements like blur or glow effects. 2.1.4.4. Building Reusable Templates typescript // Пример для pricing-секций 进入全屏模式 退出全屏模式 当您的设计需要具有独特风格但具有标准、中心内容结构的模板时, is the ideal choice. It provides the structural backbone, allowing you to focus on the specific styles of the template. Wrapper 2.1.4.5. The Component // app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx

import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils";

interface WrapperProps extends HTMLAttributes { className?: string; children: React.ReactNode; }

export function Wrapper({ className, children, ...props }: WrapperProps) { return ( {children} ); } Enter fullscreen mode Exit fullscreen mode 2.1.5. page-wrapper-types.ts: The AI-to-UI TypeScript Contract 2.1.5.1 核心合同:跨越AI生成和UI渲染 该 file establishes a formal, strictly-typed contract between our AI content generator and the UI rendering system. This contract is fundamental to our architecture, defining the structure of all possible page components and the rules governing their interactions to ensure seamless integration and predictability. page-wrapper-types.ts 2.1.5.2 SectionType 类别和 AI 驱动的一代 The AI's operational model is centered around the 首先,人工智能分析了本文中定义的可用部分类型,然后根据用户的请求,它战略性地选择将哪些部分组合到给定页面上。 SectionType typescript export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" Enter fullscreen mode Exit fullscreen mode 2.1.5.3 SEO 优化和元数据 该 界面确保了符合标准的代码标签的生成,这对于搜索引擎优化(SEO)至关重要。 function. This function retrieves data from the page configuration and passes it to the 实用程序,这反过来构建了形成良好的HTML标题。 PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // тег для SEO description: string; // для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } 进入全屏模式 退出全屏模式 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy Managing the heading hierarchy is critical for on-page SEO. 该 section is optional. This is an intentional design choice because certain section types may embed / tags directly within their 虽然这提供了灵活性,但它引入了用户界面一致性的潜在风险,这是该架构的主要目标。 A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } 进入全屏模式 退出全屏模式 2.1.5.5 BodySection:允许最大限度的设计自由 typescript bodyContent?: React.ReactNode; Enter fullscreen mode Exit fullscreen mode By design, the body of a section is granted complete freedom to implement any layout or design. This architectural choice allows for maximum creative flexibility, enabling the AI to generate rich and varied content. This approach deliberately contrasts with the and , which are standardized to maintain a consistent look and feel across the entire application. Header Footer typescript interface FooterContentConfig { actions?: { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link"; }[]; } Enter fullscreen mode Exit fullscreen mode 2.1.5.6 FooterContentConfig:一种最小化的方法 目前的脚印的实现是故意的最小化,它只支持可选的呼叫行动按钮,没有添加任何额外的元素,决定在所有生成的页面中优先考虑简单、速度和一致性。 2.1.5.7. Principles for Extending Type Definitions 要引入新的 , the following steps must be taken: SectionType 更新人工智能知识:人工智能的知识库必须更新,为新部分类型提供全面的说明和示例。 The new type must be added to the enum. Extend Enum: SectionType If the new section requires unique configuration parameters, the corresponding configuration interface must be extended. Expand Interfaces: This process strikes a crucial architectural balance: the and are strictly typed to enforce SEO best practices and UI consistency, while the offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 5.8 组件 // app/@right/(_service)/(_types)/page-wrapper-types.ts

export interface MetadataConfig { title?: string; description?: string; }

export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; }

export interface BaseSection { id: string; type: SectionType; className?: string; }

export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; }

export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; }

export type Section = SectionConfig;

export interface PageConfig { metadata: PageMetadata; sections: Section[]; }

export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: Supporting Arbitrary Custom Components The field within serves as a powerful "escape hatch." It is designed for passing unstructured data to sections that leverage complex or unique custom components that do not conform to our standard interfaces. customComponentsAnyTypeData?: any; SectionConfig To maintain architectural integrity, the type and structure of this data must be rigorously defined and documented 这种设计选择提供了必要的灵活性,可以集成高度互动、动态和先进的面向用户的部分,而不会损害主页架构的核心打字合同。 within the custom component itself 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.6.1. Role in System Architecture 该 file is an AI-generated registry of all public-facing pages within the application. This configuration is automatically generated by our AI based on system instructions and user prompts. Its structure is directly influenced by the available components in our knowledge base examples and the enumerations within the definitions. public-pages-config.ts SectionType 由此产生的配置作为桥梁,将人工智能对用户需求的分析转化为我们的页面渲染系统可以解释和显示的结构。 2.1.6.2. When to Use This File-Based Configuration 这种方法是理想的: 项目数量有限(通常为10～15页)。 Websites with static content that requires infrequent updates. 快速原型和最低可行的产品(MVPs),允许快速启动而无需数据库设置。 Landing pages with a fixed, predefined structure. When to Transition to a Database: 对于大型生产应用,基于文件的方法仅适用于一小组页面,大多数情况下都会从存储这些信息到数据库中获益,从而实现动态内容管理和可扩展性。 2.1.6.3. Configuration Structure typescript export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { /* SEO-заголовки */ }, bodyContent: {}, footerContent: { /* Кнопки действий */ }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; 进入全屏模式 退出全屏模式 2.1.6.4. Configuration Categorization Principle 将配置文件放置在 目录是指它在管理面向公众的页面中的作用。 Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: 我们的架构通过分类配置来支持扩展,确保清洁和有组织的结构: — for public pages (e.g., landing, about, contact). public-pages-config.ts — for documentation sites with advanced navigation. docs-pages-config.ts — for administrative dashboards. admin-pages-config.ts — for blog posts and articles. blog-pages-config.ts 每个类别都有自己的设计: Dedicated configuration file. Specialized section types. 独一无二的逻辑。 2.1.6.5. Interaction with the AI Generation System For our AI system, this configuration file serves as: Defining how objects should be formed. A structural template: PageConfig Providing reference values for the generation process. A data example: Enforced by TypeScript for strict type safety. A type validation schema: 工作流程如下: The AI analyzes the existing configuration file. It generates a new object based on the user's prompt. PageConfig A developer then adds the new configuration to the array. pages 系统会自动识别和注册新路线。 2.1.6.6. Advantages and Limitations Advantages of the File-Based Approach: Easily managed and versioned via Git. Version Control: 类型安全:使用 TypeScript 编译时间类型安全的优点。 No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Lacks dynamic content management capabilities. No Dynamic Updates: Any change necessitates a new build and deployment. Requires Redeployment: 不适用于 UGC:不适用于用户生成的内容。 Becomes difficult to manage beyond 20-30 pages. Scalability Concerns: 6.7 组件 // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts

import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types";

export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; 进入全屏模式 退出全屏模式 2.1.6.8. Conclusion 对于小到中等规模的项目,这是一个实用的解决方案,提供管理易用性和功能性之间的平衡,对于更大规模的应用,它作为过渡到更强大、基于数据库的架构之前的出发点。 public-pages-config.ts 2.7. utils.ts: 配置实用功能 此模块提供用于管理页面配置的实用功能,包括两个主要功能: , which filters all pages with the "public" prefix for static generation, and , which locates a specific page by an exact, case-sensitive match of its slug array. getAllPublicPages() getPageBySlug() // @app/@right/public/(_servise)/(_libs)/utils.ts

import { PageConfig, SlugType, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { PublicPagesConfig } from "../(_config)/public-pages-config";

export function getAllPublicPages(): PageConfig[] { return PublicPagesConfig.pages.filter( (page: PageConfig) => page.metadata.slug?.[0] === "public" ); }

export function getPageBySlug(slug: SlugType): PageConfig | undefined { return PublicPagesConfig.pages.find( (page: PageConfig) => JSON.stringify( page.metadata.slug?.map((s: string) => s.toLowerCase()) ) === JSON.stringify(slug.map((s: string) => s.toLowerCase())) ); } 进入全屏模式 退出全屏模式 2.1.8. header-section.tsx: Unified Section Header 该标准化组件为所有部分类型提供通用标题,确保应用程序的一致性,并提供可选的元素,如公告、H1/H2标题和描述,该组件在SEO优化和维持AI生成的页面的视觉一致性方面发挥着关键作用。 // @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx

import React from "react"; import { cn } from "@/lib/utils"; import { PageHeaderDescription, PageHeaderHeading, } from "./page-header-elements";

import { Announcement } from "./announcement"; import { HeaderContentConfig } from "../../../(_types)/page-wrapper-types";

export type HeaderSectionProps = { headerContent: HeaderContentConfig; } & React.HTMLAttributes ;

export function HeaderSection({ headerContent, className, ...props }: HeaderSectionProps) { if (!headerContent) return null;

const { announcement, heading, headingLevel = 1, description, showBorder = false, } = headerContent;

return ( {announcement && ( )} {heading} {description && ( {description} )} ); } Enter fullscreen mode Exit fullscreen mode 2.1.9. header-section.tsx: 统一的部分标题(原子组件) 本节详细介绍了用于构建头部的原子组件: (支持 H1 / H2) 对于下级,以及 for placing buttons. These components leverage for dynamic HTML tag generation, ensuring correct SEO hierarchy. PageHeaderHeading PageHeaderDescription PageActions createElement // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx

import { HTMLAttributes, createElement } from "react"; import { cn } from "@/lib/utils";

type HeadingTag = "h1" | "h2";

interface PageHeaderHeadingProps extends HTMLAttributes { level?: 1 | 2; }

function PageHeaderHeading({ className, level = 1, ...props }: PageHeaderHeadingProps) {

const Heading: HeadingTag = level === 1 ? "h1" : "h2"; const h1Classes = "text-2xl sm:text-3xl md:text-6xl lg:text-7xl"; const h2Classes = "text-lg sm:text-xl md:text-3xl lg:text-4xl";

return createElement(Heading, { className: cn( "text-center font-bold leading-tight tracking-tighter font-serif", level === 1 ? h1Classes : h2Classes, className ), ...props, }); }

function PageHeaderDescription({ className, ...props }: HTMLAttributes ) { return ( ); }

function PageActions({ className, ...props }: HTMLAttributes ) { return ( ); }

export { PageActions, PageHeaderDescription, PageHeaderHeading }; 进入全屏模式 退出全屏模式 2.1.10. announcement.tsx: 公告组件 This interactive badge component is designed for announcements and notifications. It supports navigation, keyboard control, and conditional rendering, automatically hiding when no content is present. It is used to draw attention to important updates or links. // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx

"use client";

import { useRouter } from "next/navigation"; import { Badge } from "@/components/ui/badge"; import { ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils";

interface AnnouncementProps { badgeText?: string; descriptionText?: string; href?: string; className?: string; }

export function Announcement({ badgeText, descriptionText, href, className, }: AnnouncementProps) { const router = useRouter();

const handleOnClick = () => { if (href) { router.push(href); } };

// Если нет текста для бейджа, описания или ссылки, возвращаем null if (!badgeText && !descriptionText && !href) { return null; }

return ( { if (e.key === "Enter" || e.key === " ") { handleOnClick(); } }} > {badgeText && ( {badgeText} )} {descriptionText && ( {descriptionText} )} {href && } ); } 进入全屏模式 退出全屏模式 2.1.11. footer-section.tsx: Unified Section Actions This standardized footer component includes action buttons. It supports multiple buttons with various styling options, ensuring uniformity of Call-to-Action (CTA) elements across all sections. It automatically hides when no actions are defined. // @app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx

"use client";

import { useRouter } from "next/navigation"; import type { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { PageActions } from "../header-sections-components/page-header-elements";

interface FooterAction { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }

interface FooterSectionProps extends HTMLAttributes { actions?: FooterAction[]; }

export function FooterSection({ actions, className, ...props }: FooterSectionProps) { const router = useRouter();

if (!actions || actions.length === 0) { return null; }

return ( {actions.map((action) => ( router.push(action.href)} > {action.label} ))} ); } Enter fullscreen mode Exit fullscreen mode 2.1.12. body-section.tsx: 任意内容容器 2.1.12.1. Purpose and Philosophy serves as a highly flexible container for the main content within sections. Unlike the strictly standardized Header and Footer components, 提供任何 React 内容放置的完全自由。 BodySection BodySection 2.1.12.2 内容生成原则 满意为 必须作为简单的 TSX 生成而不使用 elements, where all elements are presented in an expanded format. Crucially: bodyContent .map() typescript // ✅ bodyContent: ( <> Feature 1 Description 1

Feature 2 Description 2

Feature 3 Description 3

) 进入全屏模式 退出全屏模式 // ❌ bodyContent: ( {features.map(feature => )} ) 进入全屏模式 退出全屏模式 2.1.12.3 何时使用自定义组件 如果一节需要复杂的逻辑(状态、效果、交互性),请创建一个独立的组件并将其添加到 作为一个独立的实体。 PageHtmlTransformer typescript // @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx export function BodySection({ children, className, ...props }: BodySectionProps) { const hasChildren = children !== null && children !== undefined && !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === "");

if (!hasChildren) return null;

return ( {children} ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.4. Component // @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx

import type { HTMLAttributes, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { SectionType } from "../../../(_types)/page-wrapper-types";

interface BodySectionProps extends HTMLAttributes { children?: ReactNode | null; type: SectionType; }

export function BodySection({ children, className, ...props }: BodySectionProps) { const defaultHeightRem = 0; const hasChildren = children !== null && children !== undefined && // Covers case when children = [] or "" !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === "");

if (!hasChildren && defaultHeightRem) { return ( {/* Empty section with default height */} ); }

if (!hasChildren) { return null; }

return ( {children} ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.5. Conclusion acts as a bridge between the system's standardized architecture and the creative freedom of AI generation, striking a balance between control and flexibility. BodySection 2. 先进的定制组件 先进的自定义组件旨在提供复杂的交互式功能,超出我们标准架构模式的能力,这些组件专为需要状态管理、复杂的动画、实时数据处理或独特的业务逻辑的场景而设计。 When to Use Custom Components: 互动元素:具有验证的表单,计算器,产品配置器。 : Complex transitions, parallax effects, automatic sliders. Animated Presentations : Chats, notifications, live data feeds. Real-Time Functionality 适应逻辑:在桌面与移动设备上具有根本不同的行为的组件。 : Non-standard interface elements specific to the project. Unique UI Patterns 建筑一体化: Custom components are integrated into the 如何区分 A 内部声明 block. This approach allows them to access system-wide context, such as theme and device information, while maintaining a consistent look and feel through shared CSS classes and design tokens. Although they adhere to the system's visual language, they retain complete freedom in their internal logic and implementation. This strategy provides a balance between standardizing the majority of content and allowing for creative freedom in implementing complex interactive elements. PageHtmlTransformer case switch 2.2.1 实施自定义组件的指南 2.2.1.1. Wrapper Policy : 定制零部件必须直接返回而不被封装在 或 . They are responsible for managing their own layout, padding, and layering to ensure full control over their presentation. No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 组件编写 : 定制组件的 prop 界面应在组件文件本身的顶部声明。 在 Config 部分中。 Local Prop Interfaces customComponentsAnyTypeData 2.2.1.3 扩展 SectionType SectionType : 每个自定义组件需要添加一个独特的类型 在内 这确保了正确的类型检查,并使 转换器中的声明,以正确识别和渲染组件。 Add a New Section Type SectionType page-wrapper-types.ts switch typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts // ... export type SectionType ="hero-section" | “new-custom-section”; 进入全屏模式 退出全屏模式 2.2.1.4 在 ageHtmlTransformer 中更新案例 定制案例处理新案例被添加到PageHtmlTransformer中,以便处理自定义部分类型。 // В PageHtmlTransformer: case "new-custom-section": return ( ); 进入全屏模式 退出全屏模式 2.2.1.5 定制配置结构 : 以下是包含自定义部分的页面配置的示例。 对象,可以具有组件所需的任何结构。 Configuration Structure customComponentsAnyTypeData export const PublicPagesConfig = { pages: [ { metadata: { id: "CIUD", title: "1", description: "2", slug: ["public", "name"], type: "new-custom-section", }, sections: [ { id: "new-custom-section", type: "new-custom-section", customComponentsAnyTypeData: { metaData: { metaTitle: "1", metaDescription: "2", }, customData: { mediaUrl: "/_static/illustrations/3.png", title: "4", description: "5", }, }, } as SectionConfig, ], },

] as PageConfig[], 进入全屏模式 退出全屏模式 2.2.2 个性化组件示例 二二一 DoublePresentation 双重介绍 是的 2.2.2.1.1 更新核心类型 首先,将新部分类型添加到 一个。 SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts

export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" 进入全屏模式 退出全屏模式 2.2.2.1.2 添加新案例 转换器 转换器 接下来,添加相应的 二是 把元素变成元素 case PageHtmlTransformer case "double-presentation-section": return ( ); 进入全屏模式 退出全屏模式 2.2.2.1.4 配置示例 以下是如何配置的例子。 component in . DoublePresentation public-pages-config.ts // app/@right/(_service)/(_types)/page-wrapper-types.ts

export interface MetadataConfig { title?: string; description?: string; }

export type CuidString = string;

export interface PageMetadata { id: CuidString; title: string; description: string; image?: string; slug?: string[]; type: SectionType; }

export interface BaseSection { id: string; type: SectionType; className?: string; }

export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; }

export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; }

export type Section = SectionConfig;

export interface PageConfig { metadata: PageMetadata; sections: Section[]; }

export type SlugType = string[]; 进入全屏模式 退出全屏模式 2.2.1.5 组件 完整的代码为 组件。 DoublePresentation // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts

import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types";

export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, { metadata: { id: "interactive-ai", title: "Interactive AI Demo", description: "Demo: DoublePresentation custom case", slug: ["public", "example"], type: "double-presentation-section", },

sections: [ { id: "double-presentation-demo", type: "double-presentation-section", customComponentsAnyTypeData: { metaData: { metaTitle: "Interactive AI: Where Conversation Builds the UI", metaDescription: "Discover what makes AIFA revolutionary...", }, leftItem: { mediaUrl: "/_static/illustrations/ai-chat.png", title: "Ai Artifacts Chatbot", description: "As the AI chatbot speaks, it highlights elements...", }, rightItem: { mediaUrl: "/_static/illustrations/ai-web.png", title: "Related Pages", description: "Click any UI element, and the AI provides instant context...", }, }, } as SectionConfig, ], }, ] as PageConfig[], }; 进入全屏模式 退出全屏模式 二、二、三 page-wrapper-types.ts 主页 > 类型 > 类型 这里是完整的 file with the new type included. page-wrapper-types.ts // @/app/@right/(_service)/(_components)/page-transformer-components/custom-sections/custom-double-prsentation.tsx

"use client";

import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { useMediaQuery } from "@/hooks/use-media-query";

interface PresentationMeta { metaTitle: string; metaDescription: string; }

interface PresentationItem { mediaUrl: string; title: string; description: string; }

interface DoublePresentationProps { metaData: PresentationMeta; leftItem: PresentationItem; rightItem: PresentationItem; }

export default function DoublePresentation({ metaData, leftItem, rightItem, }: DoublePresentationProps) { const { isMobile } = useMediaQuery();

// Desktop animation state const [activeContainer, setActiveContainer] = useState ( "left" ); const [sliderKey, setSliderKey] = useState(0);

// Desktop auto-switching effect useEffect(() => { // Only run animation cycle on desktop if (isMobile) return;

let sliderTimer: NodeJS.Timeout; let transitionTimer: NodeJS.Timeout;

startAnimationCycle();

return () => { clearTimeout(sliderTimer); clearTimeout(transitionTimer); }; }, [isMobile]);

// Return null while determining screen size if (isMobile === null) { return null; }

// Common CSS classes const metaBlockClass = "text-center max-w-3xl flex flex-col items-center"; const descriptionClass = "mb-12 max-w-xl text-base text-muted-foreground text-center"; const desktopTitleClass = "mb-6 max-w-3xl font-serif font-bold leading-tight md:text-2xl lg:text-4xl"; const desktopDescriptionClass = "mb-12 max-w-xl text-lg text-muted-foreground md:text-xl text-center";

// Mobile card renderer const renderMobileCard = (item: PresentationItem) => ( {item.title} {item.description}

);

// Desktop card renderer const renderDesktopCard = (item: PresentationItem, isActive: boolean) => ( {item.title} <motion.div key={`slider-${item.title}-${sliderKey}`} className={cn( "absolute top-0 left-0 h-full", isActive ? "bg-primary" : "bg-gray-700" )} initial={{ width: 0 }} animate={{ width: isActive ? "100%" : "0%" }} transition={ isActive ? { duration: 9, ease: "linear" } : { duration: 0 } } /> {item.description}

);

// Mobile layout if (isMobile) { return ( {metaData.metaTitle} {metaData.metaDescription}

{renderMobileCard(leftItem)} {renderMobileCard(rightItem)} ); }

// Desktop layout return ( {metaData.metaTitle} {metaData.metaDescription}

{renderDesktopCard(leftItem, activeContainer === "left")} {renderDesktopCard(rightItem, activeContainer === "right")} ); } 进入全屏模式 退出全屏模式 结论:如何最大限度地利用这份文档 我们明白,这里介绍的指示和组件可能看起来对于一个单一的帖子来说是很丰富的,你甚至可能觉得这不是最令人兴奋的阅读,你会对的。 为了将这个复杂系统的研究转化为一个互动和富有成效的过程,我们建议以下方法。 利用AI加速学习 不要被动地阅读,而是将此文档用作你的AI助理的“大脑”。 Your Action Plan: 复制本文的全部内容,从介绍到本节。 for ChatGPT. This will provide the AI with the full context of the architecture we're discussing. Use it as a system prompt You can now have a dialogue with an AI that "understands" our rules and conventions. For example: Ask questions about the source code. "Based on the provided documentation, explain how to create a new custom component to display customer testimonials." and ." "Show me a configuration example for a page that uses both DoublePresentation HeroSection 这种方法将有助于您更快地理解应用程序的原则,您可以在我们的网站上找到该项目的完整源代码。 . GitHub 存储库 什么是下一步? 在本文中,我们构建了我们网站生成系统的两个关键部分之一: 将文件变成可用 React 组件,这为自动页面创建铺平了道路,人工智能可以生成配置,我们的 把它变成一个美丽的界面。 a tool that transforms a Config Transformer 要看到我们的项目在行动中,访问现场演示 . aifa.dev 主持人.dev A Glimpse into Future Posts: 下一篇文章将专注于第二个关键技术:从Markdown文件中生成页面(文档,教程,产品页面)。 部分3:从 Config 到 UI. 我们将重新审视本文的主题,深入了解如何将 ChatGPT 生成的配置转化为 React 组件,以及如何扩展此过程。 在下一个教程中,我们将开始回答一个关键问题: 保持突出! Why was Markdown chosen for content management?