【PromptCoder + Trae】三分钟复刻 Spotify

发布于：2025-03-23 ⋅ 阅读:(16) ⋅ 点赞:(0)

【PromptCoder + Trae】三分钟复刻 Spotify

官网：PromptCoder

在前端开发中，将设计稿转化为可运行的代码往往是一个费时费力的过程。然而，随着人工智能工具的崛起，这一流程可以变得更加高效和直观。本文将展示如何结合 PromptCoder 和 Trae，从 Spotify 的设计截图快速生成页面和对应的路由，助力开发者大幅提升工作效率。

Trae：AI 驱动的代码编辑器

Trae 是一款基于 VS Code 打造的 AI 智能代码编辑器，集成了强大的生成式 AI 功能，旨在优化开发者的编码体验。它不仅提供智能代码补全，还能通过自然语言交互生成代码、理解项目上下文，并帮助开发者快速实现复杂的开发任务。

Trae 的核心特点
  • 智能补全：通过 Tab 键，Trae 可根据上下文预测并生成多行代码建议。
  • 聊天交互：内置聊天窗口，开发者可以直接与 AI 对话，生成特定代码或解决问题。
  • 项目理解：Trae 能分析整个项目结构，确保生成的代码与现有代码无缝整合。
  • 多框架支持：支持 React、Next.js、Vue 等多种语言和框架，满足不同开发需求。

与传统编辑器相比，Trae 的 AI 能力让开发者能够以更自然的方式与代码互动，显著减少手动编码的时间。

PromptCoder：智能代码提示词生成

PromptCoder 是一款基于 AI 的代码生成工具，能够识别设计图或截图，并生成匹配的前端代码提示词。无论是复杂的音乐播放器界面还是简洁的播放列表布局，PromptCoder 都能帮助开发者快速复刻设计稿，提升效率并降低出错率。

PromptCoder 的核心特点
  • 交互简单易用：通过先进的图像识别技术，只需上传设计图即可生成精确的提示词。
  • 免费起步：提供免费注册体验，低门槛尝试其强大功能。
  • 多框架支持：兼容 React、Vue、Flutter 等多种前端框架，便于集成到现有项目。
  • 多种模式选择：普通模式生成单页提示词，cascade 模式可分析潜在路由并生成多页面提示词。

实战案例：复刻 Spotify 的播放页面

下面，我们将通过一个实战案例，展示如何使用 PromptCoder 和 Trae，从 Spotify 的设计稿生成一个功能完整的音乐播放页面，并设置相关路由。

步骤 1：选择设计稿

首先，打开 Spotify 的网页版或移动端，截取一个播放页面设计图。例如，我们选择包含播放控件、歌曲信息和进度条的经典播放界面。

请添加图片描述

步骤 2：使用 PromptCoder 生成提示词

将设计截图上传至 PromptCoder，选择 cascade 模式。工具会自动识别设计中的元素（如播放按钮、歌曲封面、进度条等），分析潜在路由（如 /player、/playlist），并生成详细的代码提示词。

步骤 3：使用 Trae 生成代码
  1. 启动 Trae：打开 Trae 编辑器，新建一个 Next.js 项目（本例使用 Next.js）。
  2. 输入提示词：在 Trae 的聊天窗口中，粘贴 PromptCoder 生成的提示词。例如：
    Create detailed Next.js components with these requirements:
    1. Use ‘use client’ directive for client-side components
    2. Style with Tailwind CSS utility classes for responsive design
    3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested
    4. Use stock photos from picsum.photos where appropriate, only valid URLs you know exist
    5. Configure next.config.js image remotePatterns to enable stock photos from picsum.photos
    6. Avoid duplicate components
    7. Automatically source and display album art from a CDN in design placeholders
    8. Follow proper import practices:
    - Use @/ path aliases
    - Keep component imports organized
    - Update current src/app/page.tsx with new comprehensive code
    - Don’t forget root route (page.tsx) handling
    - You MUST complete the entire prompt before stopping
  3. 生成代码：AI 会生成对应的代码片段，点击接受后插入到项目中。
  4. 逐一构建组件：通过聊天功能生成其他组件，如 PlayerControls、SongInfo、ProgressBar 等。
  5. 智能补全：在手动调整代码时，使用 Tab 功能获取 AI 的上下文建议，加速编码。
  6. 配置路由：根据 AI 建议，在 app 目录下创建 /player 等页面。
  7. 完成项目：最终，我们不仅复刻了 Spotify 的播放页面，还实现了基本的路由跳转。

通过这种方式，我们利用 Trae 的 AI 能力，将 PromptCoder 的提示词转化为功能完整的代码。

请添加图片描述

提示词示例

以下是复刻 Spotify 播放页面时，PromptCoder 生成的详细提示词示例，您可以在 Trae 的聊天窗口中使用它来指导代码生成：


