GITHUB DESIGN REFERENCES / 10

10 个值得偷师的设计

我从 GitHub 挑了 10 个审美在线的网站,覆盖暗色编辑、暖白极简、渐变 SaaS、动效、设计系统和杂志排版。每张卡都能点开 Live Demo 和源码。

怎么选:想要高级杂志感 → 1 / 2 / 6;想要专业产品感 → 7 / 8;想要强记忆点 → 3 / 9 / 10;想要动效和分享传播 → 5 / 3。选好后告诉我编号,我按它的字体、留白、色彩和动效重做 Color Me。
01Brittany Chiang 网站截图

Brittany Chiang

bchiang7 / v4

暗色编辑感作品集

深海军蓝 + 衬线标题 + 大留白。适合做暗色高级版:黑底、酒红、金色点缀。

02Lee Robinson 网站截图

Lee Robinson

leerob / leerob.io

暖白极简内容优先

大量留白、单一强调色、内容优先。适合做「报告像杂志」的版本。

03Cruip Open React Template 截图

Cruip Open

cruip / open-react-template

暗色渐变SaaS

深色渐变 + 产品截图 + 强 CTA。适合做「科技感色彩测试」。

04vCard 个人作品集截图

vCard Portfolio

codewithsadee / vcard-personal-portfolio

卡片侧栏轻量

左侧个人信息 + 右侧内容卡片。适合做「个人色彩档案」的版式。

05Magic UI 网站截图

Magic UI

magicuidesign / magicui

动效渐变组件

光晕、渐变、微动效。适合给色卡和结果页加「高级感动效」。

06React Portfolio Template 截图

React Portfolio

chetanverma16 / react-portfolio-template

暖白杂志作品集

奶油底 + 大字号 + 图片块。最接近你现在网站的底色,可做「韩系杂志感」升级。

07Float UI 网站截图

Float UI

MarsX-dev / floatui

暗色组件落地页

暗色 SaaS 落地页 + 组件卡片。适合做「专业版 / 付费版」视觉。

08shadcn/ui 网站截图

shadcn/ui

shadcn-ui / ui

中性设计系统克制

黑白灰 + 细边框 + 组件化。适合做「干净、可信、像产品」的版本。

09Motion 网站截图

Motion

motiondivision / motion

黑黄粒子动效

黑底 + 荧光黄 + 粒子球。适合做「一次强记忆点」的首页,但别整站都用。

10Astro 网站截图

Astro

withastro / astro

紫色渐变未来感

紫渐变 + 星云 + 大标题。适合做「未来感色彩宇宙」的方向。