掘金 人工智能 4小时前
不会代码?1小时用AI克隆高颜值知识卡片网站!附保姆级部署教程
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文分享了使用Claude 4和Cursor AI快速搭建知识卡片生成器的经验。作者通过简单的提示词,让AI复刻了手动制作的知识卡片,并实现了多格式、多颜色选择、编辑修改和JSON导出等功能。整个过程仅用时1小时,无需复杂的后端知识,适合小白用户。文章强调了AI时代商业思维的重要性,并提供了详细的部署上线步骤,以及其他AI工具和教程的推荐,帮助读者快速上手AI应用。

💡 使用Claude 4和Cursor AI,无需手动操作,即可快速生成知识卡片。

🎨 生成的知识卡片支持多格式导出(PNG、JPG),并提供多种主题颜色选择。

📝 用户可以编辑修改卡片内容,并支持JSON格式导出,方便二次编辑。

💻 整个项目为纯前端Demo,无需后端储存,降低了技术门槛,方便小白用户。

🚀 详细介绍了部署上线的步骤,即使是文科生也能轻松上手,体验AI的神奇。

上午看到有人在群里发了几个知识卡片,颜值还行,注意是人类手动ps的。

我感觉这个没必要手动,就直接让claude4试试从作品倒推复刻对应的代码。

没想到不到1小时(我完全在干别的,而且包括部署上线时间),claude4就几乎无修改地给我上线了。

地址:read.staraiwork.cn/


生成效果大概是这个样子的。很多个颜色可以选。

输出的👇🏻这个样子,和我在群里看到的可以说几乎是差不多了。

有图表有提炼,有你的推广信息。

你全程根本不用跟它强调不同加载态咋办,提示文案咋办,它很多都默认自带了。其中json格式导出我一开始根本没提,它自己想的。

小功能点:

1、只用随便复制一段文字进去,点击生成即可。

2、多格式多色可选:可导出PNG、JPG格式的卡片。

3、可以随意编辑,然后保存修改再导出。

4、支持导出json格式,方便之后直接在本地编辑完了之后导入二次修改。

真个网站上线的这部分小白同学可能有点晕,其实很简单,我们会专门有一篇文章从0-1告诉大家如何上线一个项目。

做完之后我只有2个感受,划重点:

沟通提示词

把这张图发给cursor,然让它对内容结构进行分析。

加上我们只是要做demo,

所以不需要后端储存只要前端,

这些需求统统你写好发给cursor:

产品名称:知识卡片生成器主要功能:1、请分析附件图片的知识内容结构当用户输入内容时候总结为图片中的知识笔记卡片。其中图表部分可以参考MINDMAP: 'mindmap' - 思维导图FLOWCHART: 'flowchart' - 流程图TIMELINE: 'timeline' - 时间线COMPARISON: 'comparison' - 对比图HIERARCHY: 'hierarchy' - 层级图INFOGRAPHIC: 'infographic' - 信息图2、以笔记形式提炼用户输入的内容。知识总结避免重复。每张卡片必须包含一种图表演示阐释3、知识内容总结部分使用deepseek-v3大模型,接口文档为https://api-docs.deepseek.com/zh-cn/,key为xxxx4、知识卡片可以保存为jpg/png格式,用户可以二次编辑卡片内容。5、多种主题色可选,生成后仍然可以更换主题色再次保存。6、纯前端demo项目,无需持久储存。7、主页标题为阿星AI工作室,同时附带我的个人二维码作为引流,需要主页中间部位和生成卡片的摘要之后嵌入我的二维码。我的联系二维码已放在public目录,路径是xxx(你的二维码文件路径,需要你自己把二维码文件拖到public里,否则他自己会找不到)

然后你就在本地终端进行调试就可以了,有哪里就直接告诉cursor然它改。

部署上线

建构部分只用来一句

现在我要在宝塔面板进行网站部署,请帮我准备上线文件。

claude4能直接听明白给你准备生产文件。还会手把手教你咋部署。

拿到生产文件后就剩部署了。

平常不做网站的赶紧加签一个子域名解析下就可以了。之后会单独讲怎么用阿里云部署网站,真的特别费劲所以一篇文章写不完。如果你感兴趣,可以先和cursor聊聊,

接着我们打开宝塔,新建子站点或者选择你已有的站点就行了。

把cursor给你的文件都拖到指定站点的文件目录下。

建构之后之后就可以运行自己出图啦~

学废了吗朋友,我一个文科生玩下来只想说,好神奇哦~

更多AI教程关注我,0基础小白也能上手哦~

往期文章:

p.s.

部分图片来自网络,仅供学习分享,版权归原作者所有,如有侵权,可联系我们删除。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

AI 知识卡片 Claude 4 Cursor 前端 小白
相关文章