前言

最近逛 Reddit 的时候，看到一个关于最被低估的 JavaScript 特性的讨论，我对此进行了总结，和大家分享一下。

1. Set：数组去重 + 快速查找，比 filter 快 3 倍

提到数组去重，很多人第一反应是 filter + indexOf，但这种写法的时间复杂度是 O (n²)，而 Set 天生支持 “唯一值”，查找速度是 O (1)，还能直接转数组。

举个例子：

用户 ID 去重：

// 后端返回的重复用户 ID 列表

const duplicateIds = [101, 102, 102, 103, 103, 103];

// 1 行去重

const uniqueIds = [...new Set(duplicateIds)];

console.log(uniqueIds); // [101,102,103]

避免重复绑定事件：

const listenedEvents = new Set();

// 封装事件绑定函数，防止同一事件重复绑定

function safeAddEvent(eventName, handler) {

  if (!listenedEvents.has(eventName)) {

    window.addEventListener(eventName, handler);

    listenedEvents.add(eventName); // 标记已绑定

  }

}

// 调用 2 次也只会绑定 1 次 scroll 事件

safeAddEvent("scroll", () => console.log("滚动了"));

safeAddEvent("scroll", () => console.log("滚动了"));

2. Object.entries () + Object.fromEntries ()：对象数组互转神器

以前想遍历对象，要用 for...in 循环，外加判断 hasOwnProperty；如果想把数组转成对象，只能手动写循环。这对组合直接一键搞定。

举个例子：

筛选对象属性，过滤掉空值：

// 后端返回的用户信息，包含空值字段

const userInfo = {

  name: "张三",

  age: 28,

  avatar: "", // 空值，需要过滤

  phone: "13800138000",

};

// 1. 转成[key,value]数组，过滤空值；2. 转回对象

const filteredUser = Object.fromEntries(Object.entries(userInfo).filter(([key, value]) => value !== ""));

console.log(filteredUser);

// {name: "张三", age:28, phone: "13800138000"}

URL 参数转对象（不用再写正则了）

// 地址栏的参数：?name=张三&age=28&gender=男

const searchStr = window.location.search.slice(1);



// 直接转成对象，支持中文和特殊字符

const paramObj = Object.fromEntries(new URLSearchParams(searchStr));



console.log(paramObj); // {name: "张三", age: "28", gender: "男"}

3. ?? 与 ??=：比 || 靠谱

用 || 设置默认值时，会把 0、""、false这些 “有效假值” 当成空值。比如用户输入 0（表示数量），count || 10会返回 10，但这里其实应该返回 0。而??只判断 null/undefined。

举个例子：

处理用户输入的 “有效假值”：

// 用户输入的数量（ 0 是有效数值，不能替换）

const userInputCount = 0;



// 错误写法：会把 0 当成空值，返回 10

const wrongCount = userInputCount || 10;



// 正确写法：只判断 null/undefined，返回 0

const correctCount = userInputCount ?? 10;



console.log(wrongCount, correctCount); // 10, 0

给对象补默认值（不会覆盖已有值）：

// 前端传入的配置，可能缺少 retries 字段

const requestConfig = { timeout: 5000 };



// 只有当 retries 为 null/undefined 时，才赋值 3（不覆盖已有值）

requestConfig.retries ??= 3;

console.log(requestConfig); // {timeout:5000, retries:3}



// 如果已有值，不会被覆盖

const oldConfig = { timeout: 3000, retries: 2 };

oldConfig.retries ??= 3;

console.log(oldConfig); // {timeout:3000, retries:2}

4. Intl API：原生国际化 API

很多人会用 moment.js 处理日期、货币格式化，但这个库体积特别大（压缩后也有几十 KB）；而 Intl 是浏览器原生 API，支持货币、日期、数字的本地化，体积为 0，还能自动适配地区。

举个例子：

多语言货币格式化（适配中英文）：

const price = 1234.56;



// 人民币格式（自动加 ¥ 和千分位）

const cnyPrice = new Intl.NumberFormat("zh-CN", {

  style: "currency",

  currency: "CNY",

}).format(price);



// 美元格式（自动加 $ 和千分位）

const usdPrice = new Intl.NumberFormat("en-US", {

  style: "currency",

  currency: "USD",

}).format(price);



console.log(cnyPrice, usdPrice); // ¥1,234.56 $1,234.56

日期本地化（不用手动拼接年月日）：

const now = new Date();



// 中文日期：2025年11月3日 15:40:22

const cnDate = new Intl.DateTimeFormat("zh-CN", {

  year: "numeric",

  month: "long",

  day: "numeric",

  hour: "2-digit",

  minute: "2-digit",

  second: "2-digit",

}).format(now);



// 英文日期：November 3, 2025, 03:40:22 PM

const enDate = new Intl.DateTimeFormat("en-US", {

  year: "numeric",

  month: "long",

  day: "numeric",

  hour: "2-digit",

  minute: "2-digit",

  second: "2-digit",

}).format(now);

console.log(cnDate, enDate);

5. Intersection Observer：图片懒加载 + 滚动加载，不卡主线程

传统我们用 scroll事件 + getBoundingClientRect()判断元素是否在视口，会频繁触发重排，导致页面卡顿；Intersection ObserverAPI 是异步监听，不阻塞主线程，性能直接提升一大截。

举个例子：

图片懒加载（可用于优化首屏加载速度）：

<img data-src="https://xxx.com/real-img.jpg" src="placeholder.jpg" class="lazy-img" />

// 初始化观察者

const lazyObserver = new IntersectionObserver((entries) => {

  entries.forEach((entry) => {

    // 当图片进入视口

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src; // 加载真实图片

      lazyObserver.unobserve(img); // 加载后停止监听

    }

  });

});

// 给所有懒加载图片添加监听

document.querySelectorAll(".lazy-img").forEach((img) => {

  lazyObserver.observe(img);

});

列表滚动加载更多（避免一次性加载过多数据）：

<ul id="news-list">ul>



<div id="load-more">加载中...div>

const loadObserver = new IntersectionObserver((entries) => {

  if (entries[0].isIntersecting) {

    // 当加载提示进入视口，请求下一页数据

    fetchNextPageData().then((data) => {

      renderNews(data); // 渲染新列表项

    });

  }

});

// 监听加载提示元素

loadObserver.observe(document.getElementById("load-more"));

6. Promise.allSettled ()：批量请求不 “挂掉”，比 Promise.all 更实用

如果使用 Promise.all，当批量请求时，只要有一个请求失败，Promise.all 就会直接 reject，其他成功的请求结果就拿不到了；而 allSettled 会等待所有请求完成，不管成功失败，还能分别处理结果。

举个例子：

批量获取用户信息 + 订单 + 消息（部分接口失败不影响整体）：

// 3个并行请求，可能有失败的

const requestList = [

  fetch("/api/user/101"), // 成功

  fetch("/api/orders/101"), // 失败（比如订单不存在）

  fetch("/api/messages/101"), // 成功

];



// 等待所有请求完成，处理成功和失败的结果

Promise.allSettled(requestList).then((results) => {

  // 处理成功的请求

  const successData = results.filter((res) => res.status === "fulfilled").map((res) => res.value.json());

  // 记录失败的请求（方便排查问题）

  const failedRequests = results.filter((res) => res.status === "rejected").map((res) => res.reason.url);

  console.log("成功数据：", successData);

  console.log("失败接口：", failedRequests); // ["/api/orders/101"]

});

7. element.closest ()：向上找父元素最安全的方式

