作为一个设计师，开发一直是我的兴趣爱好所在，我学开发就是不想让设计局限于飞机稿，我喜欢自己把有趣的想法、创意落地成实实在在的项目，这种成就感是单纯设计稿无法满足的。我主要研究的是前端和视觉交互，对于开发的经验应该是比大多数设计师多的。

那么设计师应该如何如何学前端，从哪里入手，我觉得可以把我自己开发的一些经验、想法和项目分享一下。

为了避免文字阅读疲劳，我会放上我自己独立开发的部分网站项目做参考，感受一下作为设计我都探索了什么样的产品。         

ricoog.com - 这是我最近一时兴起开发的网站，耗时一周。它是一个专注于收集 OG（Open Graph）社交分享图的灵感网站功能上支持收藏、色彩模式切换和分类筛选，还包括详情页展示、推荐等；网站也配备了暗黑模式、多语言切换和站点提交功能。

一、先思考再提问和明确目标

如果有人上来第一句话问：“我要学开发，要怎么学？“我大概会瞬间失去所有回答的激情和欲望，因为这种最基础的内容，搜索引擎、AI、各种文章都可以帮你完成最基础的认知教学。切换一下视角，如果在设计行业，有人上来问，只抛出了一个“我想学设计，教教我”，而不是经过自己主动的思考，接下来多半不会是一个愉快的经历。

“毫无准备的提问” 这种过于宽泛的问题背后,往往隐藏着提问者自身目标的模糊性。

设计是个大行业，这个庞大的领域包含着 UI/UX 设计、网页设计、APP 界面、动画制作、商业插画、品牌视觉、电商设计等数十个专业方向,每个分支又可以进行更细致的划分，就算从业多年，也很难一时间理出一条脉络出来。

前端也是一样的大领域，无论是前端、后端还是全栈,都包含着 WEB 开发、移动端开发、企业级应用、数据可视化等专业方向,而 React、Vue、Unity 等不同的技术栈又构成了各自独立的知识体系。不同的行业和领域，需要的知识和技术会有不同的偏向，需要掌握的知识和工具甚至完全不同。

要学什么首先得理清楚自己的需求和目标，围绕着目标去了解和学习整个体系以及学习路线。

任何有深度的技术领域都不存在"通用"的学习路线。就像接需求时要先明确产品定位和目标用户一样,学习技术也需要先定义好自己的学习目标。你是想开发响应式网站,还是构建 3D 可视化项目?是打算开发移动应用,还是尝试独立开发完整产品?不同的目标意味着完全不同的学习路径和技能组合。

portfolio.ricoui.com

我每一年都会计划制作一个人网站，在其中运用自己当时喜欢的技术、热爱的风格和即时的想法。从设计细节中去看到我的审美、思想、设计的看法等一切的动态变化。这是我今年的网站，开发耗时两周。有了设计想法，转换成落地的产品没有想象中的那么麻烦。

ricoui.com

ricoui.com 则是我去年开发的个人网站，同样也是开源的，可以看到和今年的相比完全是两种不同的类型。其实作为设计师，想法和创意是很盈余的，天马行空，所以更需要把创意转换为作品的行动力。

因此，想象和你接需求文档一样，给自己的诉求也列一个文档，自己想要的是网页开发、3D 视觉、APP 或者独立开发，然后找对应方向的知识和教程，不要广而泛的进行提问，这是大忌，也没有人能够回答。

有价值的问题往往来自清晰的自我定位。

二、拥抱 AI “Vibe coding”

对于 AI 的发展，开发是影响和受益最大的领域之一。对于开发学习者而言，起步最劝退和折磨的是，代码你照着写了，不知道为什么跑起来了，也不知道为什么跑不起来，但是自己找不到问题点，无法检索无法询问，耗时费力。

可能是每个学习者都有过的美好时光： ”一个中文全角分号 debug 一整晚”

但是在 AI 时代，你可以把整篇代码直接丢进去，不仅能立即获得错误定位，还会仔细的给你介绍解释每一行的用法和意义，每一个细微的错误以及不同的优化方案，但也要谨防“AI 幻觉”。

Vibe coding，中文可译为“氛围编程”，是一种新兴的软件开发方法，它强调利用人工智能（AI）来辅助开发过程，甚至在一定程度上取代传统的代码编写工作。在这个模式下，开发者主要通过自然语言向 AI 工具描述需求，由 AI 自动生成、优化和调试代码，而非像传统方式那样，需要手动编写每一行代码。

