v 友们!我也开发了个 AI 综合导航站, 70%的代码由 cursor AI 编写

196 天前
 michael43

看到很多人开发各类导航网站,但是很多都是利用一些框架自动生成,未免显得千篇一律(而且有点丑 hh )。 想着现在有各种 AI 工具辅助编程,从零开发一个成本也不是很高,就着手开始开发了。

先给大家看下网站长啥样:

也可以点击跳转直接查看:https://ainav-wiki.org/

开发过程那些事

首先开发一开始,需要确定好网站的技术框架。这部分我是自己完成技术调研选型,最终选择了:Astro 框架

Astro 是一个十分流行的博客框架,官方支持各种流行的前端框架搭配使用,例如 vue ,react ,tailwind 等等,官方都提供了一键安装的指令,引入过程可以说是相当丝滑。

不同于很多框架只能使用 markdown 语法编写文章,Astro 还提供了 mdx 语法,你可以理解为 markdown 语法的超集,拓展实现了 markdown 语法的不足,例如:

  1. 可以直接编写 html 代码,可以做到完全自定义页面(这点真的很重要,例如我可以轻松控制图片的显示大小)
  2. 可以引入 react ,vue 组件
  3. 1 提到的可以直接写 html 代码,也就意味着可以非常方便直接使用 tailwind 控制页面元素大小

选好了框架,开发过程就比较容易了,首先想好页面布局,拆分成不同组件。然后最好自己新建好组件,例如 Footer.tsx ,然后说出你的 footer 组件需要包含哪些元素,例如:

请帮我实现该组件,需要包含网站的简单介绍,右侧展示公众号二维码,还有添加友情链接展示区域...

在使用 AI 的过程中,大家可以尽可能详细的描述你想要实现的组件里面包含哪些内容,以及实现的状态,例如:


// ❌这是一个不好的问法

帮我实现一个导航栏,包含 4 个按钮

// ✅这是一个好的问法

帮我实现一个导航栏,包含 4 个按钮,需要有是否选中两种样式,使用 tailwind 写法实现,并支持暗夜模式


总的来说,这个项目是深度使用 AI 编程实现,在这个 AI 时代,编程真的可以做到简单快速。

最后说下 AI 编程的感觉,真有点像当甲方的感觉:指挥 AI 办事

甚至给出的代码实现,如果不符合预期的效果,也会直接用上带骂的语气“要求改正”哈哈

553 次点击
所在节点    分享创造
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1115560

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX