代码+设计开源了！个人作品集网站（设计篇）

大家好呀，我是 Rico，在前面一期文章里，我大概讲了关于个人网站和建站的想法思路，以及推荐了一些我认为非常棒的网站模板。

但是作为一个实践派，总觉得之前的内容不够完整，少了些实操经验。所以最近两周，我利用业余时间完整的设计与开发了一套个人网站模板，把之前的想法落地为和实践一遍，在设计和功能上，我按照之前文章上聊到的思路，做了一些细节设计，主要还是面对设计师、或者对个站有兴趣的朋友们。

这篇文章聚焦设计维度，下一篇会侧重上线教程，讲讲网站结构、以及入门部署知识，并探讨如何借助 AI 快速上线个人站点。如果你有推荐的 AI Coding 产品，也可以推荐一下。

网站预览

Ricoui Portfolio

开源个人网站模板

🎉 网站预览：portfolio.ricoui.com

⬇️ 开源仓库：https://github.com/ricocc/ricoui-portfolio

✨ Figma 设计文件：https://www.figma.com/community/file/1570102065468722827

开发周期：两周

技术栈：Figma + Astro + Tailwind CSS

我总结了一下主要的一些特性

✨ 特性

• 🚀 最新版的Astro - 快速、轻量级的静态站点生成器
• 🎨 现代化设计 - 复古蓝色主题，支持暗色/亮色模式切换
• 🔩 组件化设计 - 成熟的组件化设计，方面自定义调整
• 🎭 精致动画 - 使用 AOS 和自定义动画效果
• 📝 博客系统 - 支持 MD 和 MDX 格式的博客文章
• 🎯 作品展示 - 作品展示，可选图片/视频，以及详细页
• 🔍 SEO 优化 - 内置 SEO 和社交媒体标签
• ⚡ 性能优化 - 图片优化、代码分割、懒加载
• 📱 完全响应式 - 适配各种设备尺寸

目前优先上线了国际化版本，后续会针对中文语境做本地化优化，推出独立中文版。

自定义设计主题

在 Figma 设计文件中，我把主要的模块都做了组件化设计，尤其是颜色做了变量处理，可以方便在设计稿中进行修改，然后导出样式代码，方便调整样式风格。

设计界面预览

为什么选择 Astro

在技术栈选择时，优先容易维护和易上手, 所以选择了 Astro。

Astro 不捆绑任何 UI 框架，可以纯粹用 HTML + Tailwind，也可以嵌入 React/Vue 组件。对于习惯 Figma Variables 的设计师，我直接在代码里定义了 CSS 自定义属性（CSS Variables）styles/global.css 里的色值，修改就能全局切换主题色，与设计稿保持完全一致。

工作流上面，Figma 设计组件 → 导出 CSS 变量 → 复制到 theme.css → 在 .astro 文件里按结构堆组件。整个过程，只关注视觉呈现。这种所见即所得的开发体验，对设计师和新手还是十分友好的。。

最后

为什么要制作个人网站？除了方便作品展示和强化个人品牌，在设计与写代码的过程中，去运用自己擅长或探索的技术、将喜欢的风格和即时灵感融入其中，并且从设计细节中去记录当时的审美、思想、设计的看法等一切的动态变化。 这个过程本身就充满乐趣。

目前按照个人的开发习惯，先上线了英文版本，后续会针对中文语境做本地化优化，再做一个中文版本，方便使用。

更详细的更新记录与使用指南，有兴趣的可以关注一下我的微信公众号。或者可以添加一下我的微信号 rico-ui 实时交流反馈。