【PromptCoder + Lovable】轻松复刻好看的新闻页
最近 promptcoder 更新了 0.2.0 版本，添加了 lovable 的链接，lovable 也像是 bolt 那种通过 prompt 的代码生成工具。不同的是，lovable 平台支持与 supabase 集成，实现数据库链接和用户认证，支持 Github 同步，一键部署，及处理大型代码库。 lovable.dev/
什么是 PromptCoder
code.promptate.xyz PromptCoder是一款创新的智能代码生成工具，它能够识别设计图或截图，并自动生成与之匹配的前端代码。无论是复杂的交互组件还是简洁的静态页面，PromptCoder 都能帮助你轻松复刻一个完整的页面或原型图，极大地提升开发效率，减少手动编码的时间和错误率。 这款工具支持多种前端框架，如React、Vue、Flutter等，使得开发者可以无缝集成到现有的项目中。PromptCoder的目标是简化开发流程，减少手动编码，让开发者专注于创意和用户体验。它有几个特点：
-
交互简单易用： 通过图像识别技术，PromptCoder能够理解设计意图。只需一张截图即可得到想要的效果。
-
从免费开始： PromptCoder 只需注册即可免费体验全部内容。
-
多框架支持：PromptCoder 现在已经支持 Next，React，Vue ， Flutter 等框架和 html 原生页面。
案例： 知识分享类新闻页复刻
我们以 perplexity 的发现页为参考：www.perplexity.ai/discover
截图发送给 promptcoder，加上一些自定义的描述，发送给 lovable 即可生成上图的页面。
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 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
```markdown
# UI Description for Next.js Code Generation
## 1. Layout Overview
### Page Structure
- **Top Section**: Occupies one-third of the page, featuring a high-quality image of fern leaves with water droplets, a headline, and descriptive text in Chinese.
- **Content Section**: Occupies the remaining two-thirds, with four rectangular boxes arranged horizontally, each containing an image and text in Chinese.
- **Navigation Bar**: Positioned at the top of the page, containing icons and links for seamless navigation.
### Component Hierarchy
- **Top Section**:
- Image (fern leaves with water droplets)
- Headline (Chinese text)
- Descriptive Text (Chinese text)
- **Content Section**:
- Four Rectangular Boxes (each with an image and Chinese text)
- **Navigation Bar**:
- Icons and Links
### Responsive Design Considerations
- Ensure the top section scales proportionally on smaller screens, maintaining the image's aspect ratio.
- The four rectangular boxes should stack vertically on mobile devices, maintaining consistent spacing and alignment.
- Navigation bar should collapse into a hamburger menu on smaller screens for better usability.
## 2. Styling Specifications
### Color Schemes
- **Primary Colors**: Green (dominant), White, Gray
- **Accent Colors**: Subtle shades of green for hover effects and interactive elements.
### Typography
- **Font Family**: Clear and modern sans-serif font (e.g., Noto Sans SC for Chinese text).
- **Font Size**: Consistent sizing for headlines and body text, with larger headlines for emphasis.
- **Font Weight**: Regular for body text, bold for headlines.
### Spacing and Alignment
- **Padding and Margins**: Generous white space around elements to maintain a clean and uncluttered design.
- **Alignment**: Center-aligned text and images within the top section; left-aligned text within the rectangular boxes.
### Animations and Transitions
- **Hover Effects**: Subtle shadow or scale effect on rectangular boxes to indicate interactivity.
- **Transitions**: Smooth transitions for hover states and navigation interactions.
## 3. Interactive Elements
### User Inputs
- **Clickable Elements**: Rectangular boxes, navigation links, and icons.
- **Hover States**: Visual feedback (e.g., shadow or color change) on hover.
### Navigation
- **Navigation Bar**: Responsive design with a collapsible menu for mobile devices.
- **Links**: Clear and intuitive navigation paths with active state indicators.
### Loading States
- **Skeleton Loaders**: Display skeleton placeholders for images and text during content loading.
- **Spinners**: Use subtle spinners for asynchronous actions (e.g., form submissions).
### Micro-interactions
- **Button Clicks**: Subtle animations (e.g., scale or fade) on button clicks.
- **Scrolling Effects**: Smooth scrolling for anchor links and section transitions.
- **Feedback Messages**: Toast notifications or inline messages for user actions (e.g., form submissions).
This structured description is optimized for Next.js code generation, adhering to modern web UI patterns and best practices for tools like Cursor and Windsurf.
