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

推荐订阅源

IT之家
IT之家
L
LangChain Blog
博客园 - 聂微东
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
GbyAI
GbyAI
博客园_首页
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
酷 壳 – CoolShell
酷 壳 – CoolShell
D
Docker
V
V2EX
月光博客
月光博客
Recent Commits to openclaw:main
Recent Commits to openclaw:main
S
SegmentFault 最新的问题
雷峰网
雷峰网
Stack Overflow Blog
Stack Overflow Blog
Cyberwarzone
Cyberwarzone
P
Privacy International News Feed
Spread Privacy
Spread Privacy
Project Zero
Project Zero
腾讯CDC
Engineering at Meta
Engineering at Meta
T
Tenable Blog
aimingoo的专栏
aimingoo的专栏
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Jina AI
Jina AI
大猫的无限游戏
大猫的无限游戏
量子位
Blog — PlanetScale
Blog — PlanetScale
D
DataBreaches.Net
T
Troy Hunt's Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
美团技术团队
N
News and Events Feed by Topic
T
Tor Project blog
H
Help Net Security
www.infosecurity-magazine.com
www.infosecurity-magazine.com
Last Week in AI
Last Week in AI
S
Security Affairs
小众软件
小众软件
Scott Helme
Scott Helme
云风的 BLOG
云风的 BLOG
Apple Machine Learning Research
Apple Machine Learning Research
Vercel News
Vercel News
人人都是产品经理
人人都是产品经理
PCI Perspectives
PCI Perspectives
TaoSecurity Blog
TaoSecurity Blog
博客园 - 叶小钗
V
Visual Studio Blog
The Cloudflare Blog
Recent Announcements
Recent Announcements

十月指南

使用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