升级打怪
昨天刷到一篇帖子公司开始全面 vibe coding 之后感觉更累了 - V2EX。
op 写了大段内容，看着很累，待看到后面的评论区，才知道 op 用了AI排版😓。
“简单说，就是用了 vibe coding 后，开发更累了。”
看了op的 “后续反思”，感觉太低级，有点误人子弟。
不能说完全解决问题，但是解决问题的路径和对AI的理解确实不是小白可比。
每个人对于AI的使用，其能力是参差不齐的，有的人是“自我总结”，有的人是学习官方文档。
如果一开始，就是零星学习一些散落的AI知识，再结合“自我总结”。
这样的路径，最终会导致不伦不类。
好的路径应该是，首先从官方文档开始学习，然后逐渐递进学习深度，例如：Rules、Skills 等等。
使用AI能力的判断标准，可以通过下面5个维度来看：
- 输入控制力（Input Control）
- 输出可控性（Output Control）
- 任务建模力（Task Modeling）
- 风险与约束意识（Risk Control）
- 系统与流程设计力（System Design）
油管上有主播谈了一下，企业中使用 “vibe coding” 开发遇到的问题，将的还蛮好的，可以看看。
还有个主播，讲了很多AI基础和原理性的内容，非常适合新人学习。
最后，我想说，很多使用者都是从 ChatGPT 开始接触 AI 工具，对于“LLA大模型”“模型蒸馏”“Agent”“MCP”“Skill”等等，都只是一知半解。
但是，AI 发展很快，其技术指标一直在迭代，如果不去学习官方文档，根本不清楚当前使用的模型有哪些功能特性，更加不要说 Vibe Coding。
Ref
还是跟上次一样，这次也是 Vibe Coding。
写起来很easy，只需要review和调试。
- 首先是一个很基础的 mvp；
- 代码优化、插件调试和编写项目说明；
- 发布 Marketplace；
发布 Marketplace，花的时间最多，步骤有点多：
- 首先用 Microsoft 账号创建 Azure 账号；
- 再用Azure账号，创建 Azure DevOps 组织（这里需要绑定信用卡）；
- 有了组织后，就可以创建 publisher 账号；
- publisher 账号才可以发布到 Marketplace 应用市场；
本地调试，直接选中项目文件extension.js，按 “F5”
这时，会弹出一个调试用的 vs code，
- 再按“Command + shfit + p”，
- 输入“Matrix Overlay: Start”
- 就能看到一个 Matrix 黑客帝国动画
插件发布有2种方式：
- 使用 vsce 发布；
- 直接登录 Marketplace 后台上传插件；
二者都可以，但还是推荐 vsce，可以看到一些检查信息。
插件的 icon.png 是使用 AI 生成：
Matrix-inspired cyberpunk icon.
Stylized hacker sunglasses with glowing green code reflections,
a minimalist lightning bolt integrated into the lenses.
Dark theme, neon green glow, high contrast.
Flat vector icon, no background details, no text.
Optimized for small UI icon usage.
效果如下：
.png){kind=icon}
“个人感觉还不错，闪电⚡️和墨镜🕶️都有，要是背景透明就更好了。”
因为是要钱的，所以只生成了一张。😅
Ref
RT，这个算不算是😧，Vibe Coding？🤔
上午在coding页面的时候遇到一个挺烦人😡的事情：css 转內联样式。
在 Marketplace 找了一圈也没特别心仪的插件。
不是没有，而是没遇到心仪的。
主要问题是：
- 功能杂七杂八，不够纯粹
- 很久没人维护
- 名字取的不感冒😷，蹭热度
我就喜欢那种能将一个事情做到极致，又很纯粹的东西。
可惜，nothing。
突然想到，自己非常喜欢的工具🔧，PopClip。
它挺适合解决这个问题：选中一段css，然后转换成内联样式。
说干就干，立马派 ChatGPT 干活。
一开始，先询问“popclip 有类似的插件吗？”
ChatGPT 提示我，可以自己做一个PopClip扩展。
想了想，觉得可以，当作一个实验。
经过数轮验证和提示词修改，终于完成成品，效果还蛮理想。
Look Here👀👇
代码如下：
-
新建 CSS2JS.popclipext 文件夹。
-
创建 Config.yaml
name: CSS to JS Object
identifier: com.richie.css2js
description: Convert CSS to JavaScript style object
icon: code
actions:
- title: CSS→JS
icon: code
requirements: [text]
# PopClip 2025 官方 Shell Script Action 写法
shell script file: css2js.py
interpreter: python3
stdin: text
after: paste-result
- 再创建 css2js.py
#!/usr/bin/env python3
import sys
text = sys.stdin.read()
lines = [l.strip() for l in text.splitlines() if ':' in l]
entries = []
for line in lines:
line = line.rstrip(';')
if ':' not in line:
continue
prop, val = line.split(':', 1)
prop = prop.strip()
val = val.strip()
parts = prop.split('-')
camel = parts[0] + ''.join(p.capitalize() for p in parts[1:])
entries.append(f" {camel}: '{val}'")
print("{")
print(",\n".join(entries))
print("}")
- 赋予脚本可执行权限
chmod +x css2js.py
- 双击即可完成安装。
PopClip 插件支持2种扩展类型：
- Package(当前是这种方式)
- Snippet 脚本，选中一段代码，然后出现安装提示🔔。如下：
刚开始是使用第一种方式开发，看起来很简单，但始终报错运行不起来。
后面改成第二种方式，一次就跑起来了。
使用 ChatGPT 开发这个插件，也遇到一些比较头疼🤕的问题：
“ChatGPT 提供的代码始终无法运行。”
后来，我意识到问题所在：“它的训练数据可能过时了”。
因此，我改变了提示词，结果一目了然✌️。
vibe coding 这个事情出来也有些时间了。
感觉对于IT从业者需要了解，以至于不被快速发展的行业趋势所淘汰。
简单讲，就是编程这个事情，是人来主导？还是机器主导？
软件需求开发，一般是：
- 需求文档
- 开发概设
- coding
在开发概设的时候，需要考虑技术架构和选型等一众技术问题。
当进入 coding 阶段，需要考虑编码规范、业务逻辑等一些具体实现问题。
然而，vibe coding 这个模式，主要实施在 coding 阶段。区别是，不再考虑编码规范等一些实现细节，而是由 AI 相关工具完成。
使用这个模式的开发者，只需要告诉 AI 具体的需求，然后针对产出物微调，直至达成。
总体而言，是一个非常好的理念，但想替代传统开发有限。
非常适合，周末即兴项目，即MVP。