传统如果想找某个元素的父元素，比如点击列表项找列表，需要使用 element.parentNode.parentNode，但一旦 DOM 结构变了，代码就崩了；closest() 回直接根据 CSS 选择器找最近的祖先元素，不管嵌套多少层。

举个例子：

点击列表项，给列表容器加高亮：

<ul class="user-list">

  <li class="user-item">张三li>

  <li class="user-item">李四li>

ul>

document.querySelectorAll(".user-item").forEach((item) => {

  item.addEventListener("click", (e) => {

    // 找到最近的.user-list（不管中间嵌套多少层）

    const list = e.target.closest(".user-list");

    list.classList.toggle("active"); // 切换高亮

  });

});

输入框聚焦，给表单组加样式：

<div class="form-group">

  <label>用户名label>

  <input type="text" id="username" />

div>

const usernameInput = document.getElementById("username");

usernameInput.addEventListener("focus", (e) => {

  // 找到最近的.form-group，加focused样式

  const formGr0up = e.target.closest(".form-group");

  formGr0up.classList.add("focused");

});

8. URL + URLSearchParams：处理 URL 方便多了

传统解析 URL 参数、修改参数，还要写复杂的正则表达式，有时还得处理中文编码问题；当然我们会直接引入三方库来处理，但毕竟还要引入多余的苦，其实 URL API 可以直接解析 URL 结构，URLSearchParams 可用于处理参数，支持增删改查，自动编码，方便多了。

解析 URL 参数（支持中文和特殊字符）：

// 当前页面URL：https://xxx.com/user?name=张三&age=28&gender=男

const currentUrl = new URL(window.location.href);



// 获取参数

console.log(currentUrl.searchParams.get("name")); // 张三

console.log(currentUrl.hostname); // xxx.com（域名）

console.log(currentUrl.pathname); // /user（路径）

修改 URL 参数，跳转新页面：

const url = new URL("https://xxx.com/list");



// 添加参数

url.searchParams.append("page", 2);

url.searchParams.append("size", 10);



// 修改参数

url.searchParams.set("page", 3);



// 删除参数

url.searchParams.delete("size");

console.log(url.href); // https://xxx.com/list?page=3

window.location.href = url.href; // 跳转到第3页

9. for...of 循环：比 forEach 灵活，还支持 break 和 continue

我们都知道，forEach 不能用 break中断循环，也不能用 continue跳过当前项。而for...of不仅支持中断，还能遍历数组、Set、Map、字符串，甚至获取索引。

举个例子：

遍历数组，找到目标值后中断：

const productList = [

  { id: 1, name: "手机", price: 5999 },

  { id: 2, name: "电脑", price: 9999 },

  { id: 3, name: "平板", price: 3999 },

];



// 找价格大于8000的产品，找到后中断

for (const product of productList) {

  if (product.price > 8000) {

    console.log("找到高价产品：", product); // {id:2, name:"电脑", ...}

    break; // 中断循环，不用遍历剩下的

  }

}

遍历 Set，获取索引：

const uniqueTags = new Set(["前端", "JS", "CSS"]);



// 用 entries() 获取索引和值

for (const [index, tag] of [...uniqueTags].entries()) {

  console.log(`索引${index}：${tag}`); // 索引 0：前端，索引 1：JS...

}

10. 顶层 await：模块异步初始化

以前在 ES 模块里想异步加载配置，必须写个 async 函数再调用；现在 top-level await 允许你在模块顶层直接用 await，其他模块导入时会自动等待，不用再手动处理异步。

举个例子：

模块初始化时加载配置：

// config.js

// 顶层直接 await，加载后端配置



const response = await fetch("/api/config");

export const appConfig = await response.json(); // {baseUrl: "https://xxx.com", timeout: 5000}

// api.js（导入 config.js，自动等待配置加载完成）

import { appConfig } from "./config.js";



// 直接用配置，不用关心异步

export const apiClient = {

  baseUrl: appConfig.baseUrl,

  get(url) {

    return fetch(`${this.baseUrl}${url}`, { timeout: appConfig.timeout });

  },

};

点击按钮动态加载组件（按需加载，减少首屏体积）：

// 点击“图表”按钮，才加载图表组件

document.getElementById("show-chart-btn").addEventListener("click", async () => {

  // 动态导入图表模块，await 等待加载完成

  const { renderChart } = await import("./chart-module.js");

  renderChart("#chart-container"); // 渲染图表

});

结语

可以看到，以前我们依赖的第三方库，其实原生 API 早就能解决，比如用 Intl 替代 moment.js，用 Set 替代 lodash 的 uniq，用 Intersection Observer 替代懒加载，随着老旧的浏览器被讨论，兼容性越来越好，这些 API 以后会成为基操。

作者：冴羽
来源：juejin.cn/post/7568153532014559267

自我介绍

大家好，我是志辉，10 年大数据架构，目前专注 AI 编程

1、背景

这个很早我就想写了 App 了，我也是痛风患者，好多年，深知这里面的痛呀，所以我想给大家带来一个好的通风管家的体验，但宏伟目标还是从小点着手，那么就有了今天的主角，痛风伴侣 H5。

目录大纲

前面都是些开胃小菜，看官们现在我们就正式开始正文，那么整体目前是分的 6 个阶段。

第零阶段：介绍

第一阶段：需求

第二阶段：数据准备

第三阶段：开发+联调+部署

第四阶段：部署+上线

第五阶段：运营维护+推广

第六阶段：成本计算

前四个阶段可以分为一个大家的阶段，就完成了你的产品工作

最后就是收尾工作，以及后续的维护。

废话少说，就正式开始吧。

第零阶段：介绍

产品开发流程图

这是一个传统的软件开发流程，从需求的讨论开始到最后的产品上线，总共需要的六大步骤，包括后续的迭代升级维护。

成本测算

这里面其实最大的就是投入的人力成本，还不算使用的电脑、软件这些，还包括最大的就是时间成本。

我们按按照基本公司业务项目的项目来迭代看

• 人力成本
  • 产品：1～2 人，有些大项目合作的会更多，跨大部门合作的。
  • UI ：1 人
  • 研发：
    • 前端：1～2人
    • 后端：2～3人
  • 测试：1～2 人
  • 合计：这里面最少都是 6 人
• 时间成本
  • 这里不用多少，大家如果有经验的，基本公司项目一般的需求都是至少一个月才能上线一个版本，小需求快的也就是半个月上线。
• 沟通成本
  • 这个就用说了，大家都是合作项目，产品和 UI，产品和研发，研发和测试，这就是为啥会有那么多会的缘故，不同的工种，面对的是不同

时间成本感受

个人创业感想

那这里你就可能要较真了，你这个功能简单，哪能跟公司的项目比了。

那我就想起我之前跟我同学一起创业搞 app 的时候，那个时候我不会 app、也不会前端，我是主战大数据的，其实对后端有些框架不也太熟。

那会儿我们四个人，1 个 app、1 个后端+前端、1 个产品，也是足足搞了 1 个多月才勉强上了第一个小版本。

但是我们花的时间很多，虽然一个月，但那一个月我没睡过觉，不会就得学呀，哪像现在不会你找个 AI 帮手帮你搞，你就盯着就行，那会一边学前端，一遍写代码，遇到问题只能搜索引擎查，要么就是硬看源码去找思路解决。

想想就是很痛苦。

公司工作感想

本职工作是大数据架构，设计的都是后端复杂的项目通信，整体底层架构设计，但是也需要去做一些产品的事情。

