🍹 Insight Daily 🪺
Aitrainee | 公众号：AI进修生
Hi，这里是Aitrainee，欢迎阅读本期新文章。
我截取了AI工具集：https://ai-bot.cn/ 这个网站的首页截图。
把图片输入给了一个叫 Copycoder 的AI工具：https://copycoder.ai/
他给我返回了两个提示词（后文）。
我把他们喂给了Bolt：
他就完成了一个导航网站的构建（后续在合集连载文章再去继续使用Cursor做进一步导航网站开发尝试）
导航网站地址：https://unrivaled-lollipop-dc8131.netlify.app/（Bolt生成和部署，未修改）
如何使用Copycoder？
这个工具操作起来是图中两个箭头所指的两步。
第一步通过你给的屏幕截图生成组件实现的详细要求，这是为了确保开发工作从一开始就具备清晰的技术标准、组件规范，避免后续因实现不一致或方向不清而产生的问题。
第二步再定义 页面结构和路由设计，这样可以根据已明确的组件需求来合理布局页面，确保开发过程顺利且高效。
我们给到的截图是这个：
第一步：通过你给的屏幕截图生成组件实现的详细要求提示词。
因为这个提示词词翻译成中文就有点混淆最开始的意思了，所以我这里不翻译了：
Create detailed components with these requirements:1. Use 'use client' directive for client-side components2. Style with Tailwind CSS utility classes for responsive design3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested4. Use stock photos from picsum. photos where appropriate, only valid URLs you know exist5. Configure next.config.js image remotePatterns to enable stock photos from picsum.photos6. Create root layout. tsx page that wraps necessary navigation items to all pages7. MUST implement the navigation elements items in their rightful place i.e. Left sidebar, Top header8. Accurately implement necessary grid layouts9. 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 stoppingAI Tools Directory Platform Interface</summary_title><image_analysis>1. Navigation Elements:- Top header with: AI Tools, AI Applications, Daily AI News, Documentation, AI Consulting, About Us- Left sidebar with: AI Applications, AI Tools, AI Image Tools, AI Video Tools, AI Office Tools, AI Design Tools- Secondary navigation with: Common, Search, Community, Images, Life2. Layout Components:- Header height: 60px- Left sidebar width: 200px- Main content area: Fluid width- Search bar: 600px width centered- Card grid: 3-4 columns responsive layout3. Content Sections:- Featured carousel/banner section- Search bar with suggestions- Popular tags/keywords- Tool cards grid layout- Category sections- Quick access tools section4. Interactive Controls:- Search input with icon- Category filter tabs- Tool cards with hover states- Navigation dropdown menus- Theme toggle button- Language selector5. Colors:- Primary: #6C5CE7 (Purple)- Secondary: #A8A4FF (Light Purple)- Background: #FFFFFF- Text: #333333- Accent: #F0F0F0 (Light Gray)- Card Background: #FFFFFF6. Grid/Layout Structure:- 12-column grid system- 16px base spacing- Card grid gap: 24px- Responsive breakpoints at 768px, 1024px, 1440px</image_analysis><development_planning>1. Project Structure:```src/├── components/│ ├── layout/│ │ ├── Header│ │ ├── Sidebar│ │ └── Footer│ ├── features/│ │ ├── Search│ │ ├── ToolCard│ │ └── CategoryFilter│ └── shared/├── assets/├── styles/├── hooks/└── utils/```2. Key Features:- Tool search and filtering- Category-based navigation- Tool cards with metadata- User authentication- Favorites/bookmarks system- Responsive layout system3. State Management:```typescriptinterface AppState {├── tools: {│ ├── items: Tool[]│ ├── categories: Category[]│ ├── filters: FilterState│ └── search: SearchState├── }├── user: {│ ├── profile: UserProfile│ ├── preferences: UserPreferences│ └── favorites: string[]├── }}```4. Routes:```typescriptconst routes = [├── '/',├── '/category/:id',├── '/tool/:id',├── '/search',└── '/user/*']```5. Component Architecture:- Layout components (Header, Sidebar, Footer)- Feature components (Search, ToolCard, CategoryFilter)- Shared components (Button, Input, Modal)- Container components for state management6. Responsive Breakpoints:```scss$breakpoints: (├── 'mobile': 320px,├── 'tablet': 768px,├── 'desktop': 1024px,└── 'wide': 1440px);```</development_planning>
这个提示词中，首先他定义了一些规范：
然后定义了我们的开发需求，就是那些顶部导航和左侧栏导航：
继续的话就是一些 "控制" 和 项目结构。
总之，按照他的提示词来说对于我们自己的开发一定是有参考意义的，这个意义我们在上一篇文章有说到过：
2024-12-01
第二步，是生成板面结构分析提示词，这里我翻译成了中文：
### 路由结构：- /ai-tools- /ai-applications- /daily-ai-news- /documentation- /ai-consulting- /about-us- /ai-image-tools- /ai-video-tools- /ai-office-tools- /ai-design-tools- /common- /search- /community- /images- /life### 页面实现：/ai-tools:核心目的: AI 工具目录，具有过滤和比较功能关键组件：- 工具卡片及描述- 分类过滤器- 搜索功能- 比较工具布局- 工具网格布局- 过滤器侧边栏- 响应式卡片尺寸/ai-applications:核心目的: 展示跨行业的实际 AI 应用关键组件：- 案例研究卡片- 行业过滤器- 实施指南- 特征应用轮播- 分类部分- 响应式网格布局/daily-ai-news:核心目的: 最新 AI 新闻和动态关键组件：- 新闻 Feed- 分类过滤器- 新闻简报注册- 社交分享- 时间线布局- 侧边栏与热门话题- 移动端优化新闻卡片/documentation:核心目的: 技术文档和指南关键组件：- 文档导航- 代码示例- 搜索功能- 版本选择器- 侧边导航- 主内容区域- 固定头部/ai-consulting:核心目的: AI 咨询服务信息及预约关键组件：- 服务卡片- 预约日历- 联系表单- 案例研究- Hero 部分- 服务网格- 客户评价/about-us:核心目的: 公司信息与团队介绍关键组件：- 公司时间线- 团队成员卡片- 使命宣言- 联系方式- 全宽部分- 团队网格- 故事时间线/ai-image-tools:核心目的: 图像生成与编辑 AI 工具关键组件：- 工具比较表- 图像画廊- 教程部分- 工具类别- 示例画廊- 教程卡片/ai-video-tools:核心目的: 视频创作与编辑 AI 工具关键组件：- 视频播放器- 工具列表- 教程部分- 特征工具滑块- 视频网格- 教程部分/ai-office-tools:核心目的: 办公和生产力 AI 工具关键组件：- 工具类别- 集成指南- 价格比较- 工具卡片- 分类部分- 比较表格/ai-design-tools:核心目的: AI 驱动的设计工具目录关键组件：- 工具展示- 设计画廊- 教程部分- 工具网格- 示例展示- 资源部分### 布局：主布局：- 适用路由: 所有路由- 核心组件：- 导航头部- 页脚- 侧边栏（如适用）- 面包屑导航- 响应式行为：- 移动端折叠导航- 弹性内容宽度- 动态侧边栏显示文档布局：- 适用路由: /documentation- 核心组件：- 侧边导航- 内容区域- 搜索框- 版本选择器- 响应式行为：- 可折叠侧边导航- 移动优化的阅读视图工具目录布局：- 适用路由: /ai-tools, /ai-image-tools, /ai-video-tools, /ai-office-tools, /ai-design-tools- 核心组件：- 过滤器侧边栏- 工具网格- 比较功能- 响应式行为：- 移动端过滤器模态- 自适应网格列数- 可滚动的比较表格新闻布局：- 适用路由: /daily-ai-news- 核心组件：- 新闻 Feed- 分类导航- 新闻简报注册- 响应式行为：- 移动端单列布局- 固定分类导航- 无限滚动
他首先是在路由结构中给了要构建的所有路由，然后在页面实现中详细的描述了这个路由的目的是什么，以及要包括哪些组件。
分析一下，这三个词条（页面实现、布局、路由结构）之间的关系：
1. 路由结构：
• 定义了整个网站或应用的页面路径和路由，描述了不同页面的入口和访问路径。
• 每个路由对应一个具体的页面或功能模块，明确了用户访问时该显示什么内容。
2. 页面实现：
• 详细描述了每个路由对应的页面应该如何构建，包括页面的核心目的、关键组件以及相关功能。
• 这是对路由结构的具体展开，定义了页面的内容和交互方式。
3. 布局：
• 在页面实现的框架下，布局决定了页面内容的展示方式和结构。它负责将页面的关键组件按逻辑和视觉要求排布。
• 布局与路由结构紧密关联，因为每个路由会有一个特定的布局样式，以适应页面的功能需求。
关系总结：
• 路由结构确定了页面的基本框架和路径。
• 页面实现则在这个框架内定义了页面的目的、功能和组件。
• 布局是对这些功能和组件进行合理排布的方式，确保页面在视觉和交互上清晰、流畅。
在第二个提示词“ 页面实现 ”那一节，其中的核心目的是对该页面的整体目标进行简洁的概括。而其中的关键组件是实现该页面核心目标所必需的具体功能模块或UI 元素。
一个路由页面通常涉及多个功能点，而这些功能点的实现需要多个不同的组件来配合完成。每个组件负责具体的一个小任务，这些组件相互配合以完成大任务。例如，在 /ai-consulting 页面中：
服务卡片：展示咨询服务的简短信息，帮助用户快速浏览和了解服务内容。 客户评价：展示之前客户的评价和反馈，增强网站可信度，提升用户的信任感。
组件和路由的更多相关信息查看链接：
https://z0kdt9b641u.feishu.cn/docx/FML3dyPq9oRBunxAXV3ctX5xn4b?from=from_copylink
所以我们现在总结一下两个提示词：
第一个提示词提供了项目的框架、约定和技术栈要求，帮助AI理解如何组织项目结构、如何规范化开发。 第二个提示词提供了具体的页面功能和布局要求，是在第一个提示词给出的开发框架基础上的具体化，指导AI如何根据整体要求实现每个页面的功能和设计。
是的，不错的，对我们后续自己编写开发提示词，是有指导意义的毕竟他都做成了一个产品。
我们在上一篇文章中提到了使用cursor要配置好它的规则提示词，并且也其中有说到copycoder这个ai工具会提供和cursorrules社区提示词相似的专业性的指示词。
Copycoder只提供五次的免费生成机会。
所以我们应该可以结合它输出的结构化提示词进行一下逆向工程，和我们的其他一些大模型进行迭代Chat，从而达到优化我们开发提示词的效果，也同时可以把上一篇文章所提到的Cursorrules优化一下。
当然我也不知道Copycoder产生这种专业结构化的提示词背后的驱动逻辑到底是比较简单呢，还是比较复杂的工作流。
你可以尝试chatgpt web 或者 cursor chat将一副图和Copycoder提供的专业化提示词作为一个示例，让他给新的图片输出专业化提示词，可以比较一下直接使用Copycoder的区别。
甚至可行的话你也可以去做一个和Copycoder相似的网站，这就是AI Saas吧，后面的合集连载文章可以考虑做一个这样的。
# 合集文章如下
2024-11-28
Copycoder 提供了一些便捷复制和打开AI IDE 如cursor、bolt、v0 的按钮。
这也说明这个工具肯定是专门对这些AI IDE进行适合他们提示词的测试分析的。
所以我们学习 Copycoder 提示词的特点，这个方向应该是对的。
总之，Copycoder工具通过提供专业、细化、结构化的提示词，帮助开发者快速生成网站的组件实现和页面布局要求，与Cursor、Bolt等AI工具配合使用，能够显著提高前端开发效率和代码质量。
所以，写好 Cursorrules 或 用好AI编程 靠：
1、自己的开发经验、认知
2、Cursorrules社区提示词
3、与Cursor Chat 或 其他大模型Chat 迭代
4、参考Copycoder提供的专业化提示词
5、. . .
🌟希望这篇文章对你有帮助，感谢阅读！如果你喜欢这系列文章请以 点赞 / 分享 / 在看 的方式告诉我，以便我用来评估创作方向。
知音难求，自我修炼亦艰
抓住前沿技术的机遇，与我们一起成为创新的超级个体
（把握AIGC时代的个人力量）
点这里👇关注我，记得标星哦～
