OpenDesign·你的设计资产库

网页参考

Co Projects

一个极简、高对比度的个人作品集网站,由巨大的几何形态主导。

EditorialGeometricMonochromeBoldPortfolio

封面待补录,可通过原站查看设计。

01

设计气质 DNA

极简几何实验性原始主义建筑感

一件冷峻的建筑模型或一幅大胆的平面印刷品。

02

色彩

#000000Ink
#FFFFFFBG
rgba(229, 231, 235, 1.0)Line

严格二元色板:纯黑(#000000)搭配纯白(#FFFFFF)。

03

字体

geometric-sans · monospace

  • display60px · 400
  • body16px · 400

主要标题和正文使用 'Alpha' 字体系列 · 等宽元素使用 'Takt' 字体系列 · 所有文本元素保持一致的 font-weight: 400

04

间距

4px
8px
12px
16px
24px
32px
40px
48px
64px
96px

充足的留白,主要元素之间留有较大的垂直间距

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 0px
lg · 0px
pill · 0px

使用 rgb(229, 231, 235) 的 1px 细边框进行微妙分隔

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称分割布局,左右两侧为巨大的几何图形,顶部为极简导航

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1.0)easing

所有过渡均应用于所有属性(transition: all) · 简化的动态效果,聚焦于元素可见性和位置的变化

交互元素上的光标变为指针 · 标准点击行为并带有过渡动画

08

组件

  • button 仅文本的导航链接,光标为指针
  • card 无传统卡片;内容以大型几何构图呈现
  • chip 在可见设计中不存在
  • input 在可见设计中不存在
  • hero 以几何圆形/半圆形构图为主导,配有极简文本

09

文案语气与禁用清单

  • 语气 极简、直接、建筑感
  • 标题风格 大型几何图形作为视觉标题
  • 按钮文案 低调的文本链接,而非突出的按钮
  • 不要添加圆角——截图显示所有形状均为尖锐的几何边缘
  • 不要引入色彩变化——截图严格使用黑色(#000000)和白色(#FFFFFF)
  • 不要使用多种字重——截图显示全文统一使用400字重
  • 不要添加投影——截图显示平面的2D构图,无深度效果
  • 不要创建复杂的导航菜单——截图显示顶部为简单的文本链接
  • 不要添加装饰性插图——截图仅使用抽象的几何形态
  • 不要使用渐变背景——截图显示纯白色(#FFFFFF)背景
  • 避免: 装饰性元素或插图
  • 避免: 渐变或色彩变化
  • 避免: 复杂的导航模式
  • 避免: 文字过多的介绍
  • 避免: 圆角或柔和边缘

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Co Projects 是一个极简的实验性个人作品集网站,采用冷峻的黑白配色,并以巨大的几何圆形和半圆形构图作为主要视觉语言。设计特点为纯白色(#FFFFFF)背景,搭配实心黑色(#000000)几何图形和极简导航文本。字体使用属于几何无衬线类别、字重为400的 'Alpha' 字体系列,展示字体大小为60px,正文字体大小为16px。布局为非对称式,留白充足且垂直间距较大。关键特征包括:无色彩变化、无圆角、无阴影、无渐变,以及极少的文本内容。导航由简单的文本链接('Co Projects'、'Builder'、'About')组成,光标为指针。所有过渡均应用于所有属性。该网站避免装饰性元素、复杂导航和文字密集的介绍,转而聚焦于大胆的几何形态作为视觉焦点。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。