精选 · 开放 · 免费
Craft
一个高端、宁静的生产力工作空间，融合了结构与富有表现力的创意。
productdocs
01
设计气质 DNA
优雅深思熟虑高效结构化宁静
为现代思考者打造的精致数字笔记本。
02
色彩
#030302Ink
#4A4A4AInk soft
#FFFFFFBG
#F5F5F5BG soft
#EBEBEBBG quiet
#E1E1E1Muted
rgba(3,3,2,0.09)Line
在干净的背景上使用高对比度的墨色以保证可读性，插图中则以柔和的马卡龙色作为点缀。
03
字体
transitional-serif · geometric-sans
展示型标题使用衬线字体，以传达优雅与深思熟虑的气质。 · 所有正文、导航和UI元素使用无衬线字体，以确保清晰易读。 · 在展示型字体上保持紧凑的负字间距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白，营造宁静、透气的阅读体验。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 14px
lg · 24px
pill · 999px
1px solid rgba(3,3,2,0.09)
0px 20px 40px 0px rgba(0, 0, 0, 0.05) · 0px 3px 10px 0px rgba(0, 0, 0, 0.08)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个干净、居中的垂直布局，具有强烈的排版层级和宽敞的版块。
07
动效与交互
150msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态下平滑的颜色和透明度过渡。
微妙的背景色偏移或透明度变化。 · 即时、干脆的响应。
08
组件
- button 胶囊形按钮，采用高对比度背景（主要CTA为黑色，次要为白色）。
- card 圆角柔和的卡片，带有微妙的投影，通常用于组合相关内容或任务。
- chip 用于状态或标签的极简胶囊形元素，采用浅色马卡龙色背景。
- input 干净、无边框或带有细微边框的输入框，与表面融为一体。
- hero 大号的排版声明，叠加在富有表现力、有纹理的拼贴插图之上。
09
文案语气与禁用清单
- 语气 富有亲和力、深思熟虑且赋能。
- 标题风格 清晰、以利益为导向的陈述，采用优雅的衬线字体。
- 按钮文案 直接且鼓舞人心，聚焦于即时价值（例如，'免费试用 Craft'）。
- 不要为所有内容都使用单一的强调色——截图显示插图中有多样化的马卡龙色。
- 不要使用厚重的投影——截图显示为营造深度使用的是微妙、柔和的阴影。
- 不要在正文文本中使用全大写——截图显示大写仅用于小型类别标签。
- 不要使用深色模式界面——截图显示的是以浅色、明亮为主的背景。
- 不要使用尖锐的方形圆角——截图显示的是高度圆润的圆角（最大24px或胶囊形）。
- 不要使用死板、网格密集的布局——截图显示插图中的排列更有机、更流畅。
- 避免: 充斥着行话或过于技术性的语言。
- 避免: 咄咄逼人或吵闹的推广语气。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计代表一个高端、宁静的生产力工具，融合了结构化组织与富有表现力的创意。它采用以墨色 (#030302) 对比干净白色 (#FFFFFF) 表面的高对比度配色方案。字体组合将优雅的过渡衬线字体用于展示标题，将干净的几何无衬线字体用于正文和UI。关键十六进制颜色包括 #030302、#FFFFFF，以及微妙的边框颜色 rgba(3,3,2,0.09)。关键禁忌包括：不要使用侵略性的投影，不要使用尖角，不要依赖单一的高饱和度强调色。布局强调充足的留白和居中的垂直流，营造一个透气、专注的用户体验。
en · zh-CN · zh-TW · ja · ko