但是大数据产品就不像业务系统配比那么豪华，一整个公司就两三个人，那么有时候就的去做后端服务、前端界面，就为了把我们的产品体验做好。

每天下班疯狂学习前端框架，从最基本的 html、css、js 学起，不然问题解决不了，花了大量的时间，并且做项目还要学习各种框架，不然报错了你都不知道咋去搜索。

这样能做大功能的事情很少，也就是修修补补做些小功能。

产品感想

这也是我最近用了 AI 编程后的感想，最近公司的数据产品项目，我基本都是 AI 编程搞定。

以前复杂的画布拖拉拽，我基本搞不定到上线的质量，现在咔咔的一下午就搞定开发，再结合 AI 的部署模板，一天就基本完成功能。效率太快。

也是这样，我在现在的公司的产出一周顶的上以前的一个月（这真不是吹牛，开会的半个小时，大数据的首页的 landing page 我就做好了🤦♂️） ，但是时间完全不用一周（偷偷的在这了讲，老板知道了，就。。。所以我要多做一些，让老板留下我）。

我现在感想的就是现在更加需要的就是你的创意、你的想法，现在的 AI 能力让更多的人提效的同时，也降低了普通人实现自己产品的可能性。这在以前是无法想象的，毕竟很多门槛是无法跨越，是需要时间磨练的。

效果展示

然后再多来几张美美的截图（偷偷告诉你，这就是我的背景图片工具做出来的。）

第一阶段：需求

1、需求思考

做产品最开的就是需求了，如果你是产品经理，那么我理解这一阶段是不需要 AI 来帮你忙的。

虽然大家基本对产品或多或少都有一些理解，那么专业性肯定比不了，那么我们就需要找专业的帮忙了。

所以我这里找的是 ChatGPT，大家找 DeepSeek，或者是 Gemin，或者是 Claude 都可以的。

我目前准备为痛风患者开发一个拍照识别食物嘌呤的h5应用，我的需求如下：



1. 这个h5底部有3个tab： 识别、食物、我的

2. 在【识别】页面，用户可以选择拍照或者选择相册上传，然后AI识别食物，并且给到对应的嘌呤的识别结果和建议。

3. 在【食物】页面，用于展示不同升糖指数的常见食物，顶部有一个筛选，用户可以筛选按嘌呤含量高低的食物,下方显示食物照片/名称/嘌呤/描述

4. 【我的】页面顶部有一个折线图，用户记录用户的尿酸历史；下方显示近3次的尿酸数据：包括平均、最低、最高的数据；还有记录尿酸和历史记录的列表。



在技术上，【我的】页面尿酸历史记录保存在本地localStorage中，【食物】的筛选也是通过本地筛选，拍照识别食物嘌呤的功能，采用通义千问的vl模型。



请你参考我的需求，帮我编写一份对应的需求文档。

发给 ChatGPT

这样就给我们回复了。

2、思考

你说我不会像你写那么多好的提示词，一个我也是借鉴别人的，一个就是继续找 AI 帮你搞定，比如你不知道 localstoreage 是什么，没关系，这个都是可以找 AI 问出来的。

或者是说你只有一个想法，而不知道这个产品要做成什么，也可以问 AI。

GPT 会告诉你每个阶段该做哪些功能，这样看看哪些对你合适，然后通过不断的多轮对话，来让他输出最后的需求文档。

3、创建需求工作空间

我们在电脑新建个目录，用来存放暂时的需求文档和一些前置工作的文件

Step 1： 在电脑的某个目录下创建前期我们需要的工作项目的目录，这里我叫 h5-food-piaoling

Step 2： Cursor 打开这个目录

Step 3： 创建 docs 目录

Step 4： docs 目录下创建 prd.md 文件，把刚刚 GPT 生成的需求文档拷贝过来。

我这里是后截图的，所以文件很多，不要受干扰了

4、重要的一步

到这里需求文档就创建好了，那么我们是不是马上就可以开发了，哦，NO，这里还有很重要的一步。

那么就是需要仔细看这个 GPT 给我们生成的需求文档，还是需要人工审核下的，避免一些小细节的词语、或者影响的需要修改的。

比如这里，我已经恢复不出来了，这里原来有些 “什么一页的文章，适合老年人的这些文字”，这些其实不符合我那会儿想的需求的，所以我就删除了。

比如这里用到的一些技术，如果你懂的话，就可以换成你懂的技术，也是需要考虑到后面迭代升级的一些事情。

总结：其实这里就是需要人工审查下，避免一些很不符合你想的那些，是需要修改/删除的，这个会影响后面生成 UI/交互的逻辑。

不过这个步骤不做问题也不大，这一步也是需要长久锻炼出来，后面等真实的页面出来后，你再去修改也行。

第二阶段：数据准备

这里的一步也是我认为比较特别的点，这个步骤的点可以借鉴到其他场景里面。

1、哪里找数据

你的产品里的数据的可信度在哪里？特别是关乎于健康的，网上的信息纷繁复杂，大家很难分清哪些是真的，哪些是假的。

我之前查食物的嘌呤的时候，就遇见了，同样一个食物，app 上看到的，网上看到的都不一样，我就黑人问号了？？？

所以，这里就涉及到数据的权威性、真实性了。那么权威机构发布的可信度会更强。

所以我找到了卫健委颁发的数据。

地址：http://www.nhc.gov.cn/sps/c100088…

另外还可以看到不止痛风的资料有，还有青少年、肥胖、肾病的食养指南。

这些病其实都是慢性病，不是吃药就能马上好起来，需要长期靠饮食、运动来恢复的。

可以把这些数据用起来，后面挖掘更多需求。

2、下载数据

这一步周就是把数据下载下来，直接点击上面的

下载来后是个pdf 的文件，那么这一步我们就准备好了。

这里我附带一份，大家可以作为参考

暂时无法在飞书文档外展示此内容

3、处理数据

这一步是为什么了，是因为目前在所有的 AI 编程工具里面，pdf 是读取不了的，特别是 Cursor 里面。

目前能够读取的是 markdown 格式的数据

markdown 格式的数据很简单，就是纯文本，加上一些符号，就可以做成标题显示

不懂的可以直接问题 AI 工具就行了。

这里就可以看到大模型给我们的解释了。

插曲

我不懂 markdown 是什么，帮我解释下，我一点都不懂这个

在 Cursor 里面使用 ask 模式来提问

下面就是一个回答的截图，如果你对里面的文字不清楚的，那么就继续问 AI 就可以了。多轮对话。

处理数据

这里就是需要把 pdf 转为 markdown 的数据

这里推荐使用：mineru.net/

重点在于免费，直接登录注册进来后，点击上传我们刚下载的 pdf。

等待上传转换完成，下一步就是在文件里面，看到转换的文件了。

点击右侧下载，就是 markdown 格式。

把下载好的 markdown 文件放入到项目里面的 data 目录，待会儿会需要数据处理。

4、修正需求文档

那么让 Cursor 给我们重新生成需求文档，这样食物的分类，还有统计，会更准确，因为现在是基于权威数据来的。

食物数据库目前是存储在 json 文件里，请根据 @成人高尿酸血症与痛风食养指南 （2024 年版）.md 的食物嘌呤数据，再根据 @prd.md 里面的食物数据结构，生成一份数据，并获取对应的 image 图片，保存在 imgs 目录下

5、生成数据文件

前面我们不是讲到了。食物列表的数据需要存储在本地，也就是客户端，形式我们就采用 json 的形式

同样你不知道 json 是个啥的话，找 AI 问，或者直接 Cursor 里面提问就行了。

