【PromptCoder + Trae】三分钟复刻 Spotify

【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 天生代码

• 启动 Trae：打开 Trae 编辑器，新建一个 Next.js 项目（本例使用 Next.js）。
  
• 输入提示词：在 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
  
• 天生代码：AI 会天生对应的代码片断，点击继续后插入到项目中。
  
• 逐一构建组件：通过谈天功能天生其他组件，如 PlayerControls、SongInfo、ProgressBar 等。
  
• 智能补全：在手动调解代码时，使用 Tab 功能获取 AI 的上下文发起，加快编码。
  
• 设置路由：根据 AI 发起，在 app 目次下创建 /player 等页面。
  
• 完成项目：终极，我们不但复刻了 Spotify 的播放页面，还实现了根本的路由跳转。
  

通过这种方式，我们使用 Trae 的 AI 本事，将 PromptCoder 的提示词转化为功能完备的代码。

提示词示例

以下是复刻 Spotify 播放页面时，PromptCoder 天生的具体提示词示例，您可以在 Trae 的谈天窗口中使用它来引导代码天生：

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

复制代码

• 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.
      
    
    
  
  
• 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:
      1. :root {
      2.   --bg-color: #121212;
      3.   --text-color: #FFFFFF;
      4.   --accent-color: #1DB954;
      5.   --card-bg-color: #181818;
      6. }

      复制代码
    
    
  • 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.
      
    
    
  
  
• 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.
      
    
    
  
  
• 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 编辑器，开启智能编码之旅。