AI 带来的不仅是效率提升，更在重构编程学习的基本逻辑。传统教学强调”从变量到框架”的线性积累，而 Vibe Coding 模式则提倡”以终为始”的逆向学习：先通过自然语言描述想要实现的产品效果，让 AI 生成基础代码，再通过调试过程反向掌握知识点。这种模式特别适合设计背景的跨界者。

设计师专注视觉和前端页面的展示，让 AI 完成逻辑和功能，而不用花很多时间去深入代码逻辑。这是我目前的一个工作流程缩影。

AI 带来的不仅是效率提升，更在重构编程学习的基本逻辑。传统教学强调"从变量到框架"的线性积累，而 Vibe Coding 模式则提倡"以终为始"的逆向学习：先通过自然语言描述想要实现的产品效果，让 AI 生成基础代码，再通过调试过程反向掌握知识点。这种模式特别适合设计背景的跨界者。

gradientshub.com

GradientsHub 是我围绕渐变设计开发的一个网站，内容主要是提供我自己制作的渐变素材，以及关于渐变生成的网页工具。这个网站 AI coding 的比例很高，我主要做的是把控设计风格一致性和模块的系统设计，AI 辅助提升了网站的代码水平。

渐变工具之一： CSS 文字渐变生成器

这是我用 AI Coding 开发的一个自定义文字渐变生成的页面，这个生成器基本涵盖了 CSS 文字渐变的所有自定义元素，并且支持随机生成、色卡、Tailwind 等多种功能。这个页面所有的逻辑功能代码全都通过对话 AI 生成，然后我再调整布局和设计风格的一致性。

这种模式，其实更倾向于产品经理的角色，你更多的是需要构建好完整的产品思维，把模糊的需求转化为技术方案，用自然语言去精准和详细的描述，当然也还是需要前端知识来纠错，但是开发门槛和效率和传统模式已经不可同日而语了。

这一章节，后续可以聊的内容太多了。

三、不必追求实体化书籍，最好的学习教程是官网

有些设计师会喜欢追求实体书的文字质感和学习方式，我自己也收藏了很多实体设计书籍。但是开发是一个更新迭代很快速的行业，技术更新的速度正在以指数级增长。一本实体书从构思到出版，往往需要经历至少两年的周期——这段时间足够让一个前端框架完成多次重大更新。而就算现在热门的技术栈，也都是一直在更新迭代的，不断会添加新的技术淘汰旧的知识。（在框架学习阶段）大部分的编程类实体书不适合新手学习阶段。

开发者群体有着独特的分享文化。他们热衷于将自己的经验转化为教程，这种热情有时甚至超过了学习者自身的求知欲。

React 官方文档写得非常好，你能找到从入门到进阶的完整学习路径、详细指南和教程案例，以及常见问题解答。而像我最喜欢的 Astro 这样的新兴框架，更是将文档建设视为核心竞争力。官网教程是对于新手来说最好的学习起步。

当然还有一些经典的原理类书籍还是值得入手的，比如《JavaScript 高级程序设计》（俗称”红宝书”）和《JavaScript 权威指南》（“犀牛书”），它们仍然是理解语言本质的宝贵资源。这些经典著作就像建筑的地基，虽然不会经常被看到，却支撑着整个知识体系的稳固性。

在开发过程中，遇到问题是常态。学会查阅文档、搜索解决方案、在 Stack Overflow 等社区提问，都是提升自我、解决问题的有效途径。

valentine.uiuxdeck.com

这是一套开源的情人节的图标，高清图片版本在 Figma 社区可以找到，同时我也做了一个着陆页，可以在着陆页上下载Blender的源文件。简单的说，就是把我自己日常的需求和产品，去扩展更多的可能性。需求一直都在身边。

四、注重实践和成果激励

前端开发是一门实践型技能，仅仅依靠看视频、阅读教程和理解概念是无法真正掌握前端技能的。事实上，堆代码量真的能越过前期学习的大部分困难，但前提是不需要你照着“字典式”的文档把每一个标签和属性都抄一遍。

最好的方式，是一个个小项目实现和落地，积累知识广度和经验。不需要纠结于理解一个项目的原理，而是先让项目跑起来。

inspoweb.com