左边是提示词，右侧就是创建的 json 文件

食物数据库目前是存储在 json 文件里，请根据 @成人高尿酸血症与痛风食养指南 （2024 年版）.md 的食物嘌呤数据，再根据 @prd.md 里面的食物数据结构，生成一份数据，并获取对应的 image 图片，保存在 imgs 目录下

结果：

6、继续调整文件

上一步骤发现，其实只给我们列觉了 53 种食物，并不全

我需要全部的数据，那么继续

总结的有 53 种食物，但是我看 @成人高尿酸血症与痛风食养指南 （2024 年版）.md 下的“表1-2 常见食物嘌呤含量表” 应该不止这么多，请再次阅读然后补全数据到 @foods.json 文件里。

最后发现，总文档里总结了 180 种的食物

最后生成的数据文件如下：

6、图片问题

不过这里有个问题就是，食物对应的图片是没有办法在这里一次性完成的

我也尝试了在 Cursor 里让他帮我完成，结果些了一大堆的代码，下来的图片还对应不上。

尝试了很多方案，都不太理想。

那你说了，去搜索引擎下载了，我也想到了，不过想起来你要去搜索，然后找图片，下载，有 180 多种了，还要命名好图片名字，最后保存到目录。

想到这里，我就头大，索性干脆自己写一个，其他流程系统都帮我搞定，暂时目前只需要我人工确认图片，保证准确性。

Claude Code + 爬虫碰撞什么样的火花，3 小时搞定我的数据需求

这个小系统也还是有很大的挖掘潜力，后面也还可以做很多事情

到这里基本需求阶段就完成了，数据也准备的差不多了，下面就是进入开发阶段了。

不要看前面的文字多，那都是前戏，下面就是正戏，坐稳扶好，开奔。

第三阶段：开发+联调+测试

这里是主要的开发、联调、测试阶段，也就是在传统开发流程中会占据大部分的时间，基本一个软件/系统的开发大部分的时间都在这个里面，所以我们看看结合 AI 它的速度将会达到什么样。

== 1、前端 ==

步骤一：bolt 开发

说下为什么采用 bolt 工具来做第一步工作。

其实线下 v0、bolt、lovable 很多这种前端设计工具，那么他与 Cursor 的区别在哪里了？

1、首先通过简单的提示词，它生成的功能和 UI 基本都是很完善的，UI 很美、交互也很舒服。这种你在 Curosr 里面从零开始些是很难的。

2、这种工具一般都可以选择界面的上的元素（比如 div、button，这个就比较难），然后进行你的提示词修改，很精准，这个你在 Cursor 里面比较难做。

3、还有一个点就是前端开发的界面的定位这些大模型很难听得懂你在说啥的，所以我感觉也是这块的难度采用了上面那么多的类似的工具的诞生。

当然，如果不用这些工具，直接让 Cursor 给你出 ui 设计，然后使用 UI 设计出前端代码也可以的。

这个我看看后面用其他例子来讲解。

把上面的需求步骤的 prd.md 的需求直接粘贴到提示词框里。没问题，就可以直接点击提交了。

小技巧：看左下角有个五角星的图标，是可以美化提示词的，这个目前倒是 bolt 都有的功能。

另外还可以通过 Github 或者 Figma 来生成项目图片。

下面就是嘎嘎开始干活了。

等他写完，就可以在界面的右侧看到写完的H5程序。

界面很简单，左侧就是对话区域，右侧就是产品的展示区域

小细节：在使用移动端展示的时候，还可以选择对应的手机型号

步骤二：调整

1、错误修复

这个交互我觉得做的特别好，不用粘贴错误，直接就在界面上点击“Attempt fix”就可以了，这真的是纯 vibe coding ，粘贴复制都不用了。🤦♂️

如果有错误，继续就可以了。

2、UI 调整：主题

刚开始其实 UI 并不是太好看，我的主题色是绿色的，所以我也不知道让它弄什么样的好看。

再帮我美化下 UI 界面

就输入了上面一句话，刚开始的 UI 如下图

最后看下对比效果

左边是最开始生成的，右边是我让他优化后的样子。还是有很多细节优化的。

3、UI 修复方式一：截图

另外如果样式有问题，可以截图粘贴到对话框，然后输入提示词修改。

4、UI 修复方式二：选择元素

这里就是我要说的可以选择界面上的元素，然后针对某些元素进行改写

bolt 的方式这几输入提示词

v0 比较高级，选择后，可以直接修改 div 的一些样式参数，比如：宽高、字体、布局、背景、阴影。精准调节。（低代码+vibe coding）

经过多轮修复，觉得功能差不多了，就可以转战本地 Cursor 就继续下一步了。

步骤三：本地 Cursor 修改

1、同步代码到 Github

点击右上角的「Integrations」里的 Github。

下面就会提示你链登录 Github

接着授权就可以

然欧输入你需要创建的项目名称

2、本地下载代码

使用 git 工具把代码下载到本地

git 就类似游戏的存档工具，每一个步骤都可以存档，当有问题的时候，就可以从某个存档恢复了。

当然：这里需要提前安装好 Git，如果有不懂的可以联系我，我来帮你解决。这你就不多说了

打开你的 Github 仓库页面，复制 HTTPS 的地址

然后使用下面的命令，就可以下载到本地了。

git clone 你的代码仓库地址

下一步就是安装代码的依赖包

这里需要 nodejs 环境，同样就不多说了，不懂的可以私聊

下一步就是启动

接着就是浏览器打开上面的地址：http://localhsot:3000，就可以看见上面写好的页面。

默认打开是按照 pc 的全屏显示的，可能看着有些别扭

我们打开 F12，打开调试窗口，如下图

点击右侧类似电脑手机的按钮，就可以调到移动端模式显示了，还可以选择对应的机型。

xx 小插曲 xx

原本不想放这里的，结果还是放一下吧，刚好是解决了一个很大的问题

刚开始在 bolt 上面修改的时候，修改后一直报个错误，结果修复了很多次，还是没有解决。

没办法，我就在本地 Cursor 上仔细看了下代码，发现是个引号的问题。

我就在本地 Cursor 中快速修复了下

但是后面惊悚的事情来了，我去 bolt 上调整了下界面样式，结果又给我写成了引号的问题

最后我就发现，可能 bolt 目前对这类的错误还是没有意识。并且看它界面的代码，每次都是从头开始写（难怪要等好一段时间才弄完，究竟是什么设计了？）

最后索性，我仔细看了下代码，删除掉了，没啥大的影响。

目前来看 bolt 这种工具还是有点门槛，解决错误的能力还是没有 Cursor 强大，一不小心页面上的错误就在一起存在，你也不知道它改了啥。

这就需要你对代码还是有基本的认识。

步骤四：使用本地数据

首先就是把前面下载准备好的图片放到 imgs 目录下

在 Cursor 中让从 imgs 目录中显示图片。

不过这里 Cursor 还是很智能的，访问后都是 404

那么就直接告诉 Cursor 让他解决这个问题。

结果他一下子就找到问题所在了，需要放在 public 目录下，这个放以前你需要去搜索引擎里面找问题，并且有时候你拿让 AI 解决的问题，去搜索引擎找，基本都是牛头不对马嘴的回答。

最后还要去找官方文档看资料，不断的尝试。

** 前端小结 **

到这里，基本前端的事情就搞完了

1、识别：识别流程，现在都是走前端模拟的流程

2、食物：这里目前应该是很全的功能了，读取本地的 json 数据，有分类标识，还有图片的展示

