首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >没有写一行代码,上线了一个网站

没有写一行代码,上线了一个网站

作者头像
shengjk1
发布2025-05-16 15:20:13
发布2025-05-16 15:20:13
13200
代码可运行
举报
文章被收录于专栏:码字搬砖码字搬砖
运行总次数:0
代码可运行

一、背景

AI编程大肆兴起,Vibe coding在个人项目和快速开发中表现出色。刚好借助 AI 做一些有趣的事情

二、想法

想做一个网站,可以设定好下班时间,显示下班倒计时,并且每隔两小时鼓励我一下。基于这样的想法,说干就干。

三、实现方式

我把我的想法整理了一下

代码语言:javascript
代码运行次数:0
运行
复制
生成一个牛马上班倒计时的网页。 
1. 用户可以输入下班时候,每个一个小时提醒一次用户:太棒了,还剩xxx时间就下班了 
2. 每个两个小时鼓励一次用户,赞美她有工作了两个小时 
3. 页面上要有两个图标,牛和马交替出现

并发给了腾讯元宝

元宝生成的代码可以直接运行

太丑了,于是乎,我重新设计了一下显示的页面,从让 AI 参考这个修改布局

它返回这样的

总感觉丑丑的,不是我想要的,于是我告诉它要怎么改,我希望牛马水平展现:

结果返回的牛马越界了,有点搞笑了

接下来,我有让他好好排排版,对齐了

结果排好版了,对齐了,但是时间它不让我修改了,只能固定 23:30,妈呀,每天23:30下班不得真是牛马了,这是肯定不能接受的

于是乎我又告诉它,下班时候要自己调,不要写死

结果终于符合想法了,还真不错,接下来就把代码复制一下,保存后缀为 html 的网页就可以了

接下啦就可以用 github 部署网站了,具体参考 https://docs.github.com/zh/pages/quickstart

四、结果

这是部署好的网站,可以体验一下:https://shengjk.github.io/zhuzi.ai/

五、总结

AI 编程的核心是要把AI当做一个人,通过不变的沟通交流,达到最终的目的。下面是一些建议 明确具体问题

代码语言:javascript
代码运行次数:0
运行
复制
简洁清晰 :尽量用简洁明了的语言描述你的问题。避免使用模糊或过于宽泛的表述。例如,不要只是问 “我这个代码为什么运行不了”,而是具体说明 “我在运行 Python 程序时,出现了一个错误提示‘IndexError: list index out of range’,我的代码是……,请问这是怎么回事?”。
提供上下文 :如果问题涉及到特定的项目背景、代码框架或者之前的开发过程,简单提及这些上下文信息。比如,“我在开发一个 Django 项目,现在想在用户登录模块添加一个验证码功能,但不知道如何在 Django 中实现验证码的生成和验证,能给我一些代码示例吗?”

指定编程语言和工具

代码语言:javascript
代码运行次数:0
运行
复制
明确语言 :如果你需要针对特定编程语言的解决方案,一定要在提示词中明确指出。例如,“我需要一个用 Java 实现的二叉树遍历算法”,而不是模糊地问“二叉树遍历算法”。
提及工具 :如果你使用了特定的开发工具或框架,也应提及。比如,“我在使用 React 框架开发前端页面,如何实现一个响应式的导航栏组件?”

描述期望的输出或结果

代码语言:javascript
代码运行次数:0
运行
复制
代码示例 :如果你希望 AI 提供代码示例,明确说明。例如,“请给我一个 Python 中实现冒泡排序的代码示例”。
解释说明 :如果需要对代码进行解释,也应指出。比如,“请解释一下这段代码中每个函数的作用”。
优化建议 :如果你希望 AI 对现有代码进行优化,说明你的目标。例如,“这段代码运行速度很慢,你能帮我优化一下,让它更高效吗?”

合理限制范围

代码语言:javascript
代码运行次数:0
运行
复制
避免过于复杂 :尽量避免一次性提出过于复杂或涉及多个问题的提示词。例如,不要问“请帮我设计一个完整的电商系统,包括前端、后端和数据库”。可以将问题分解为多个小问题,逐一提问。
分步骤提问 :对于复杂的任务,可以分步骤提问。例如,“首先,我需要一个用户注册的前端表单页面代码;然后,我需要后端接收注册信息并存储到数据库的代码;最后,我需要一个登录验证的代码。”

利用模板和结构化提示

代码语言:javascript
代码运行次数:0
运行
复制
问题模板 :可以创建一些常用的问题模板,方便快速提问。例如,“问题描述:……;相关代码:……;遇到的错误:……;期望的解决方案:……”。
结构化提示 :使用结构化的提示词,让 AI 更容易理解你的需求。例如,“我需要一个函数,输入参数是……,输出结果是……,请提供代码实现。”

反馈和调整

代码语言:javascript
代码运行次数:0
运行
复制
反馈结果 :如果 AI 提供的答案不符合你的预期,不要直接放弃。可以对结果进行反馈,比如,“这个代码看起来不错,但我想知道为什么这里要使用这个函数?”或者“这个解决方案有点复杂,有没有更简单的方法?”。
调整提示词 :根据 AI 的回答,调整你的提示词。如果 AI 的回答过于宽泛,可以进一步细化问题;如果回答过于简单,可以要求更详细的解释或更复杂的解决方案。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、背景
  • 二、想法
  • 三、实现方式
  • 四、结果
  • 五、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档