OpenDesign·你的设计资产库

网页参考

Readwise Reader

一个简洁、以排版驱动的平台,用于重温并从阅读高亮中学习。

ProductReading
Readwise Reader 网站截图

01

设计气质 DNA

阅读知识记忆间隔重复高亮

一位私人图书馆助手,提醒你回顾读过的精华内容。

02

色彩

#478CD0Accent
#1F1F1FInk
#FFFFFFBG
#F5F5F5BG soft
#808080Muted
rgba(0,0,0,0.1)Line

高对比度的单色基底,搭配单一的功能性蓝色用于操作和链接。

03

字体

transitional-serif · humanist-sans · monospace

  • display50px · 800
  • h228px · 700
  • body16px · 400

标题使用过渡衬线字体,唤起文学与教育感。 · 正文使用人文主义无衬线字体,确保高可读性与现代美感。 · 宽松的行高,使长篇内容阅读更舒适。

04

间距

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

基于一致的 4px 基础网格,内容区块使用充足的内边距(24px-35px)。

05

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

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

主要用于导航下划线和输入状态的细微 1px 边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏布局,图文区域交替出现。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(1, 0.3, 0.54, 1.39)easing

hover 时简单的背景色和颜色过渡。 · 交互元素平滑的透明度与变换过渡效果。

背景色或颜色变化,配合 0.2 秒过渡。 · 通过状态变化提供即时反馈。

08

组件

  • button 实心蓝色填充配白色文字、圆角,或采用深色边框的描边样式。
  • card 主要用于产品截图中,展示嵌套的界面元素。
  • chip 带有不同背景色的小型圆角标签,用于分类。
  • input 标准表单字段,带有细微边框和清晰的聚焦状态。
  • hero 大型居中标题、辅助副文本以及一个主要的行动召唤按钮。

09

文案语气与禁用清单

  • 语气 教育性、鼓励性,并专注于个人成长。
  • 标题风格 清晰、以益处为导向的陈述,使用大号衬线字体。
  • 按钮文案 直接且以行动为导向,例如“免费开始使用”。
  • 不要为使用界面设置深色背景——截图显示的是以白色为主的背景。
  • 不要使用等宽字体作为正文——截图使用的是人文主义无衬线字体以保证可读性。
  • 不要使用霓虹或过于鲜艳的强调色——截图显示的是一种功能性、柔和的蓝色(#478CD0)。
  • 不要为主按钮使用复杂的渐变——截图显示的是纯色填充。
  • 不要在卡片上使用高对比度的投影——截图显示的是简洁的、基于边框或扁平化的 UI。
  • 不要为标题使用压缩或装饰性字体——截图使用的是清晰的过渡衬线字体。
  • 避免: 堆砌术语的语言
  • 避免: 过于企业化的语调
  • 避免: 激进的销售策略

10

包内真实截图

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

11

System Prompt

Readwise 是一款面向读者的生产力工具,专注于通过间隔重复来增强记忆和知识留存。其设计 DNA 是干净、简约的美学,优先考虑可读性。核心配色方案是单色:白色背景(#FFFFFF)搭配近黑色墨水(#1F1F1F),辅以功能性蓝色(#478CD0)点缀。字体采用精致的组合:标题使用过渡衬线字体(唤起文学感),正文使用人文主义无衬线字体(确保易读性)。关键设计约束:不要使用深色模式或深色背景,不要使用霓虹或高饱和度的强调色,不要使用复杂的渐变或繁杂的背景图案。布局宽敞居中,将用户的注意力集中在内容和他们阅读高亮的价值上。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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