3、我的：个人中心有尿酸的记录，有曲线图，还有基本的体重指数记录。

== 2、后端 ==

步骤零：阿里云大模型准备

背景：需要使用大模型来识别图片，然后返回嘌呤的含量，所以我们需要选择一个大模型的 API 来对接。

这里选择阿里的 qwen 来对接。

登录百炼平台：bailian.console.aliyun.com/

访问API-kEY 的地址：bailian.console.aliyun.com/?tab=model#…

创建一个 API-kEY，并保存好你的 key 信息。

步骤一：创建必要的配置

先访问找到通义千问 API 的文档的地方

这里我们采用直接复制上面页面的内容，保存到项目下的 docs 目录在的 qwen.md 里面

这里顺便把之前的 prd.md 文档从之前的项目目录拷贝过来了

步骤二：创建后端服务模板代码

直接使用下面的提示词，就可以创建一个后端的服务

这里要想为什么要创建后端服务，

一方面主要是需要调用大模型的 API，用到一些KEY 信息，这些是需要保密的，不能在前端被人看到了。

另外一方面，后面如果需要一些登录注册服务，还有食物数据都是需要后端来存储，提供给前端。

请在项目的根目录下创建 backend 目录，在这个 backend 目录下创建一个基于fastify框架的server，保证服务没有问题

同样的不知道什么fastify技术的，找大模型聊就行。

步骤三：API 文档+后端业务服务开发

重点来了，这里我就写到一个提示词里面，让他完成的

帮我接入图像理解能力，参考 @qwen.md  :

1. 现在在 @/backend  的后端服务器环境中调用ai能力，

2. 使用 .env 文件保存API_KEY，并使用环境变量中的DASHSCOPE_API_KEY.并且.env文件不能提交到git上，提交到git的可以用.env.example文件作为举例供供用户参考

3. 要求使用openai的sdk，并且前端上传base64的图片

4. 后端返回值要求返回json格式，返回的数据能够渲染识别结果中的字段，包括：食物/嘌呤值/是否适合高尿酸患者/食用建议/营养成分估算

5. 在 @/backend  目录下创建 api.md 文件，记录后端接口文档

这里我把 api.md 高亮了，这个是关键，是后面前后端联调的关键，不然 Cursor 是不知道请求字段和响应字段该怎么对接的，到时候数据不对，再来调试就比较麻烦。

所以接口文档务必保证 100% 准确，后面的调试就会很容易。

截图如下：

很贴心的完成功能后，最后帮我们些了 api.md 接口文档，还进行了一些列测试，保证功能是完整的。

这里放出来，Cursor 看是怎么帮我们写这个代码的

• 帮我们组装好了提示词
• 根据 qwen.md 的接口文档，组装请求数据和返回数据，字段都我们的项目符合

== 3、联调 ==

其实这里的联调很简单了。就是一句话的事情。

因为之前的前端的拍照图片都是走的模拟的接口，没有真正的调用后端的接口，所以需要换成真正的后端接口。

刚好前面的后端服务写好了 api.md 接口文档

前端修改点，前端目录是当前根目录

1. 也需要加入请求后端的 url 的环境变量，本地调试就默认使用 localhost，线上发布的时候设置环境变量后，前端服务从环境变量获取 url 然后请求到对应的后端服务

2. 食物识别的接口参考 @api.md 文档，请修改需要适配的地方，食物识别的代码在 @identify-page.tsx代码中。

这里要说的是：前面的 api.md 接口文档些的非常准备，这一步的前端请求后端接口，基本都是一遍过，所以后端提供的接口文档一定要准确，这样前端就可以很准确的调用接口传参和取返回值了。

== 4、测试 ==

其实到这里，基本测试的工作也就完成了。

基本的流程到现在都是跑通的。

不过还是需要多实际测试，这里下面的例子就是，我上传了「黄瓜」的照片，结果没识别，按理说不应该呀。

这里上了点专业的技巧，通过 F12 的调试窗口，看下接口返回的数据。

按照以往经验来说，估计是字段对应不上

所以我就直接和 Cursor 说，可能是字段对应不上。请帮我修复。

测试黄光的食物的时候，后台接口返回的数据是 "purine_level": "low(低嘌呤<50mg)",但是 @getPurineLevel() @getPurineLevelText 没有识别到，请帮我修复

最后从前后端都给我做了修复，字段的匹配对应上了。

最后的总结如下：

== 4、总结 ==

其实到这里基本功能就完成了。

1. 前端使用 bolt 工具等生成，快速生成漂亮的 UI 界面和基本完整的前端功能
   1. bolt工具调整样式、UI 等细节（擅长的）
   2. Cursor 精修前端小细节
2. Cursor 开发完整后端功能
   1. 写清楚需求，如果知道具体技术栈是最好的
   2. 写好接口文档，最好人工校验下
3. 前后端联调
   1. @使用后端的接口文档，最好写改动的接口的地方，前后精准对接
   2. 学会使用浏览器的 F12 调试窗口，特备是接口的请求参数和响应值的学习。

就目前来看，如果你是零基础，那么基本的术语不明白的话，有些问题可能会不好解决

1. 寻求 AI 的帮助，遇事不决问 AI，它可以帮你搞定
2. 寻求懂行的人来帮助你，比如环境的事情、按照的事情有时候一句话就可以给你讲明白的。

第四阶段：部署+上线

部署这一块其实对普通人门槛还比较高的，问题比较多。

• 域名问题
• 服务器问题
• 如何部署，如何配置

这里我们采用云厂商的部署服务，简化配置文件和部署的流程

但是域名申请还是需要提前准备好的，不过现在我们用的这个云服务暂时现在没有的域名，也有临时域名可以先用。

到这里，其实如果你只是本地看的话，就已经可以了，那么这里我们教一个上线部署的步骤，傻瓜式的，不需要各种配置环境。

我相信大家如果搞独立开发的 Vercel 肯定都熟悉了。这里也介绍下类似的工具，railway.com/，他不仅可以部署前端静态页面，还有后端服务，PostgreSQL、Redis 等数据库也支持一键部署。

1、项目的配置文件

railway 部署是需要一些配置文件的，当然我们可以让 Cursor 帮我们搞定。

直接告诉 Cursor 我们需要部署到 railway 上，看还需要什么工作可以做的。

后端

@/backend 这个后端项目现在需要在railway上去部署，请帮我看看需要哪些部署配置

前端

也是一样，让 Cursor 给我们生成部署的配置文件

当前目录是前端目录，也需要添加railway的部署相关配置

Cursor 会帮我们创建需要的配置文件，那么就可以进入下一步部署了。

2、提交代码

记得要提交代码，在 Cursor 的页面添加提交代码，推送代码到 Github 上，这样 railway 才可以拉取到代码。

提交代码的时候，可以使用 AI 生成提交信息，也可以自己填写信息

记得还要同步更改

3、railway 页面操作

现在会有赠送的额度，并且免费就用也有 512M 的内存机器使用。对于当前下的足够了。

注册登录后，选择 Dashboard 后，点击添加，就可以看到如下的页面，

添加 Github 项目，后续就会授权等操作，继续完成就可以。

下一步就一个你的项目

然后就会跳转到工作区间，会自动部署。

记得不要忘记环境变量

就是在「Variables」标签下，直接添加变量就行。

添加完记得需要重新部署下。

后端环境变量

前端环境变量

当然不过你有错误，可以把 log 里面的错误复制，粘贴到 Cursor 里面，让他解决，我之前部署的项目有个就有问题，通过这个方式，帮我解决了。

