精选 · 开放 · 免费

Carrd

基于渐变设计的单页网站构建器极简着陆页。

nocodetool

↓ 下载设计系统包 (44 MB)在 OpenDesign 中打开

原站: https://carrd.co

📦 浏览包内文件 →

设计气质 DNA

简洁性可访问性响应式

数字工具包的冷静、几何风格欢迎屏幕。

色彩

#33ada9Accent

#ffffffInk

rgba(255,255,255,0.75)Ink soft

#24252dBG

rgba(255,255,255,0.4)Muted

rgba(255,255,255,0.075)Line

深色低饱和度渐变背景上的高对比度白色文字，搭配单一鲜明的青绿色强调色。

字体

grotesque-sans

display56px · 700
heading34px · 700
body-lg24px · 400
body16px · 400
caption12px · 400

间距

4px

8px

16px

24px

32px

48px

64px

96px

基于 4px 的基础比例，大区域采用宽裕内边距 (32-64px)。

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

sm · 4px

md · 6px

lg · 12px

pill · 999px

微妙的 1-2px 白色边框，采用不同透明度 (0.4 至 0.75)，或纯白描边。

rgba(0, 0, 0, 0.1) 0px 8px 16px 0px

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

首屏采用居中单列布局，功能部分过渡为双列网格。

动效与交互

200msmicro

250mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

悬停与聚焦时的颜色和透明度过渡 · 页面区域淡入

交互元素上的颜色过渡与微妙透明度变化。 · N/A

组件

button 圆角矩形，主操作按钮填充纯色青绿色，次级操作按钮采用细白边框。
card 带图片和微妙阴影的卡片，常用于模板预览。
chip N/A
input N/A
hero 全宽居中布局，包含大号标志、标题、副标题和主操作按钮。

文案语气与禁用清单

语气乐于助人、极简且平易近人。
标题风格 加粗、大号、简洁，常使用单个词汇如「响应式」或「免费」。
按钮文案 直接且行动导向，使用类似「选择一个起点」的措辞。

避免使用多种竞争性强调色——截图显示仅使用单一青绿色 (#33ada9) 作为唯一鲜明色相。
避免使用复杂、多层的渐变——截图显示简单的双色线性渐变叠加。
避免使用装饰性或衬线字体——截图显示简洁、标准的 grotesque-sans (Arial/Helvetica)。
避免使用厚重、纯黑的背景——截图显示深炭灰色 (#24252d) 作为主要背景。
避免按钮使用方形尖角——截图显示一致的 6px 圆角。
避免使用宽大、分散的布局——截图显示内容限制在窄的居中栏内。
避免: 术语密集的 technical 语言
避免: 过于复杂的句子
避免: 侵略性或紧迫的语调

包内真实截图

Carrd — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

抓自真实页面 · 真 computed styles

System Prompt

Carrd 是一款极简、用户友好的工具，用于创建简单的单页网站。设计采用以炭灰色 (#24252d) 为中心的深色、低饱和度调色板，搭配微妙的紫蓝渐变叠加。字体严格遵循功能性，所有展示和正文文字均使用标准系统 grotesque-sans 字体 (Arial/Helvetica)。单一鲜明的强调色是柔和的青绿色 (#33ada9)，专用于主操作按钮以提供清晰视觉引导。关键设计约束包括避免复杂配色方案、严格保持居中单列或简单双列布局，以及交互元素仅使用一致的 6px 圆角。整体基调冷静、克制，高度聚焦于清晰度与易用性。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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