作为一个设计师，开发一直是我的兴趣爱好所在，我学开发就是不想让设计局限于飞机稿，我喜欢自己把有趣的想法、创意落地成实实在在的项目，这种成就感是单纯设计稿无法满足的。我主要研究的是前端和视觉交互，对于开发的经验应该是比大多数设计师多的。
因为我分享的一些个人项目，吸引了一些设计师来请教关于如何学前端，因此我觉得可以陆续把我接触开发的一些经验、想法和难题分享一下。
为了避免文字阅读疲劳，我会放上我个人开发的部分网站项目做参考，感受一下作为设计我都探索了什么样的产品。
ricoui.com 我的个人网站，开源，目前 Star 190+
如果有人上来第一句话问：“我要学开发，要怎么学？“我大概会瞬间失去所有回答的激情和欲望，因为这种最基础的内容，搜索引擎、AI、各种文章都可以帮你完成最基础的认知教学。切换一下视角，如果在设计行业，有人上来问，只抛出了一个“我想学设计，教教我”，而不是经过自己主动的思考，接下来多半不会是一个愉快的经历。
“毫无准备的提问” 这种过于宽泛的问题背后,往往隐藏着提问者自身目标的模糊性。
设计是个大行业，这个庞大的领域包含着 UI/UX 设计、网页设计、APP 界面、动画制作、商业插画、品牌视觉、电商设计等数十个专业方向,每个分支又可以进行更细致的划分，就算从业多年，也很难一时间理出一条脉络出来。
前端也是一样的大领域，无论是前端、后端还是全栈,都包含着 WEB 开发、移动端开发、企业级应用、数据可视化等专业方向,而 React、Vue、Unity 等不同的技术栈又构成了各自独立的知识体系。不同的行业和领域，需要的知识和技术会有不同的偏向，需要掌握的知识和工具甚至完全不同。
要学什么首先得理清楚自己的需求和目标，围绕着目标去了解和学习整个体系以及学习路线。
任何有深度的技术领域都不存在"通用"的学习路线。就像接需求时要先明确产品定位和目标用户一样,学习技术也需要先定义好自己的学习目标。你是想开发响应式网站,还是构建 3D 可视化项目?是打算开发移动应用,还是尝试独立开发完整产品?不同的目标意味着完全不同的学习路径和技能组合。
这是我开发的网站模板，加入更多的功效和交互，进入开发领域之后，我的工作流程和一般的设计师不大一样，更倾向于直接负责落地的产品体验。
因此，想象和你接需求文档一样，给自己的诉求也列一个文档，自己想要的是网页开发、3D 视觉、APP 或者独立开发，然后找对应方向的知识和教程，不要广而泛的进行提问，这是大忌，也没有人能够回答。
对于 AI 的发展，开发是影响和受益最大的领域之一。对于开发学习者而言，起步最劝退和折磨的是，代码你照着写了，不知道为什么跑起来了，也不知道为什么跑不起来，但是自己找不到问题点，无法检索无法询问，耗时费力。
可能是每个学习者都有过的美好时光： ”一个中文全角分号 debug 一整晚”
但是在 AI 时代，你可以把整篇代码直接丢进去，不仅能立即获得错误定位，还会仔细的给你介绍解释每一行的用法和意义，每一个细微的错误以及不同的优化方案，但也要谨防“AI 幻觉”。
Vibe coding，中文可译为“氛围编程”或者“沉浸式编程”，
是一种新兴的开发方式，它强调利用人工智能（AI）来辅助开发过程，甚至在一定程度上取代传统的代码编写工作。在这个模式下，开发者主要通过自然语言向 AI 工具描述需求，由 AI 自动生成、优化和调试代码，而非像传统方式那样，需要手动编写每一行代码。
gradientshub.com 我开发的渐变网站
GradientsHub 是我围绕渐变设计开发的一个网站，内容主要是提供我自己制作的渐变素材，以及关于渐变生成的网页工具。这个网站 AI coding 的比例很高，我主要做的是把控设计风格一致性和模块的系统设计，AI 辅助提升了网站的代码水平。
这是我用 AI Coding 开发的一个自定义文字渐变生成的页面，这个生成器基本涵盖了 CSS 文字渐变的所有自定义元素，并且支持随机生成、色卡、Tailwind 等多种功能。这个页面所有的逻辑功能代码全都通过对话 AI 生成，然后我再调整布局和设计风格的一致性。
设计师专注视觉和前端页面的展示，让 AI 完成逻辑和功能，而不用花很多时间去深入代码逻辑。这是我目前的一个工作流程缩影。
AI 带来的不仅是效率提升，更在重构编程学习的基本逻辑。传统教学强调"从变量到框架"的线性积累，而 Vibe Coding 模式则提倡"以终为始"的逆向学习：先通过自然语言描述想要实现的产品效果，让 AI 生成基础代码，再通过调试过程反向掌握知识点。这种模式特别适合设计背景的跨界者。
这种模式，其实更倾向于产品经理的角色，你更多的是需要构建好完整的产品思维，把模糊的需求转化为技术方案，用自然语言去精准和详细的描述，当然也还是需要前端知识来纠错，但是开发门槛和效率和传统模式已经不可同日而语了。
这是我的一次快速灵感的开发体验，从开始有模糊的想法，到视频上的这个基本可用的工具网页，总共就三个小时不到。主要花费的时间其实是梳理和完善自己一闪而过的灵感，把它变成完整的产品。
有些设计师会喜欢追求实体书的文字质感和学习方式，我自己也收藏了很多实体设计书籍。但是开发是一个更新迭代很快速的行业，技术更新的速度正在以指数级增长。一本实体书从构思到出版，往往需要经历至少两年的周期——这段时间足够让一个前端框架完成多次重大更新。而就算现在热门的技术栈，也都是一直在更新迭代的，不断会添加新的技术淘汰旧的知识。（在框架学习阶段）大部分的编程类实体书不适合新手学习阶段。
开发者群体有着独特的分享文化。他们热衷于将自己的经验转化为教程，这种热情有时甚至超过了学习者自身的求知欲。
React 官方文档写得非常好，你能找到从入门到进阶的完整学习路径、详细指南和教程案例，以及常见问题解答。而像我最喜欢的 Astro 这样的新兴框架，更是将文档建设视为核心竞争力。官网教程是对于新手来说最好的学习起步。
当然还有一些经典的原理类书籍还是值得入手的，比如《JavaScript 高级程序设计》（俗称"红宝书"）和《JavaScript 权威指南》（"犀牛书"），它们仍然是理解语言本质的宝贵资源。这些经典著作就像建筑的地基，虽然不会经常被看到，却支撑着整个知识体系的稳固性。
在开发过程中，遇到问题是常态。学会查阅文档、搜索解决方案、在 Stack Overflow 等社区提问，都是提升自我、解决问题的有效途径。
从设计到开发落地，打通上下游的工作流程。我是很喜欢这种体验。
前端开发是一门实践型技能，仅仅依靠看视频、阅读教程和理解概念是无法真正掌握前端技能的。事实上，堆代码量真的能越过前期学习的大部分困难，但前提是不需要你照着“字典式”的文档把每一个标签和属性都抄一遍。
最好的方式，是一个个小项目实现和落地，积累知识广度和经验。不需要纠结于理解一个项目的原理，而是先让项目跑起来。
InspoWeb 是我把日常收集灵感的操作习惯，变成网站的日常更新，把所有的灵感进行梳理分类、提交，一个优势是在线提交其实相当于跨设备和地点的同步化，另一点是网站搭起来后，其实缩短了我平时整理灵感所耗费的时间，并且网站对外展示自己，持续获得了正反馈而又不增加额外工作量。
就像设计系统时需要先规划信息架构一样，技术学习也需要有清晰的结构化思维。学习知识是有记忆遗忘曲线的。本职作为设计师，不可能将太多的时间和精力都投入在前端学习上，而且前端知识多而杂，如果没有计划的东学一点，西学一点，不容易记忆，遗忘速度加倍。
把时间多花些在前置的准备工作上。可以将前端知识划分为核心概念、框架应用、工程实践等模块，然后像搭建积木一样逐步完善每个部分。这种系统化的学习方法不仅有助于知识的长效记忆，还能在需要时快速定位所需信息。
在这个信息爆炸的时代，选择比努力更重要。与其盲目追求学习资源的数量，不如专注于构建适合自己的学习体系。
UIUXDECK 则是把我日常收集设计工具、资源的习惯也同样去做成网站产品，设计师可以把自己日常的一些设计需求，转化为产品。一方面则是简化工作流、有序的梳理和分类，另一方面是对外输出可以获得更多交流和正反馈，获得用户，成为扩展自身个人品牌影响力的途径之一。
使用 Vibe Coding 做辅助，AI 专注逻辑和功能，设计师充分发挥优势的视觉和产品能力，我觉得这是设计师与开发结合的一个极大的优势。按我目前的经历来看，绝大部分的开发者，可能产品做得好，但是在设计和视觉上是不及格的。这可能也是设计师探索“自由之路”的一个选择和机会。