4、大功告成

部署完成后怎么访问了，切换到 settings 页面，有个 Networking 部分，可以生成一个 railway 自带的域名，用这个域名就可以访问了，如果你有自己的域名还可以添加一个自己的域名，添加完以后就可以自己访问了。

5、总结

很开心，跟我走到了这里，基本到这里，算是完成一大步，也就是我们的 MVP 完成了。

现在我们再来总结下前面整体的步骤

1、前端我们通过 bolt 来生成代码，加速前端的设计，让 bolt 这种工具提供我们更多的能力，发挥他的有点

2、后端使用 Cursor 来开发，纯业务逻辑通过提示词还是很好的达到效果。

3、前后端联调，写好接口文档，让 Cursor 必须阅读接口文档，前端再写接口

4、部署配置文件也可以通过 Cursor 来搞定，无所不能

5、中间有任何问题，有任何不懂的都可以找 Cursor 使用 ask 模式搞定。

第五阶段：运营维护+推广

分了「优化」「安全」「推广」三个部分来说这个事情。

• 其实到这里是后续的常态，你不要不断的推广你的产品，去增加访问量。
• 另外就是不断的迭代优化你的功能，提升用户体验，加强本身产品的竞争力。
• 最后、最后、最后就是安全，这个不要忘记了，后面我也会加强后，然后去推广下我的产品，安全很重要，提前做好可以更保护你的服务器和大模型的 API-KEY。

优化

这个是上线了后发现的，就是使用手机拍的照片，一般都比较大，这张图片请求后端的时候，数据量比较大，接口超时了。

那么解决办法：

1、增加后端的请求体的大小

2、压缩图片，然后再请求后端接口

安全

其实这里还是蛮重要的，因为你的服务，还有你的大模型的 KEY，如果服务器被攻击是要付出代价的，最重要的是花掉你的钱呀。

所以这块我还在做，目前想的就是让 Cursor 正题 revivew 代码，看下有什么安全隐患，给我一些解决方案。

推广

如果你的产品上线后，需要写文章、发小红书去推广，首先从你的种子用户开始，你的微信群，你的朋友圈都是可以的。

后面积极听取用户心声，持续解决痛点需求，满足用户的痛点，产品就会越来越好。

第六阶段：成本计算

时间成本

从开始到结束上线，手机使用正式的域名访问，大概就是整一天的时间，从早上开始，忙到晚上我就开启了测试，晚上搞完还去外面遛弯了一大圈回来的。

我们就算：10 小时

人力成本

哈哈哈哈，很清楚，就我一个人

软件成本

bolt：20 元优惠包月（海鲜市场），就算正式渠道，20 刀一个月，当然有免费额度，调整不多，基本够用

Cursor：150教育优惠（海鲜市场），就算正式渠道，20 刀一个月，足足够用

域名：32首年

我们就算满的，折算成人民币，也就是 300 块。

想想 300 块一天你就做出来一个系统（前后端+部署），何况软件都是包月的，一个月你可以产出很多东西，不止这个一个系统。

对比公司开发，一个月的成本前后端两个人，毕业生也的上万了吧，何况还是 5 年经验开发的（市面上的抢手货）。

总结

能走到这里的，我希望你给自己一个掌声，确实不容易。

我希望你也有可以通过编程来实现自己的想法和创意。

虽然目前编程对于零基础的人来说确实可能会有些吃劲，但是你我差距也不大，我现在遇到了很多在搞 AI 编程的都是程序员，有房地产行业的、也有产品的。

遇事不决，问 AI

我希望你可以记住这句话，自己的创意+基本问题找 AI，你基本就可以解决 99% 的问题，剩下的 1% 你基本遇不到，遇到了，也不要慌，身边这么多牛人总会有人知道。

作者：志辉AI编程
来源：juejin.cn/post/7517496354244067339

前言

前几天和前同事闲时聚餐，约了两个月的小聚终于达成了，程序员行业聚少离多，所幸大家的发量还坚挺着。
期间不可避免地聊到了自己的公司、行业状况以及对未来的看法，几杯老酒之后，大家畅所欲言，其中一位老哥侃起了他的职业生涯，既坎坷又无奈，饭后想起来挺有代表性的，征得他同意故记录在此。
以下是老哥的历程。

程序员的前半生

我今年35岁，有房有贷有妻女有老父母。

出生在90年代的农村，从小中规中矩，不惹事不喧哗不突出，三好学生没有我，德智体美没有全面发展。学习也算努力，不算小题做题家，因为只考了个本科。

大学学费全靠助学带款，勤工俭学补贴日用，埋头苦干成绩也只在年级中等偏下水平。有些同学早早就定下了大学的目标，比如考研、比如出国、比如考公，到了大三的时候大家基本都有了自己的目标。而我的目标就是尽早工作，争取早日还完带款，因此早早就开始准备找工作。
也许是上天眷顾，不知道怎么就被华为看重了（那会华为还没现在的如日中天，彼时是BAT的天下），稀里糊涂的接受了offer，没想到却是改变了后面十年的决定。

2013年，深圳的夏天阳光明媚，热气扑鼻，提着一个简单的箱子进入了坂田基地。
刚开始，工作上的一切都很新鲜，每个人都在忙碌，虽然不知道他们在忙什么，但感觉很高级的样子。同期入职的同事都比较厉害，很快就适应了工作，而自己还是没完全应对工作内容，于是下班之后继续留在公司学习，顺便蹭饭。
就这样，很快就一年过去了，自己也慢慢熟悉了工作节奏，但是加班也越来越多了。对于自己来说，为了过节点，6点是晚饭时间，9点是下班时间，12点正式下班。
平凡的日子没什么值得留恋，过一天、一个月、一年、四年都没什么两样，四年里学习到了不少的知识，也数了很多次深圳凌晨的路灯数。

作为深漂，没有遇到深圳爱情故事，也对高昂的房价绝望，于是决定回到二线城市，成为一名蓉漂。 2017年，还是和四年前一样的行李箱，出现在了老家的省会城市，只是那时的我没有了助学打款，怀里也攒下了一些血汗钱。
那时互联网行业发展还是如火如荼，前端的需求量也很大，也得益于华为公司发展越来越好，自己的华为经历很快就拿到了几个offer，选了一家初创公司，幻想着能有一番成就。

2018年底，眼看着房价越长越高，某链中介不断地灌输再不买明天就是另一个价了，错过这个村就没这个店了，也许是想有个家，也许是想着父母能到省会里一起住，拿出自己做牛马几年的积蓄加上父母一辈子辛苦攒的小十万的养老钱购买了城区里的新房，那会儿的价格已经比前两年涨了一倍多，妥妥的高位站岗，不过想着自己是刚需也不会卖，因此咬咬牙掏出了全部的积蓄怒而背上了三十年的房贷。

房子的事暂时落定了，全身心的投入到工作中，没想到老板只想骗投资人的钱，产品没弄好投资人不愿跟进了，坚持了三年，期间各种断臂求生，最终还是落了个司破人走的境地。

2020年，30岁的我第一次被动失业了，幸运的是也找到了另一半。为了尽可能节省支出，房子装修的事我们都是亲力亲为，最后花了十多万终于将房子装好了，虽然很简单但毕竟是自己在大城市里的第一套房子，那一刻，感觉十年的付出都是值得的。
背着沉重的房贷，期望能找到一份薪资稍微过得去的工作，于是在简历上优势那行写了：“可加班”。依稀记得有些HR对我进行了灵魂拷问：结婚了吗？有小孩了吗？你都30岁了还能加班吗？。我斩钉截铁地说：只要公司有需要，我定会全力以赴！

