精选 · 开放 · 免费

Cognition

一个扩展人类能力的自主软件工程师。

01

设计气质 DNA

软件开发未来的建筑蓝图。

02

色彩

高对比度的单色系，配以单一、大胆的电光蓝作为主要交互的强调色。

03

字体

transitional-serif · geometric-sans · monospace

• display56px · 400
• heading20px · 400
• body16px · 400
• caption12px · 400

大号、高冲击力的标题使用过渡衬线体。 · 正文和 UI 元素使用几何无衬线体。 · 所有元素保持一致的 400 字重。

04

间距

充裕的留白，主容器左右留有 64px 的内边距。

05

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

使用 rgba(0,0,0,0.1) 的微妙 1px 边框。

06

布局

桌面端采用简洁的 12 列网格布局，并配有持久化的左侧导航栏。

07

动效与交互

元素出现时的平滑透明度过渡。 · 交互元素的微妙悬停状态。

微妙的色彩偏移或透明度变化。 · 立即反馈，延迟极小。

08

组件

• button 主要操作按钮为黑色填充、白色文字；次要操作使用描边或文字按钮。
• card 用于文章的简洁布局，通常包含标题和日期。
• chip 使用小型等宽字体的简单标签或元数据标记。
• input 用于简单表单的极简、无边框文本输入框。
• hero 一个大型的、居中的文本块，具有宽大的边距和一个次要的背景块。

09

文案语气与禁用清单

• 语气 权威而又协作，聚焦于工程的未来。
• 标题风格 关于产品核心能力的粗体、直接陈述。
• 按钮文案 清晰、以行动为导向的短语，例如“探索角色”。

• 不要使用多种高饱和度颜色——截图显示主要是黑白配色，带一个蓝色强调色。
• 不要在主要元素上使用圆角——截图显示按钮和卡片的边缘是锐利的直角。
• 不要使用厚重的投影——截图显示的是扁平、干净的设计，深度感极小。
• 不要使用复杂的背景——截图显示的是纯色的浅中性背景 (#F7F6F5)。
• 不要使用粗体字重——截图显示所有文本都使用一致的 400 字重。
• 不要在标题上使用无衬线体——截图显示主要标题文本使用的是过渡衬线体。
• 避免: 过于技术性的行话
• 避免: 炒作驱动的营销语言
• 避免: 侵入式弹窗

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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