01
设计气质 DNA
协作移动优先设计工具以人为本
移动端线框设计的Figma
02
色彩
#e6e51eAccent#000000Ink#f2f2f2BG#ffffffBG soft#c4c4c4Mutedrgba(0,0,0,1)Line以高对比度的黑白为基础，搭配醒目、高饱和度的亮黄色作为主要操作色。
03
字体
- display
56px · 700 - headline
31px · 500 - body
16px · 400
04
间距
4px8px16px24px32px48px64px96px章节之间留有充足的间距，以维持整体的通透与简洁感。
05
表面 (圆角 / 阴影 / 边线)
sm · 16px
md · 30px
lg · 50px
pill · 3000px
1px solid black
rgba(0, 0, 0, 0.2) 0px 10px 10px -5px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用大字号排版与充足垂直间距的居中容器布局。
07
动效与交互
220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
页面加载时的淡入上滑效果 · 悬停时的色彩与阴影过渡
背景色平滑过渡，并通过box-shadow实现细微的层次深度变化。 · 提供即时反馈，带有细微的缩放或色彩变化。
08
组件
- button 大号、药丸形的按钮，采用高对比度配色（纯黑或纯黄），无边框圆角限制。
- card 大型白色圆角容器，用于内容分区。
- chip 未显著使用。
- input 未显著使用。
- hero 居中的主标题内联表情符号，下方为主副操作按钮。
09
文案语气与禁用清单
- 语气 活泼、直接、以人为本。
- 标题风格 对话式且富有表现力，常直接在文本中使用表情符号。
- 按钮文案 以行动为导向，富有感染力，使用简洁明了的语言。
- 不要使用深色主题——截图显示为浅灰色（#f2f2f2）背景搭配黑色文字
- 不要使用纤细、精致的字体——截图显示为粗壮、几何感强的无衬线展示型字体
- 不要使用尖锐的直角——截图显示为大圆角的药丸形按钮和圆角卡片容器
- 不要使用微妙、低饱和度的点缀色——截图显示为鲜艳、高饱和度的黄色（#e6e51e）作为主点缀色
- 不要使用拥挤、密集的布局——截图显示为充足的留白和居中的大尺寸内容
- 不要避免内联视觉元素——截图显示表情符号直接融入主标题文本
- 避免: 技术术语
- 避免: 冰冷或企业化的语言
- 避免: 复杂的句子结构
10
包内真实截图
11
System Prompt
这是一个活泼、高对比度的SaaS着陆页，用于一款移动端应用设计工具。其核心识别建立在浅灰色（#f2f2f2）背景、鲜明黑色（#000000）文字以及用于主要操作的鲜艳高饱和度黄色（#e6e51e）之上。排版采用粗壮、几何感强的无衬线展示字体（Poppins），搭配简洁的人文无衬线正文字体（Inter）。布局使用充足的留白、居中的容器以及大圆角的药丸形UI元素。关键禁忌：避免深色模式，避免纤细字体，避免尖锐直角，避免低饱和度点缀色，避免拥挤布局，避免使用无表情符号的呆板标题。设计风格应富有表现力、以人为本，并聚焦于协作式移动端线框设计。