2022年，我们的孩子出世了，队友辞去了工作全心全意带小孩，而我更加努力了，毕竟有了四脚吞金兽，不得不肝。
虽然工作很努力，但成果一般，不是公司的技术担当，也不会是技术洼地。

2023年的某一天，和之前的364天一样的平淡，在座位上解Bug的我突然感觉到一阵心悸，呼吸不畅，实在不行了呼唤同事叫了120，去医院一套检查下来没发现什么大问题。医生询问是不是工作压力太大，平时加班很多？我说还好，平时也就加班到9点。医生笑了笑说你这种年轻人我见多了，都是压力大的毛病，平时工作不要久坐盯着屏幕多站起来走走。他让我回家多休息，回去后观察了几天还是偶尔会有心悸，再去了另一个医院进行检查，也是没有明确的诊断结果，只是说可能是这个问题，又可能是另一个问题。
过了1个月后，身体上的问题不见好转，我辞去了工作。

2023年末，找了一家小公司，也就是我现在的公司，工资没有涨，仔细算起来还变相下降了。
还是做的业务需求，也没有领导什么人，管好自己就行，直属上级还是个工作几年的小伙。这家公司主要的特点是不加班，技术难度不高，能做多少就是多少，前提是要报风险，领导也不会强迫加班。

就这样到了2024，神奇的是我已经很久没有心悸的感觉了，不知道是不加班还是心态转变的原因。 家里的小朋友也长大了，会说话了。我现在每天下班最温馨的的是她开着门期待我回家的那一刻，她的期盼的眼神就是我回家的动力。

公司在2024年也裁了不少人，领导也找我谈过问问我的想法，我说：我还是能胜任这份工作的。领导说：公司觉得你年级大了一些，工资虽然不是最高，但不太符合行情，你懂的。我说：我懂，可以接受适当的降薪。 就这样，我挺过了2024，然而过了一周领导走了。

2025年，我35周岁了。 现在的我已经彻底接受自己的平庸的事实了。在学生时代，从来都不出色，也不会垫底，就是那类最容易被忽略的人。在工作时代，不是技术大牛，也不是完全的水货，就是普普通通的程序员。

如果说上半生吃到了什么红利，只能说入坑了计算机这行业，技术给我带了收入，有了糊口的基础。没进股市，却被房价狠狠割了一道。

35岁的我，没有彻底躺平摆烂，也没有足够奋发进取。
35岁的我，有着24年的房贷，还好61岁的时候我还在工作，应该还能还房贷。
35岁的我，不吃海鲜不喝酒，尿酸500+。
35岁的我，人体工学椅也挽救不了腰椎间盘突出。
35岁的我，头发依然浓密，只是白发越来越多。
35岁的我，已经不打游戏，只是会看这各种小说聊以慰藉。
35岁的我，两点一线，每天挤着地铁，看众生百态。
35岁的我，早睡早起，放空自己。
35岁的我，暂时还没有领取毕业大礼包，希望今年还能苟过。
35岁的我，希望经济能够好起来，让如我一般平凡的人能够有活下去的勇气。

诸君，下一年再会~祝你平安喜乐，万事顺遂！

太极分两仪，有程序员也有程序媛：30岁的程序媛，升值加薪与我无缘

作者：小鱼人爱编程
来源：juejin.cn/post/7457567782470385705

新闻

昨日苹果 App Store 前端源码泄露，因其生产环境忘记关闭 Sourcemap，被用户下载了源码，上传到 Github。

仓库地址：github.com/rxliuli/app…

目前已经 Fork 和 Star 超 5k：

如果你想要第一时间知道前端资讯，欢迎关注公众号：冴羽

用户如何抓取的源码？

用户 rxliuli 使用 Chrome 插件 Save All Resources 将代码下载了下来。

插件地址为：chromewebstore.google.com/detail/save…

下次你也可以打包下载源码了~

如何看待源码泄露？

其实前端源码泄露对业务本身并没有什么影响，因为前端代码无论是否压缩还是混淆，最终都需传输到浏览器才能运行，本身就具有 “暴露” 属性，SourceMap 只是让代码更易读，更容易调试。

尽管如此，依然不建议在生产环境开启 SourceMap，对普通用户无益，且存在轻微性能开销和源代码暴露的安全风险。

我大致看了下代码，并没有什么密钥之类的信息，所以干点坏事之类的就不用想了。真正有价值的核心代码比如推荐逻辑还是在服务端。

代码使用 Svelte？

我万万没想到，项目使用的是 Svelte。

Svelte 我自然是很熟的，毕竟我翻译过 Svelte 官网：svelte.yayujs.com/

还写了一本掘金小册《Svelte 开发指南》：s.juejin.cn/ds/QNzfZ4eq…

想一想，使用 Svelte 也在情理之中。

因为 Svelte 就非常适合处理这种页面相对简单、业务逻辑并不复杂的页面。

在实现上 ，与其说 Svelte 是框架，不如说 Svelte 是一个编译器。 它会在构建时就会将代码编译为高效的 JavaScript 代码，因此能够实现高性能的 Web 应用。

Svelte 的核心优势在于：

• 轻量级：核心库只有 3 KB，非常适合开发轻量级项目
• 高性能：构建时优化，而且不使用虚拟 DOM，减少了内存占用和开销，性能更高
• 易上手：学习曲线小，入门门槛低，语法简洁易懂

简而言之，Svelte 非常适合构建轻量级 Web 项目，也是本人做个人项目的首选技术栈。

以后大家如果要做相对简单的项目，又有性能上的追求（比如 KPI），那就可以考虑使用 Svelte。

用它作为示例学 Svelte ？

我看了下代码，项目代码还是 Svelte 4，而 Svelte 已经到 5 了，Svelte 4 和 5 不论是底层架构还是基础语法都发生了很大的变化，其变化的剧烈程度类似于 Next.js 12 升 Next.js 13，所以想通过这个项目学习 Svelte 就不用想了，都是些过时的语法了，不如直接学 Svelte 5。

作者：冴羽
来源：juejin.cn/post/7569057572436607014

前言

前些天有位小伙伴和我吐槽他在外包工作的经历，语气颇为激动又带着深深的无奈。

本篇以他的视角，进入他的世界，看看这一段短暂而平凡的经历。

1. 上岸折戟尘沙

本人男，安徽马鞍山人士，21年毕业于江苏某末流211，在校期间转码。
上网课期间就向往大城市，于是毕业后去了深圳，找到了一家中等IT公司（人数500+）搬砖，住着宝安城中村，来往繁华南山区。
待了三年多，自知买房变深户无望，没有归属感，感觉自己也没那么热爱技术，于是乎想回老家考公务员，希望待在宇宙的尽头。
24年末，匆忙备考，平时工作忙里偷闲刷题，不出所料，笔试卒，梦碎。

2. 误入外包

复盘了备考过程，觉得工作占用时间过多，想要找一份轻松点且离家近的工作，刚好公司也有大礼包的指标，于是主动申请，辞别深圳，前往徽京。
Boss上南京的软件大部分是外包（果然是外包之都），前几年外包还很活跃，这些年外包都沉寂了不少，找了好几个月，断断续续有几个邀约，最后实在没得选了，想着反正就过渡一下挣点钱不寒碜，接受了外包，作为WX服务某为。薪资比在深圳降了一些，在接受的范围内。

