精选 · 开放 · 免费

Nevflynn

采用温暖柔和色系、以卡片式布局呈现的俏皮个人作品集，搭配醒目的圆润字体设计。

01

设计气质 DNA

一个俏皮而专业的开发者作品集。

02

色彩

温暖中性背景搭配柔和的柔和色调点缀，与深色文字形成高对比度。

03

字体

geometric-sans

• display40px · 700
• h124px · 500
• body16px · 400

标题元素使用 Moranga Bold。 · 正文与界面文字使用 Silka。

04

间距

基于4px单位网格系统。

05

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

在激活状态或特定卡片上显示，通常为2px实线边框。

rgba(0, 0, 0, 0) 0px 0px 0px 2px inset · rgb(240, 242, 248) 0px 0px 0px 2px

06

布局

瀑布流式卡片网格，卡片尺寸富有变化。

07

动效与交互

hover状态平滑过渡（0.3秒） · 交互时微妙的透明度渐变。

微妙的阴影或背景色变化。 · 极简的视觉反馈，依赖指针光标提示。

08

组件

• button 胶囊形状，带有细微边框或实色背景。
• card 大圆角（18px或32px），白色背景，柔和内边距。
• chip 小型胶囊形标签或导航项。
• input 极简底边框或底部边框样式。
• hero 基于卡片的布局，包含头像与简介文字。

09

文案语气与禁用清单

• 语气 友好、随意、平易近人。
• 标题风格 简短、醒目、直接。
• 按钮文案 对话式提问或简洁陈述。

• 避免使用深色模式——截图显示为浅色温暖背景。
• 避免使用尖锐直角——截图显示为18px和32px的大圆角。
• 避免使用纤细优雅的衬线字体——截图显示为粗体几何无衬线字体。
• 避免使用严格规整的网格——截图显示为俏皮的交错卡片布局。
• 避免使用高饱和度的刺眼荧光色——截图显示为柔和的哑光色调。
• 避免使用复杂厚重的投影——截图显示为极其微妙的浅色阴影或扁平化设计。
• 避免: 生硬的企业术语
• 避免: 过于复杂的句式
• 避免: 强势的销售话术

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko