【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