想着至少苟着等待下一次考公，因此前期做项目比较认真，遇到问题追根究底，为解决问题也主动加班加点，同为WX的同事都笑话我说比自有员工还卷，我却付之一笑。

直到我经历了几件事，正所谓人教人教不会，事教人一教就会。

3. 我在外包的二三事

有一次，我提出了自有员工设计方案的衍生出的一个问题，并提出拉个会讨论一下，他并没有当场答应，而是回复说：我们内部看看。
而后某天我突然被邀请进入会议，聊了几句，意犹未尽之际，突然就被踢出会议...开始还以为是某位同事误触按钮，然后再申请入会也没响应。
后来我才知道，他们内部商量核心方案，因为权限管控问题，我不能参会。
这是我第一次体会到WX和自有员工身份上的隔阂。

还有一次和自有员工一起吃饭的时候，他不小心说漏嘴了他的公积金，我默默推算了一下他的工资至少比我高了50%，而他的毕业院校、工作经验和我差不多，瞬间不平衡了。

还有诸如其它的团建、夜宵、办公权限、工牌等无一不是明示着你是外包员工，要在外包的规则内行事。 至于转正的事，头上还有OD呢，OD转正的几率都很低，好几座大山要爬呢，别想了。

3. 反求诸己

以前网上看到很多吐槽外包的帖子，还总觉得言过其实，亲身经历了才刻骨铭心。
我现在已经摆正了心态，既来之则安之。正视自己WX的身份，给多少钱干多少活，给多少权利就承担多少义务。
不攀比，不讨好，不较真，不内耗，不加班。
另外每次当面讨论的时候，我都会把工牌给露出来，潜台词就是：快看，我就是个外包，别为难我😔~

另外我现在比较担心的是：

万一我考公还是失败，继续找工作的话，这段外包经历会不会是我简历的污点😢

当然这可能是我个人感受，其它外包的体验我不知道，也不想再去体验了。
对，这辈子和下辈子都不想了。 附南京外包之光，想去或者不想去的伙伴可以留意一下：

作者：小鱼人爱编程
来源：juejin.cn/post/7511582195447824438

前言

Hi 大家🫶 ，我是大雄 ，好久不见。最近空余时间，在独立开发一些小产品，也在探索一些独立开发的最佳实践。 今天要分享的是：如何用 Claude Code 生成 顶级【靓丽】UI 🌝

所有的源码都已开源： Github ， 并已部署到vercel： 在线预览。

众所周知，AI 画的UI， 味太浓了哈哈。今天我们来解决这个痛点！！

以往我的处理

以往生成UI我会怎么做呢？

• 跟 v0 结对chat，出一版原型，再基于原型样式去迭代
• 或者是使用 stritch 设计一个初版的UI，再进行迭代

- https://v0.app/

- https://stitch.withgoogle.com/

下方是其中一个产品，hi-offer 多次迭代后大致的UI 效果，看起来还可以，只是还没有到很靓丽的程度🫥

那可能有小伙伴会有同样的疑问：

*   我没有UI 设计经验呀，我要怎么快速实现 **靓丽程度** 的 UI 呢？

*   答案是~~抄~~，No，是模仿学习哈哈

给大家一个样例，MotherDucker 的首页。 给大家10秒钟，思索一下。如果你想复刻这种UI风格，用在自己的产品上，你会怎么做？

可能有下面的一些思考

-   截图 UI 给 cluade code 分析

-   截图丢给stitch + 对话迭代

众所周知，OCR 过程，出现很大UI 信息缺失，比如：具体配色数值、阴影、间距、字体等，于是你会发现，最终AI完成的效果可能都没有60% 。

于是核心思路是：解决样式信息大量丢失的问题，通过减少信息代差，让AI coding 完成的UI 风格有不错的效果

好消息是，最近实践了一个工作流，很好地解决了这个问题，随我来，我们只需要核心的五个步骤：

最终成品效果如下，全程vibe coding，详见：4-quadrant-to-do.vercel.app/

• 如果你感觉效果还不错，愉快开始本文之旅吧~~
• 如果你认为效果比较牵强，那么阅读本文之后，你一定可以迭代出更好的UI。

话不多说，我们开始发车 ~~

步骤一：Copy样式上下文，生成初版的html

你需要提供下方的的上下文信息给CC，让他帮忙构建一个html 页面

-  参考的 web UI 截图【长图或多张全屏图】

-  copy web 的 html css 样式信息

-  prompt

截图

prompt

Help me rebuild exact same ui design in signle html as xxx.html, above is extracted css:

style info

右键检查，选择html、body 元素，copy style 信息

*   html css style

*   body css style

例如：

    -webkit-locale: "en";

    scroll-margin-top: var(--eyebrow-desktop);

    animation-duration: 0.0001s !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0s !important;

    caret-color: transparent !important;

    --tw-border-spacing-x: 0;

    --tw-border-spacing-y: 0;

    --tw-translate-x: 0;

    --tw-translate-y: 0;

    --tw-rotate: 0;

    --tw-skew-x: 0;

    --tw-skew-y: 0;

    --tw-scale-x: 1;

    --tw-scale-y: 1;

    --tw-pan-x: ;

    --tw-pan-y: ;

    --tw-pinch-zoom: ;

    --tw-scroll-snap-strictness: proximity;

    --tw-gradient-from-position: ;

    --tw-gradient-via-position: ;

    --tw-gradient-to-position: ;

    --tw-ordinal: ;

    --tw-slashed-zero: ;

    --tw-numeric-figure: ;

    --tw-numeric-spacing: ;

    --tw-numeric-fraction: ;

    --tw-ring-inset: ;

    --tw-ring-offset-width: 0px;

    --tw-ring-offset-color: #fff;

    --tw-ring-color: rgb(59 130 246 / 0.5);

    --tw-ring-offset-shadow: 0 0 #0000;

    --tw-ring-shadow: 0 0 #0000;

    --tw-shadow: 0 0 #0000;

    --tw-shadow-colored: 0 0 #0000;

    --tw-blur: ;

    --tw-brightness: ;

    --tw-contrast: ;

    --tw-grayscale: ;

    --tw-hue-rotate: ;

    --tw-invert: ;

    --tw-saturate: ;

    --tw-sepia: ;

    --tw-drop-shadow: ;

    --tw-backdrop-blur: ;

    --tw-backdrop-brightness: ;

    --tw-backdrop-contrast: ;

    --tw-backdrop-grayscale: ;

    --tw-backdrop-hue-rotate: ;

    --tw-backdrop-invert: ;

    --tw-backdrop-opacity: ;

    --tw-backdrop-saturate: ;

    --tw-backdrop-sepia: ;

    --tw-contain-size: ;

    --tw-contain-layout: ;

    --tw-contain-paint: ;

    --tw-contain-style: ;

    box-sizing: border-box;

    border: 0px;

    font-size: 100%;

    vertical-align: baseline;

    text-decoration: none;

    scroll-padding-top: var(--header-desktop);

    scroll-behavior: auto;

    height: 100%;

    margin: 0;

    padding: 0;

    line-height: 1.5;

    -webkit-text-size-adjust: 100%;

    tab-size: 4;

    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    font-feature-settings: normal;

    font-variation-settings: normal;

    -webkit-tap-highlight-color: transparent;

    --swiper-theme-color: #007aff;

    --toastify-toast-min-height: fit-content;

    --toastify-toast-width: fit-content;

    --header-mobile: 70px;

    --header-desktop: 90px;

    --eyebrow-mobile: 70px;

    --eyebrow-desktop: 55px;