Create detailed Next.js components with these requirements:
1. Use 'use client' directive for client-side components
2. Style with Tailwind CSS utility classes for responsive design
3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested
4. Use stock photos from picsum.photos where appropriate, only valid URLs you know exist
5. Configure next.config.js image remotePatterns to enable stock photos from picsum.photos
6. Avoid duplicate components
7. Automatically source and display logos from a CDN in design placeholders
8. Follow proper import practices:
   - Use @/ path aliases
   - Keep component imports organized
   - Update current src/app/page.tsx with new comprehensive code
   - Don't forget root route (page.tsx) handling
   - You MUST complete the entire prompt before stopping

  1. Layout Overview

    • Page structure:

      • Top-level container: Centered with margins, likely a <div> or <main>.
      • Navigation tabs: Horizontal arrangement, likely an <nav> with <ul> and <li> elements, or a custom tab component.
      • Content sections: Stacked vertically, each with a title and a grid of cards. Each section is likely a <section> element.
      • Card grid: Uses a CSS Grid or Flexbox layout for responsive arrangement of cards.
      • “View More” button container: Located at the top right of each section.

    • Component hierarchy:


      {/* “全部”, “音乐”, “播客” /}


      {/ “你的热门合辑”, etc. /}









      {/       … more CardItems … /}


      {/ … more ContentSections … */}

    • Responsive design considerations:

      • Utilize CSS media queries to adjust the number of columns in the CardGrid based on screen width. For example:
        • Desktop: 4-6 columns
        • Tablet: 2-3 columns
        • Mobile: 1 column
      • The Navigation tabs might switch to a dropdown or a different navigation pattern on smaller screens (though not shown in the image).
      • Use rem or em units for font sizes and spacing to ensure scalability.
      • Images should be responsive using width: 100% and height: auto or the next/image component.

  2. Styling Specifications

    • Color schemes:

      • Background: Dark (e.g., #121212 or similar).
      • Text: Light (e.g., #FFFFFF or a slightly off-white).
      • Accent: Spotify green (e.g., #1DB954).
      • Card backgrounds: Slightly lighter than the main background (e.g., #181818).
      • Use CSS variables (custom properties) for easy theme management:
        :root {
  --bg-color: #121212;
  --text-color: #FFFFFF;
  --accent-color: #1DB954;
  --card-bg-color: #181818;
}

    • Typography:

      • Font family: Sans-serif (e.g., “San Francisco”, “Roboto”, or a similar web-safe font). Use next/font for optimized font loading.
      • Section Titles: font-weight: bold; font-size: 1.5rem; (adjust as needed).
      • Card Titles: font-weight: 600; font-size: 1rem;.
      • Card Subtitles: font-weight: normal; font-size: 0.875rem; color: #B3B3B3; (or a similar muted gray).
      • Use a consistent vertical rhythm (line-height) for readability.

    • Spacing and alignment:

      • Consistent padding and margins throughout. Use a spacing scale (e.g., 4px, 8px, 16px, 24px, 32px).
      • Section titles: margin-bottom: 1rem; (or similar).
      • Card spacing: Use gap property in CSS Grid or Flexbox (e.g., gap: 1rem;).
      • Content within cards: Left-aligned.
      • Card images: Rounded corners (e.g., border-radius: 0.5rem;).
      • Cards: Subtle shadow (e.g., box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);).

    • Animations and transitions:

      • Subtle hover effects on cards:
        • Slightly increase scale (e.g., transform: scale(1.02);).
        • Change background color slightly (e.g., become a bit brighter).
        • Use transition: all 0.2s ease-in-out; for smooth transitions.
      • Tab transitions: Smooth transition between active and inactive states.
      • Menu Icon: Smooth transition on hover.

  3. Interactive Elements

    • User inputs:

      • Tabs: Clickable to switch between content categories.
      • Cards: Clickable to navigate to the content details page.
      • “View More” Buttons: Clickable to expand the section.
      • Ellipsis Menu (Vertical Ellipsis Icon): Clickable to open a context menu.

    • Navigation:

      • Tabs provide top-level navigation.
      • Cards and “View More” buttons provide navigation within sections.

    • Loading states:

      • While content is loading, display a placeholder or skeleton screen within the CardGrid. Use a shimmer effect for a modern look. Consider a dedicated CardSkeleton component.
      • For the “View More” button, show a loading spinner while fetching more content.

    • Micro-interactions:

      • Hover states on cards (as described above).
      • Active state on tabs (e.g., underline or background color change).
      • Click feedback (e.g., a slight ripple effect) on interactive elements.

  4. Component Architecture

    • Layout components:

      • PageContainer: Wraps the entire page content, handles centering and margins.
      • CardGrid: Manages the layout of cards (using CSS Grid or Flexbox).
      • ContentSection: Wraps each section, including the title, “View More” button, and CardGrid.

    • Feature components:

      • NavigationBar: Contains the tab navigation.
      • TabItem: Represents a single tab in the navigation.
      • CardItem: Represents a single content card.
      • CardImage: Displays the image for a card.
      • CardTitle: Displays the title for a card.
      • CardSubtitle: Displays the subtitle for a card.
      • SectionTitle: Displays the title of a content section.
      • ViewMoreButton: The button to view all content in a section.
      • SpotifyIcon: Displays the Spotify logo.
      • EllipsisMenu: The context menu triggered by the ellipsis icon.

    • Shared components:

      • Button: A reusable button component (used for “View More”).
      • Icon: A component for displaying icons (used for Spotify logo and ellipsis).
      • Image: Optimized image component (likely using next/image).

    • Container components:

      • HomePageContainer: Fetches data for the entire home page and passes it to presentational components.
      • SectionContainer: (Optional) Fetches data for a specific section and passes it to the ContentSection component. This can be useful if sections load data independently.
      • EllipsisMenuContainer: Handles the logic and state of the Ellipsis Menu.

总结

通过 PromptCoder 和 Trae 的协作，开发者可以快速将 Spotify 的设计稿转化为可运行的代码。PromptCoder 从截图生成详细提示词，而 Trae 则利用其 AI 能力实现代码编写和路由配置。相比传统开发，这种方法不仅高效，还让开发者能够专注于优化和创新。

立即访问官网：PromptCoder，获取免费试用！您也可以前往 Trae.ai 下载这款强大的 AI 编辑器，开启智能编码之旅。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布