---
name: design-system-foundation
description: "设计系统基座 (Design System Foundation) style skill for AI website building."
---

# 设计系统基座 (Design System Foundation)

## 适用场景 / Use When

设计系统首页 / 组件规范 / tokens 与 guidelines / 产品基础库

## 适合做 / Best For

- 设计系统
- 组件规范
- 基础库

## 不适合做 / Not For

- 情绪品牌页
- 慢内容首页
- 沉浸发布页

## 长这样 / Visual Traits

- foundation 导航
- 规则先行
- 侧栏稳定
- 部件层级清楚

## 配色系统 / Color System

- 中性浅底或深底都可以
- 颜色要服务规则和部件区分
- 不要用品牌营销色压过系统信息

## 排版系统 / Typography

- 层级像文档系统而不是品牌广告
- 术语、部件名和说明文字都要很好扫
- 标题克制但清楚

## 版式规则 / Layout Rules

- foundation、component、pattern 要是一级入口
- 侧栏或分组导航必须稳定
- 规则页面要支持长期生长

## 图片处理 / Image Treatment

- 图例、tokens、组件截图和示意图都可以作为视觉证据
- 少用情绪化 hero 图
- 例子要比装饰重要

## 动效节奏 / Motion

- 几乎不需要戏剧化动效
- 状态反馈要清楚
- 交互应该像工具文档而不是 campaign

## 推荐结构 / Recommended Structures

- 工作台型 / Workbench / Tool Shell
- 档案堆栈型 / Archive Stack

## 历史来源 / Historical Roots

- 包豪斯 / Bauhaus
- 瑞士风格 / Swiss Style
- 新字体排印 / New Typography

## 参考网站 / Reference Sites

- Atlassian Foundations: https://atlassian.design/foundations/
- Carbon for AI: https://carbondesignsystem.com/guidelines/carbon-for-ai/
- People + AI Guidebook: https://pair.withgoogle.com/guidebook-v2/

## 注意避坑 / Avoid

- 把系统站做成 landing page
- 只有原则没有部件入口
- 强氛围图抢走规则信息

## Prompt DNA

```text
请参考设计系统基座（Design System Foundation）风格建站：
视觉特征：foundation 导航 / 规则先行 / 侧栏稳定 / 部件层级清楚
适合场景：设计系统 / 组件规范 / 基础库
不适合：情绪品牌页 / 慢内容首页 / 沉浸发布页
推荐页面组织：工作台型 / Workbench / Tool Shell / 档案堆栈型 / Archive Stack
历史来源：包豪斯 / Bauhaus / 瑞士风格 / Swiss Style / 新字体排印 / New Typography
参考网站：Atlassian Foundations: https://atlassian.design/foundations/ / Carbon for AI: https://carbondesignsystem.com/guidelines/carbon-for-ai/ / People + AI Guidebook: https://pair.withgoogle.com/guidebook-v2/
配色系统：中性浅底或深底都可以 / 颜色要服务规则和部件区分 / 不要用品牌营销色压过系统信息
排版系统：层级像文档系统而不是品牌广告 / 术语、部件名和说明文字都要很好扫 / 标题克制但清楚
版式规则：foundation、component、pattern 要是一级入口 / 侧栏或分组导航必须稳定 / 规则页面要支持长期生长
图片处理：图例、tokens、组件截图和示意图都可以作为视觉证据 / 少用情绪化 hero 图 / 例子要比装饰重要
风格要求：Use a design system foundation family: foundations-first navigation, tokens and principles at the top level, restrained product-neutral visuals, strong left-rail or sectional hierarchy, and a page rhythm built around reusable rules rather than campaign storytelling.
```