⚡

页面构建器Skill page-builder

页面构建器是一个基于Tailark组件库的辅助工具，专为快速搭建高质量的营销落地页、官网、定价页、关于页和联系页而设计。它提供预构建的UI组件（如英雄区、功能展示、客户评价、定价表等），支持通过复制和自定义代码来灵活调整布局、文本和图片，遵循Tailwind CSS和Shadcn UI的最佳实践，帮助前端开发者和营销人员高效构建响应式、美观的网站页面，提升开发效率和页面转化率。关键词：页面构建、Tailark组件、营销网站、落地页开发、前端组件库、Tailwind CSS、Shadcn UI、Next.js、UI开发。

前端开发 0 次安装 0 次浏览 更新于 3/1/2026

name: page-builder description: 使用Tailark组件构建落地页和营销网站的助手。 deps: [“ui-handler”]

页面构建技能

此技能通过选择和组合预构建的“Tailark”组件，帮助您构建高质量的营销页面。

工作流程

  1. 需求分析：确定页面类型（落地页、定价页、关于页、联系页）以及所需的部分（英雄区、功能、社会证明等）。
  2. 选择组件：查阅 reference.md 为每个部分挑选最合适的组件。
  3. 实施：
    • 将选定的组件导入到您的 page.tsx 中。
    • 复制与自定义：不仅仅是导入；如果您需要大幅更改文本、图像或布局，请随时将组件代码复制到新的本地组件中（例如 src/components/landing/my-hero.tsx）。
    • 组合：将它们堆叠在一个语义化的 <main> 标签中。

组件选择策略

  • 落地页：HeroSection -> LogoCloud -> Features-12 -> WallOfLoveSection -> CallToAction。
  • 定价页：Pricing 或 PricingComparator -> FAQs。
  • 关于页：Content-2 -> StatsSection -> TeamSection。
  • 联系页：ContactSection。

自定义

所有组件均使用 Tailwind CSS 和 Shadcn UI 构建。

  • 图标：使用 lucide-react。
  • 图片：使用 next/image。用真实资源替换占位符。
  • 颜色：遵循全局主题。

参考

请参阅 reference.md 获取可用组件的完整列表，包含视觉描述和推荐。