Inspoweb.com 是我的网页灵感解决方案，目前已手动收录超过 200 个创意网页。作为网页设计师，我日常的习惯收藏优秀网页设计案例和视觉，也尝试过不少方案，最终我使用 Mkdirs 模板创建了这个网站。这也是寻找解决方案的过程。

就像设计系统时需要先规划信息架构一样，技术学习也需要有清晰的结构化思维。学习知识是有记忆遗忘曲线的。本职作为设计师，不可能将太多的时间和精力都投入在前端学习上，而且前端知识多而杂，如果没有计划的东学一点，西学一点，不容易记忆，遗忘速度加倍。

把时间多花些在前置的准备工作上。可以将前端知识划分为核心概念、框架应用、工程实践等模块，然后像搭建积木一样逐步完善每个部分。这种系统化的学习方法不仅有助于知识的长效记忆，还能在需要时快速定位所需信息。

在这个信息爆炸的时代，选择比努力更重要。与其盲目追求学习资源的数量，不如专注于构建适合自己的学习体系。

最后

我挑选展示的这一部分案例，类型和难度各不相同：有复杂全面的渐变站，有偏个人喜好的作品集网站，有依托模板二次开发的导航站，也有为开源服务的单页页面。他们用途不同，开发难度也不一样，但最终出发点和目标都是为我解决设计工作中的某一项具体需求，替代了我原本不满意或者过于复杂的工作流。甚至替代了原本需要付费使用的应用。

那么回到出发点，设计探索开发能做什么？我觉得它是一个万能插件，无论在工作流程上还是个人需求，当你觉得需要一些解决方案的时候，编程的知识可以为你提供另一个角度，尤其在 AI Coding 的时代，我们并不需要从头到尾的去学习完整的编程原理、语法或者计算机基础等等，只要先理解开发的思维逻辑和基础工具，再借助 AI 让项目跑起来，后续的突破便指日可待。

本质上，开发和平面、3D、剪辑一样，只是一项技能。根据具体需求，需要什么就学什么、用什么，并没有太多神秘感。

对于 AI Coding，设计师也有优势所在，视觉和审美的领先就不用说了，我们来提两个设计师习以为常的能力：产品思维和组件化思想。

• - 产品思维
• 
  

AI Coding（或 Vibe Coding）让使用者更接近产品经理的角色。启动一个项目前，我们需要先和 AI 讨论产品定位、制定完整的架构，让 AI 输出一套详尽的产品文档，再基于文档编程。对于 AI Coding 而言，清晰详细的产品文档能让效率翻倍，而产品思维本就是设计师能力图谱的重要一环，二者结合，能形成相辅相成的效果。

• - 组件化思想
• 
  

组件化和Token对于设计师来说，也是工作中的老朋友了。而对于开发来说，则可以简单概括为“万物皆组件”。 前端的核心思想之一就是组件化，无论是 React、Vue、Angular 等框架，还是原生开发，都强调将页面拆分为独立、可复用的组件（如头部组件、列表项组件、弹窗组件等）。所有复杂项目都能拆分成一个个模块组件，每个组件负责特定功能，这不仅降低了开发难度，还能在出错时精准定位问题。 从组件入手逐步完成完整项目，是很高效的路径。值得一提的是，组件化思维并非每个开发者都具备，它其实是一项重要能力，而设计师早已在日常工作中熟悉了这种逻辑。

而使用 Vibe Coding 做辅助，AI 专注逻辑和功能，设计师充分发挥优势的视觉和产品能力，我觉得这是设计师与开发结合的一个极大的优势。按我目前的经历来看，绝大部分的开发者，可能产品做得好，但是在设计和视觉上是不及格的。这可能也是设计师探索“自由之路”的一个选择和机会。

如果你不知道该从何进入开发的世界，不妨参考我上面的案例：从自己的日常需求切入，找到一个具体问题，尝试用编程思维寻找解决方案，兴趣是最好的开始。当第一个最小可行化的项目成功跑起来，后面就自然而然的进入加速期了。 

再次自我介绍一下，我是Rico, 网页设计师和兴趣使然的开发者，我目前除了继续在设计和开发中探索，也在进行着内容创作，主要方向和设计类文章和 AI Coding 经验总结。

如果对我做的这些小东西感兴趣的话，欢迎一块儿交流，交个朋友！

我是 Rico，感谢阅读！

Powered by Froala Editor