前端vibe coding实践
关注
分享
扫一扫
文章平均质量分 76
AI编程，通过vibe coding实现一个开源组件库项目的全面记录笔记。
爱编程的蓉儿
Code is cheap, show me your talk.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
AI前端，根据草图生成UI UE 和前端代码
三个图片分别是草图，和用来参考的，截的其他应用的图。” ，slogen：守脑如玉，执笔如刀，欢迎关注。目前这个对于不会figma的前端是最好用的工具了。1、UI可以像在figma里一样编辑。上面讲了方案，这篇讲具体实施。对了，我还有公众号“原创 2025-12-04 16:00:48 · 516 阅读 · 0 评论 -
2025年前端技术趋势
AI技术成为主导，GitHub Copilot等工具使用率大幅提升；React依旧领先，配合TypeScript和Next.js形成主流组合；Vite等新构建工具正在挑战Webpack；WebAssembly带来性能突破；微前端和低代码平台也日益成熟。原创 2025-11-17 10:02:06 · 322 阅读 · 0 评论 -
告别UI漂移：前端AI生成UI的稳定与一致性方案
它只能通过你提供的文本描述来“想象”这个UI，就像你给一个盲人描述一幅画，他能理解每个元素的构成，甚至能想象出它们的相对位置，但很难感受到整体的和谐与美感。如果你没有给出足够详细和强制性的UI约束，模型会倾向于选择它认为“最简单”、“最通用”或者在训练数据中出现频率最高的逻辑实现，而不会花额外的“精力”去推敲其视觉效果。通过 CodeBuddy 与 Figma 的完美结合，我们彻底告别了AI生成UI的“漂移”和“丑陋”，实现了像素级的还原与高度的稳定一致性。这不仅仅是工具的升级，更是前端开发理念的一次。原创 2025-10-19 16:22:57 · 1200 阅读 · 0 评论 -
Style Dictionary 前端交互设计规范落地实践
摘要： Style Dictionary 通过设计令牌和组件管理，实现设计与开发的一致性，并自动化设计规范落地。核心功能包括全平台样式统一、集中修改同步更新、提升开发效率、支持主题切换等。项目已开源（GitHub/Gitee），欢迎参与。针对主题切换问题，建议采用 CSS 变量 + data-theme 方案： 定义语义化设计令牌（如浅色/深色主题颜色）； 生成主题化 CSS 变量文件（如 :root[data-theme="dark"]）； 动态切换根元素属性（如 <html d原创 2025-09-26 15:43:50 · 1049 阅读 · 0 评论 -
Vibe Coding实践：我用10小时写出开源UI库 ，学会和AI建立更好的关系，实现AI时代的自由
github项目地址：https://github.com/hourong88/You-Web-UIgitee项目地址：https://gitee.com/yoyo88/You-Web欢迎star✨和提issue🙋！原创 2025-09-25 11:25:16 · 1287 阅读 · 0 评论