别着急，坐和放宽
摘要： 这半个月一直在研究Figma-to-Code的技术方案，关注主流的D2C（Design to Code）方法。市面上多是基于Figma插件，通过API获取设计信息，转换为DSL，再生成多端代码。也研究了视觉识别算法的应用，但在还原度和一致性上不够成熟。总结出D2C的三步核心逻辑：解析设计稿，转换为DSL，生成端代码。当前技术挑战在于设计稿的还原度，尤其是复杂交互、自适应布局等。通过Dify、MCP、LLM组合，我们实现了从设计稿到组件的端到端链路。技术限制仍在解析复杂结构、视觉细节上。对比使用了Claude 4和Gemini 2.5 Pro模型，发现其在准确性和结构还原上表现优秀。D2C常见问题包括：无用图层提高解析成本、复杂图层导出难度大、缺乏响应式布局信息。近期参与了内部会议，得知Figma官方将发布更优的MCP方案，可能替代现有工作。但这段经历仍充实有收获，加深了对设计到代码转换技术的理解。
序言 这半个月一直在专注于 Figma-to-Code 的相关工作，也在不断思考和调研已有的 D2C（Design to Code）方案。 目前市面上主流的实现方式，大多是基于 Figma 插件，通过插件调用 Figma 的 Open API 获取设计稿的结构和样式信息，再转换成对应的 DSL（中间描述语言），最终通过渲染引擎生成各端代码。也有一些方案尝试通过设计稿的截图，结合视觉识别算法实现 0 到 1 的生成，但这种方式在还原度和一致性方面存在明显短板，难以满足生产需求。 这几天阅读了大量相关资料，包括公司内部方案，也参考了外部团队的一些实践。其中印象较深的...
摘要： 人工智能在近年来迎来大爆发，从GPT3到国产大模型DeepSeek和Claude4.0的涌现，引发了全民AI时代的到来。AI工具如cursor和Claude的配合提高了程序员的工作效率，但AI仍存在局限性，如内容精确性、上下文限制和沟通理解。D2C（Design To Code）作为设计稿转代码的趋势，带来了前端工程师更专注于业务逻辑的可能性，但也面临着业务逻辑复杂度和理解的挑战。尽管AI在0到1的事情做得很好，但在复杂项目和业务逻辑方面仍有待发展，需要积极拥抱AI并深化合作。
人工智能爆发 其实对于大多数人来说人工智能在GPT出来之前是没有那么强的感知力的，也可以说是一个好的产品推动了整个市场的发展，还记得20年GPT3问世时候出圈般的热度，当然国内当时的热度可能比较小，也仅限于科技圈内的人使用比较多。 作为一个前沿科技爱好者，我对于新技术一直是保持接受态度的，毕竟这也是互联网这一行的特点，终生学习嘛，一直到后来到GPT4，Gemini，Claude等等国际大模型技术的涌现，似乎人工智能时代即将迎来大爆发，但国内似乎一直没有什么声响，包括腾讯，阿里，百度等一众互联网大厂在内，其实布局AI领域是很早的，特别是百度，从早在2010年时候就开始投入人工智...
摘要： 这篇文章描述了作者从一般学历背景中逐步走向职业成功的历程，特别是在面试和实习中遇到的挑战。作者经历了九次腾讯面试和六次字节跳动面试，最终通过努力获得了多家公司实习offer，并加入腾讯实习。作者强调从零起步时的困难和没有背景情况下的挑战，并感激曾帮助过他的贵人。通过分享个人经历，如在携程和哔哩哔哩的实习，以及如何通过努力写项目来提高能力和获得机会，作者展示了坚持和努力的重要性。同时，在新的公司环境中，作者遇到了一个好的导师，继续追求职业发展。文章结尾强调自信和自我认可的重要性。
前言 如果你此刻正处在人生迷雾中，那希望这篇文章，能在某个瞬间，为你点亮一丝光。 在入职腾讯之前，我总共面试了腾讯九次、字节跳动六次。说实话，我也曾怀疑过自己是否真的行。但现实就是这样，我们永远无法预知幸运会在哪天降临，唯一能做的，是在它来临之前，做好自己能做的。 所以，我能告诉你三年前的我和此时的你一样郁闷吗？ 暑期实习乱斗 今年的暑期实习启动得特别早，像腾讯的提前批在二月份就开始了。我算是“有幸”体验了一把被提前批面试官“拷打”的滋味——分别来自WXG和IEG，都是腾讯的核心业务线...
1. 前端框架原理 现代前端框架几乎都是基于描述自变量和 UI* *视图之间的关系建立的，即“数据驱动视图” $ UI=f(state) $ 前端经过长时间的发展，对于 *UI *的描述语言逐渐衍生出两种解决方案 JSX（代表框架:React）:类 XML 语法的 ES 的语法糖 模版语法（代表框架:Vue，Svelte） 2.前端框架分类的依据 对于公式 *UI = f(state) *<font styl...
使用了 import 语法，这是 ES规范，而非 Node.js 的 CommonJS规范。 我们使用了 React 的 JSX 语法，JavaScript 并不认识，需要用 Babel 转译成这样。 修改 package.json: "scripts": { "start": "webpack --config webpack.server.js && node ./build/server.bundle.js" } 此时运行 node server.js 可以成功渲染，但是只用 `re...
CSR 实现SSR之前先实现一遍CSR渲染过程 react-csr |- app.js // 测试组件 |- client.js // react生成出root节点 |- index.html // 入口文件 |- package.json // npm init 自动生成 |- webpack.client.js // 客户端打包配置 安装依赖 npm install webpack webpack-cli babel-loader @...
1.目前的形式 首先不管互联网如何颓势，计算机专业依然是最热门的专业之一，随着高考报考计算机专业的人越来越多，每年计算机专业应届生高达几十万人，但是市场却不能提供这么多的就业岗位，这也就导致了优胜劣汰是必然的，其实说到这也还好，毕竟哪一个行业又不是优胜劣汰呢？ 但是，随着2022年ChatGPT的火爆彻底将人工智能的发展推向高潮，想必很多同学都用过这款AI工具来生成代码，其效率不言而喻，我们不难预见也许是五年后，也许是十年后，随着AI技术的迭代，底层程序员将被彻底替代。这绝不是危言耸听，大部分程序员的工作都只是重复写业务代码，这些对于AI来说只要训练到位，是完全可以替...
📖 面试问题 1. 浏览器从输入到显示页面的全过程 用户在浏览器地址栏输入 URL，浏览器通过 DNS 解析获取 IP 地址。 浏览器与服务器建立 TCP 连接，发起 HTTP 请求。 服务器返回 HTML 文件，浏览器解析 HTML、CSS、JavaScript，构建 DOM 树、CSSOM 树，合并成 Render 树。 浏览器渲染页面，进行布局、绘制，最后显示页面。 2. TCP 三次握手过程 第一次握手**：客户端向服务器发送 SYN 包，表示请求建立连接。 第二次握手**：服务器收到请求后，发送 SYN-ACK 包，表示同意...
📖 八股 1. 个人介绍 简要介绍个人背景、教育经历、实习经历以及相关的技术栈。 2. 讲一下 History 路由和 Hash 路由 History 路由**：基于 HTML5 的 history.pushState 和 history.replaceState，支持更灵活的 URL 路由控制，且没有 # 号，URL 更简洁。 Hash 路由**：基于 URL 中的 # 符号，浏览器通过监听 hashchange 事件来进行路由跳转，兼容性好但 URL 有 #，不够美观。 3. 讲一下 TS？TS 和 JS 的...
📚 八股 1. 自我介绍 简要介绍了个人的背景、技术栈、项目经历。 2. 移动端做过哪些优化？ 优化了应用的启动速度、内存使用和性能问题，使用了懒加载、图片懒加载、按需加载等技术来减少页面渲染时间。 针对不同设备做了适配优化，使用了响应式设计和媒体查询。 3. 隐藏一个元素有哪些方法？有什么不同？ display: none：元素完全从文档流中移除，不占据空间。 visibility: hidden：元素仍占据空间，只是不可见。 opacity: 0：元素不可见，但仍占据空间并可交互。 `position: abso...