【PromptCoder + Bolt.new】Cascade模式自动生成页面和对应的路由

【PromptCoder + Bolt.new】Cascade模式自动生成页面和对应的路由

官网：PromptCoder

PromptCoder：智能代码提示词生成

PromptCoder是一款利用人工智能技术的智能代码生成工具。它能够识别设计图或截图，并自动生成与之匹配的前端代码。无论是复杂的交互组件还是简洁的静态页面，PromptCoder都能帮助开发者轻松复刻一个完整的页面或原型图，极大地提升开发效率，减少手动编码的时间和错误率。

PromptCoder的核心特点

交互简单易用：通过先进的图像识别技术，PromptCoder能够理解设计意图。开发者只需上传一张设计图或截图，即可得到精确的代码提示和生成的代码片段。

• 从免费开始：PromptCoder提供免费注册体验，让开发者可以无门槛地尝试其强大的功能，无需担心前期成本投入。
• 多框架支持：PromptCoder支持多种前端框架，如React、Vue、Flutter等，使得开发者可以无缝集成到现有的项目中，无需担心兼容性问题。
• 多种模式选择：普通模式支持从截图中获取准确信息并生成提示词，cascade模式会将截图中潜在的路由点分析出来，并直接应用在代码生成中！

实战案例：从dribbble中复制一个dashboard页面

1. 首先，我们在dribbble网站上寻找我们喜欢的设计稿，这个dashboard不错，简洁清新的感觉我很喜欢，只需要截图就行！

2. 将设计图上传到PromptCoder，工具自动识别设计图中的各个元素，并根据选择的框架（如React）生成提示词和代码框架。（如果要生成对应的路由，记得一定选择cascade mode！）

3. 进入bolt.new，将生成好的提示词复制进去即可！

我们不仅会得到相似的页面，同时也完成各种路由的跳转，例如 manage，history 等。。。

提示词示例

Create detailed Next.js components with these requirements:

Use 'use client' directive for client-side components

Style with Tailwind CSS utility classes for responsive design

Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested

Use stock photos from picsum.photos where appropriate, only valid URLs you know exist

Configure next.config.js image remotePatterns to enable stock photos from picsum.photos

Avoid duplicate components

Automatically source and display logos from a CDN in design placeholders

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

Layout Overview

