半小时打造七夕传统文化网站:Qoder AI编程实战记录

背景

最近七夕到了,恰逢Qoder上线,萌生了一个想法,写一个以中国传统七夕为主题的网站。

uzong.github.io/qixi/

Qoder 介绍

Qoder 是阿里巴巴推出的一款旨在提升开发效率的 AI 编程平台。它通过上下文工程技术智能体辅助,帮助开发者更高效地完成编码任务。

qoder.com/

使用和介绍在此不再赘述,感兴趣可以自行下载试用

实现需求的技巧

如何让想法能够被比较不错的实现。一般使用分为两步:

  • 将想法告诉大模型,让其生成一份 Prompt (提示词)
  • 将生成的 Prompt 告诉 Qoder(可以是其他的 AI 编辑器)

需求阶段

需求描述

markdown 复制代码
1. 写一个炫酷的网站

2. 作为中国传统七夕介绍

3. 有中国传统的古诗词、传统文化、传统故事等

4. 布局合理、富有活力

5. 扁平化风格,优雅高级

Prompt 设计

上述需求输入大模型,让其生成一份结构化的Prompt

将需求给 DeepSeek,让其生成一个翔实的 Prompt

实现阶段

将 Prompt 粘贴到 Qoder 中实现

Qoder 会分步骤完成,并在过程中进行诸多优化。如下所示:

最终,Qoder 会按照需求一一实现。因为是静态网站,最终呈现效果还不错。

网站展示

仓库地址

将生成的静态网站,使用 github 的 Pages 部署一下。

仓库地址:github.com/uzong/qixi

整体效果还不错,可以体验访问一下。

总结

不管是使用 Qoder 还是 Trae、cursor、WindSurf 等,都可以实现上面的效果,核心思路一致。

  • 用大模型辅助生成 Prompt
  • 用大模型生成的 Prompt 交给AI编辑软件

过程仍需要不断的进行调试和优化。

至此,一个设计精良的网站便完成了,整个过程耗时不足半小时。感兴趣也可以尝试一下。

相关推荐
counterxing7 小时前
Agent 跑起来之后,难的是复用、观测和评测
node.js·agent·ai编程
uccs7 小时前
大模型底层机制与Agent开发
agent·ai编程·claude
counterxing8 小时前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
夜雪闻竹8 小时前
vectra 向量索引文件损坏怎么办
ai编程·向量·vectra
ZzT8 小时前
Harness 到底指什么
openai·ai编程·claude
宅小年9 小时前
AI 创业最危险的地方:太容易做出来
openai·ai编程·claude
麦客奥德彪9 小时前
Android Skills
架构·ai编程
candyTong9 小时前
Claude Code 的 Edit 工具是怎么工作的
javascript·后端·架构
言萧凡_CookieBoty10 小时前
一文讲清 RAG:让 AI 读懂业务知识库的核心方法
ai编程
GetcharZp10 小时前
GitHub 2.4 万 Star!D2 正在重新定义程序员画图方式
后端