夜雨聆风前段时间大家都在玩html形式的作品集网站，那个只能自己本地预览着玩，我还是想更进一步实现真正的网站部署和上线，最近通过和ai的不断交流和迭代，构建部署上线了自己的个人作品集网站。
这是我的个人网址链接，大家看看
https://my-portfolio-zeta-liart-f07gmrl1ci.vercel.app/
整理了一些设计规范与组件库的官方及权威参考链接：
1. 微软：Fluent Design System (毛玻璃/材质感)
Acrylic (亚克力) 材质规范：
https://developer.apple.com/design/human-interface-guidelines/materials
Mica (云母) 材质规范：
https://learn.microsoft.com/en-us/windows/apps/design/style/mica
Fluent UI React 组件预览 (Button)：
https://storybooks.fluentui.dev/react/?path=/docs/components-button--default
层级与高度 (Elevation)：
https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/elevation
2. Apple：Human Interface Guidelines (极简与活力)
Materials (毛玻璃/材质定义)：Apple HIG - Materials
https://developer.apple.com/design/human-interface-guidelines/materials
Typography (排版标准)：Apple HIG - Typography
https://developer.apple.com/design/human-interface-guidelines/typography
SF Pro 字体下载与规范：Apple Fonts
https://developer.apple.com/fonts/
Color (色彩哲学)：Apple HIG - Color
https://developer.apple.com/design/human-interface-guidelines/color
3. Linear：现代网页设计的“美学天花板”
Linear 官网：Linear.app
Linear 风格指南 (非官方总结，非常硬核)：Linear.style
看点：这里拆解了 Linear 的高光边框、渐变、网格背景等具体 CSS 实现。
Linear 的设计哲学 (博客)：https://linear.app/now/category/design（推荐）
4. 前端实现首选：Shadcn UI & Magic UI
Shadcn UI 官网：ui.shadcn.com
Magic UI 官网：magicui.design
Blur Fade (模糊穿透)：
https://magicui.design/docs/components/blur-fade
Neon Gradient Card (发光边框)：https://magicui.design/docs/components/neon-gradient-card
Retro Grid (背景噪点/网格)：
https://magicui.design/docs/components/retro-grid
精选推荐：