Page Structure: The dashboard follows a common modern web app layout: a sidebar for navigation (fixed position on larger screens), a main content area displaying the financial data, and potentially a header that would be part of the main content for smaller screens. The main content is further divided into sections for wallet balance, quick transactions, detailed transactions, and a money statistics graph. This structure aims for optimal information density and ease of access.
Component Hierarchy: We can infer a component hierarchy like this:
DashboardLayout: Top-level layout containing the Sidebar and DashboardContent.
Sidebar: Contains Logo, NavigationMenu, and potentially a profile section.
DashboardContent: Container for the main dashboard elements. Likely involves WalletSummary, QuickTransactionsSection, TransactionsSection, and MoneyStatisticsGraph.
WalletSummary: Displays the wallet balance and contains SendMoneyButton and RequestMoneyButton.
QuickTransactionsSection: Displays a list of recent transactions. Uses QuickTransactionItem for each transaction.
TransactionsSection: Displays detailed transaction information. Uses TransactionItem for each transaction.
MoneyStatisticsGraph: Renders the line graph showing money statistics. Might leverage a charting library.
QuickTransactionItem: Represents a single quick transaction.
TransactionItem: Represents a single detailed transaction.
NavigationMenu: Contains NavigationItem(s).
NavigationItem: Represents a single item in the navigation menu.
Responsive Design Considerations: The layout should be responsive and adapt to different screen sizes. The sidebar might collapse into a hamburger menu on smaller screens. The content areas (wallet balance, transactions, graph) might re-arrange to a vertical flow on smaller screens. The graph should be responsive in size to fit the screen. Grid layouts (CSS Grid or next/image with layout="fill") can be leveraged for flexible and adaptive sizing.
Styling Specifications
Color Schemes: The screenshot implies a clean and modern color scheme. Common choices include:
Primary: A primary brand color (likely what's used in the Finma logo -- potentially a blue or green). Used for key interactive elements.
Secondary/Accent: Another brand color used sparingly.
Background: A light gray or off-white background for the main content area.
Text: Dark gray or black for primary text, potentially a lighter gray for secondary text. Darker colors used for the graph lines.
Success/Positive: Usually a shade of green for income.
Error/Negative: Usually a shade of red for expenses.
Typography: The font family should be modern and readable (e.g., Inter, Roboto, Open Sans). Font sizes should be adjusted for different content areas (e.g., larger font for wallet balance, smaller font for transaction details). Font weights should be used to create visual hierarchy.
Spacing and Alignment: Consistent spacing is crucial for a clean and professional look. Employ a spacing scale (e.g., 8px, 16px, 24px, 32px) and adhere to it throughout the dashboard. Align content vertically and horizontally for a balanced layout. Consider using CSS Flexbox or Grid for alignment.
Animations and Transitions: Subtle animations and transitions can enhance the user experience. Examples include:
Hover effects: Button hovers should provide visual feedback (e.g., background color change, slight scaling).
Navigation transitions: Smooth transitions when navigating between pages or sections (e.g., fade-in, slide-in).
Loading indicators: Display a loading spinner or progress bar while data is being fetched. Consider using Tailwind CSS transition-* classes.
Interactive Elements
User Inputs: The dashboard includes buttons for sending and requesting money. These buttons should trigger appropriate actions (e.g., modals, forms). Further inputs might exist within the "Manage" section.
Navigation: The navigation menu allows users to switch between different sections of the dashboard. Clicking on a navigation item should update the displayed content. Use next/link for client-side navigation. The active navigation item needs to be clearly highlighted (e.g., different background color, bold font weight).
Loading States: When fetching data, the dashboard should display a loading indicator (e.g., spinner, skeleton UI). This prevents the user from thinking the application is frozen. Use a state variable (isLoading) and conditionally render the loading indicator.
Micro-Interactions: Micro-interactions can enhance the user experience. Examples include:
Button click feedback: Visual feedback when a user clicks a button (e.g., a ripple effect).
Tooltip: Display tooltips on hover for less obvious elements.
Animated graph updates: Animate the graph when new data is loaded.
Component Architecture
Atomic Design: The components should ideally follow an Atomic Design methodology (Atoms, Molecules, Organisms, Templates, Pages).
Atoms: Basic building blocks like buttons, labels, input fields, icons, and typography styles.
Molecules: Combinations of atoms, such as WalletSummary (which combines labels and buttons). NavigationItem (icon + label).
Organisms: More complex components that consist of molecules and/or atoms, such as QuickTransactionsSection.
Templates: Define the overall structure of a page. The DashboardLayout is a template.
Pages: Instances of templates populated with data, representing specific routes.
Props and State: Pass data down to components using props. Manage component-specific state using React's useState hook. Utilize context for application-wide state management (e.g., user authentication, theme).
Data Fetching: Use useEffect hook along with libraries like axios or fetch to retrieve data from an API. Libraries such as SWR or React Query can be used for efficient data fetching, caching, and revalidation. Ensure proper error handling and loading states during data fetching.
Reusability: Design components to be reusable across different parts of the application. This reduces code duplication and improves maintainability.
Typescript: Use Typescript to provide type safety and improve code maintainability, especially when passing complex data structures between components.
Routes
/: The main dashboard route. This route displays the wallet summary, transactions, and money statistics.
/my-card: Route to display the user's card information.
/receipts: Route to display the user's receipts.
/manage: Route to manage settings and configurations.
/history: Route to view the user's detailed transaction history.
/reports: Route to generate financial reports.

立即访问官网：PromptCoder，获取5积分！