OpenDesign·你的设计资产库

网页参考

Handsomefrank

大胆、以插图为核心的创意机构作品集，采用活泼排版与鲜艳色块。

AgencyPortfolioBold TypographyExpressiveClean
Handsomefrank 网站截图

01

设计气质 DNA

活泼大胆创意机构作品集

一个充满活力的创意工作室，展示插画师作品

02

色彩

#000000Ink
#FFFFFFBG
#2C2C2CMuted
rgba(0,0,0,0.1)Line

黑白色高对比度搭配，以鲜艳、饱和的色块进行区域区分

03

字体

transitional-serif · grotesque-sans

  • display70px · 700
  • heading38px · 400
  • body22px · 400

所有主标题使用过渡衬线体，传递活泼感与权威性 · 正文及次要信息使用怪诞无衬线体，确保可读性 · 大型展示文字采用紧凑字距（-1.6px）以增强视觉冲击力

04

间距

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

充裕的留白，内容块周围留有较大 padding 值

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

极少或无边框，依靠色块与排版建立视觉层次

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称布局，使用大型色块与重叠插图

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

hover 状态平滑过渡 · 交互元素的 transform 动画 · 使用 cubic-bezier 缓动实现流畅动效

细微的 scale 与颜色过渡 · 通过 transform 变化提供即时视觉反馈

08

组件

  • button 圆形菜单按钮，带汉堡图标，位于右上角
  • card 全宽色块区域，用于展示项目
  • hero 居中粗衬线标题搭配大型插图，视口高度为 100vh

09

文案语气与禁用清单

  • 语气 自信、活泼且具权威性
  • 标题风格 采用衬线体的粗体陈述式标题
  • 按钮文案 活泼的拟声词（如 Tssss-chk!）
  • 勿使用细字重——截图显示全文采用粗体 700 字重
  • 勿为主要元素添加圆角——截图显示色块均为直角
  • 勿使用柔和粉彩——截图显示使用高饱和鲜艳色（青绿色、红色、橙色）
  • 勿将所有文字居中——截图显示项目描述为左对齐
  • 勿使用小字号标题——截图显示使用 70px 大号展示字体
  • 勿添加阴影或景深效果——截图显示为无凸起的平面色块
  • 避免: 正式的企业语言
  • 避免: 被动语态
  • 避免: 术语堆砌的描述

10

包内真实截图

Handsomefrank — 桌面首屏（hero）
桌面首屏（hero）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Handsomefrank — 移动首屏
移动首屏

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

11

System Prompt

Handsome Frank 是一个大胆、以插图为核心的创意机构作品集，标题使用过渡衬线体，正文使用怪诞无衬线体。关键颜色包括用于对比的黑色（#000000）和白色（#FFFFFF），以及鲜艳的区域背景色如青绿色（#2BA58E）、红色（#E23B3B）和橙色（#F4A261）。设计强调大型、富有表现力的排版（70px 展示字体，38px 标题）与紧凑字距。关键禁忌：避免细字重，绝不为主要色块添加圆角，不使用柔和粉彩，不将所有文字居中对齐。该网站通过全视口色块与重叠插图展示插画师作品，并搭配粗体陈述式标题。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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