Tenderly 设计系统结构化Prompt

色彩体系

• 主色（Primary Color）：深紫色（如 #6C47FF），用于品牌标识、按钮、链接等主要交互元素。
• 功能色（Accent/Secondary Colors）：亮紫色、蓝色、绿色等，用于强调、状态提示（如成功、警告、错误）。
• 中性色（Neutrals）：大量留白，背景多为白色（#FFFFFF）或浅灰色（#F7F8FA），文本为深灰色（#1A1A1A、#3C3C3C）。
• 辅助色：浅紫、淡蓝等，用于卡片、分割线、hover等细节。

示例：

colors:
  primary: "#6C47FF"
  accent: ["#A084FF", "#00D395", "#FFB800"]
  background: "#FFFFFF"
  surface: "#F7F8FA"
  text: "#1A1A1A"
  text-secondary: "#3C3C3C"
  border: "#E5E7EB"

字体排版

• 字体家族：Inter, Helvetica Neue, Arial, sans-serif
• 字号：标题大多为 32px、24px、20px，正文为 16px，辅助信息为 14px
• 字重：标题 700/600，正文 400/500
• 行高：1.2~1.5，保证良好可读性

示例：

typography:
  font-family: "Inter, Helvetica Neue, Arial, sans-serif"
  heading-1: { size: 32px, weight: 700, line-height: 1.2 }
  heading-2: { size: 24px, weight: 600, line-height: 1.3 }
  body: { size: 16px, weight: 400, line-height: 1.5 }
  caption: { size: 14px, weight: 400, line-height: 1.4 }

布局系统

• 布局方式：响应式设计，采用大间距、分栏布局，常见 12 栅格系统
• 间距：大间距（如 32px、24px、16px），元素间留白充足
• 卡片/模块：圆角卡片，阴影分层，内容分组明显
• 导航栏：顶部固定，左右分布，LOGO+菜单+按钮

示例：

layout:
  grid: 12-column
  spacing: [32px, 24px, 16px, 8px]
  card: { border-radius: 16px, padding: 24px }
  navbar: { height: 72px, padding: 0 32px }

阴影与圆角

• 阴影：卡片、弹窗等有柔和阴影，提升层次感（如 box-shadow: 0 4px 24px rgba(108,71,255,0.08)）
• 圆角：大圆角（如 16px、12px），按钮、输入框、卡片等均有圆角处理

示例：

effects:
  shadow: "0 4px 24px rgba(108,71,255,0.08)"
  border-radius: [16px, 12px, 8px]

使用建议

• 保持整体风格简洁、现代，注重留白与层次感
• 主要按钮、交互元素使用主色，辅助色点缀
• 字体统一使用 Inter，字号分明，层级清晰
• 布局采用响应式，适配不同屏幕
• 阴影和圆角适度，提升界面亲和力

---

如需进一步细化某一部分（如按钮样式、表单控件等），可补充具体模块说明。