惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog RSS Feed
K
Kaspersky official blog
Forbes - Security
Forbes - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Proofpoint News Feed
G
GRAHAM CLULEY
V
Vulnerabilities – Threatpost
Security Latest
Security Latest
Scott Helme
Scott Helme
S
Securelist
美团技术团队
T
Threat Research - Cisco Blogs
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
SegmentFault 最新的问题
W
WeLiveSecurity
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Apple Machine Learning Research
Apple Machine Learning Research
The Cloudflare Blog
AI
AI
L
Lohrmann on Cybersecurity
S
Security Affairs
Cloudbric
Cloudbric
SecWiki News
SecWiki News
爱范儿
爱范儿
雷峰网
雷峰网
Engineering at Meta
Engineering at Meta
C
Cyber Attacks, Cyber Crime and Cyber Security
大猫的无限游戏
大猫的无限游戏
N
News and Events Feed by Topic
I
InfoQ
S
Secure Thoughts
AWS News Blog
AWS News Blog
A
About on SuperTechFans
Schneier on Security
Schneier on Security
酷 壳 – CoolShell
酷 壳 – CoolShell
The Last Watchdog
The Last Watchdog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Check Point Blog
P
Palo Alto Networks Blog
博客园 - 【当耐特】
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Google DeepMind News
Google DeepMind News
Latest news
Latest news
I
Intezer
博客园_首页
C
CXSECURITY Database RSS Feed - CXSecurity.com
V
V2EX
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
L
LangChain Blog
D
Docker

十月指南

使用AI开发一个应用最好的时间是现在 Kimi K2 发布并开源,实测效果确实很强! Vibe Coding实战:从翻车到上线,我开发了一款提前还贷计算器小程序 告别熬夜写代码!AI编程让我用Vibe Coding轻松上线 10 + 工具 用Vibe Coding方式打造 AI 内容创作平台 GPT 4.1、DeepSeek R1、Claude 3.7 代码生成横评,谁才是设计稿还原之王? AI 时代程序员生存指南 Cursor+Figma MCP 设计稿还原如此简单 MCP(模型上下文协议)是什么?它如何简化与API的AI集成 号外!我用Trae+Claude3.7开发的小程序上线啦 30分钟开发完成!Trae+Claude 3.7 打造小程序全流程揭秘! 5 分钟打造超酷小程序设计稿,Trae+Claude 3.7 太神了! 一句话生成设计稿,Trae+Claude 3.7 Sonnet,设计师也要被AI取代了 一句话生成应用!程序员效率翻倍的AI代码生成工具大盘点 我用AI创作了一首歌:Suno、海绵音乐、天工AI音乐生成效果测评 从哪吒2热潮到AI短片创作:AI视频实战测评 shadcn_ui:2024年最受欢迎的前端项目 实战:基于 Next.js+MoonShot API 开发一个 Github Trending 总结助手 技术篇:构建与部署 技术篇:Google 统计服务 技术篇:Next.js 多环境配置 技术篇:数据库-Prisma 技术篇:身份验证-NextAuth 技术篇:CSR、SSR、SSG、ISR 与客户端、服务端组件 技术篇:Next.js 路由与页面管理 技术篇:Next.js 项目结构 技术篇:Next.js 简介与概览 技术篇:从零开始掌握 Tailwind CSS 设计篇:独立开发设计入门 开篇:走上独立开发之路 Ollama:本地大模型运行指南 TooTool.net 理解 CSS 中的 Containing Block(包含块) 独立开发者工具大全(持续更新) TimeFlow 如何快速拥有一个技术博客 一个人从零开发上线一款App需要多少钱?终于有答案了! 深入理解HTTPS Nginx实战 Flutter Platform Channel 使用与源码分析 Android SDK类产品开发总结 360插件化框架 RePlugin 之 ClassLoader Hook Mac下Charles抓包配置 十一大西北体验 利用ContentProvider实现同步Binder macOS修改Android模拟器Hosts 走过 登山记 期待成长 小雨 静夜思 关于
我连代码都没写,却做出JSON格式化工具—Vibe Coding了解一下
十月 · 2025-06-08 · via 十月指南

“Vibe Coding”(中文常译作“氛围编程”或“沉浸式编程”)这一术语的提出者是OpenAI联合创始人、计算机科学家安德烈·卡帕西(Andrej Karpathy)。其来源可追溯至他在2025年2月于社交媒体平台X上发布的一条动态,目前累计阅读已经超过500万。

DeepSeek译文:有一种我称之为“氛围编程”(vibe coding)的新式编程方式,你完全沉浸在氛围中,拥抱技术的指数级进步,甚至忘记代码的存在。这之所以成为可能,是因为大语言模型(比如Cursor Composer搭配Sonnet)已经变得太强大了。而且我直接用SuperWhisper和Composer对话,几乎不用碰键盘。我会提出最懒的要求,比如“把侧边栏的内边距减半”,因为我懒得自己去找。我总是“全部接受”,不再看代码差异。遇到报错时,我直接原封不动地复制粘贴进去,通常问题就解决了。代码逐渐超出我平时的理解范围,真要搞懂得花时间仔细阅读。有时候大语言模型修不好某个bug,我就绕过去或者随便改点东西直到问题消失。对于临时性的周末小项目来说还行,但也挺有趣的。我在构建一个项目或网页应用,但这其实不算真正的编程——我只是看看东西、说说需求、运行一下、复制粘贴,然后它大多就能跑起来。

今天我们就用一个例子完全体验一下 Vibe Coding 带来的乐趣,作为开发者最常用的工具之一JSON格式化,今天我们就用 Vibe Coding 的方式开发一个JSON格式化工具。

工具选择 #

  • IDE:Cursor
  • 模型:Claude 3.7 Sonnet
  • 技术栈:Next.js

项目初始化 #

  • 初始化成功
  • 查看package.json
{
  "name": "vibe_coding",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.3"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.3.3",
    "@eslint/eslintrc": "^3"
  }
}

第一次运行 #

预览 #

JSON 解析工具开发 #

  • 开始写代码

第二次运行 #

可以看到效果还不错,已经基本可用了。

嵌套示例 #

  • 点击嵌套示例

错误JSON #

可以看到错误信息也显示出来了,但是还没有行号导致错误不是特别明显,因此在输入框还需要增加行号显示,继续 Vibe Coding。

显示行号 #

第三次运行 #

错误提示 #

可以看到错误信息与行号能够对应起来了。

总结 #

至此基本上达到了一个基本可用的状态了,Vibe Coding 的代码甚至没有出一次错误(当然项目复杂度也不大),那么你在工作中 Vibe Coding 了吗?

既然都都到这一步了,我简单在 Vercel 上部署了一下,代码已发布在 GitHub,有兴趣的小伙伴可以在 ISSUE 里提交你想要的开发者工具,我将继续 Vibe Coding。

代码: https://github.com/yangpeng7/vibe_coding

在线体验: https://tools.oct.cool