---
name: docs-first-open-source
description: "文档优先开源产品 (Docs-First Open Source Hybrid) style skill for AI website building."
---

# 文档优先开源产品 (Docs-First Open Source Hybrid)

## 适用场景 / Use When

开源产品首页 / framework 官网 / 开发者工具 / docs-native 平台

## 适合做 / Best For

- 开源产品
- framework 官网
- 开发者工具

## 不适合做 / Not For

- 纯大片品牌页
- 无文档入口的营销站
- 情绪型杂志首页

## 长这样 / Visual Traits

- get started 很近
- 文档邻接
- 代码可信
- 社区证明明确

## 配色系统 / Color System

- 中性深浅都可以
- 强调色要服务安装和导航
- 不要用营销色覆盖开发者判断

## 排版系统 / Typography

- 大标题直接说明是什么
- 安装、文档、社区这些词要单独成层
- 代码或命令提示要很好扫

## 版式规则 / Layout Rules

- 首屏先给 get started
- 文档和产品说明紧邻出现
- 让社区、stars 或生态证明自然入场

## 图片处理 / Image Treatment

- 界面、代码和架构图都可作为证据
- 少用纯情绪摄影
- 首图要说明产品形态而不是只定 mood

## 动效节奏 / Motion

- 交互反馈清楚就够
- 避免娱乐化镜头动效
- 让结构和可信感先成立

## 推荐结构 / Recommended Structures

- 工作台型 / Workbench / Tool Shell
- 专题长文型 / Dossier / Feature

## 历史来源 / Historical Roots

- 包豪斯 / Bauhaus
- 瑞士风格 / Swiss Style
- 极简主义 / Minimalism

## 参考网站 / Reference Sites

- Supabase: https://supabase.com/
- Astro: https://astro.build/
- Bun: https://bun.sh/

## 注意避坑 / Avoid

- 做成只会讲故事的品牌站
- 把文档入口埋太深
- 只有 feature slogan 没有开发者证据

## Prompt DNA

```text
请参考文档优先开源产品（Docs-First Open Source Hybrid）风格建站：
视觉特征：get started 很近 / 文档邻接 / 代码可信 / 社区证明明确
适合场景：开源产品 / framework 官网 / 开发者工具
不适合：纯大片品牌页 / 无文档入口的营销站 / 情绪型杂志首页
推荐页面组织：工作台型 / Workbench / Tool Shell / 专题长文型 / Dossier / Feature
历史来源：包豪斯 / Bauhaus / 瑞士风格 / Swiss Style / 极简主义 / Minimalism
参考网站：Supabase: https://supabase.com/ / Astro: https://astro.build/ / Bun: https://bun.sh/
配色系统：中性深浅都可以 / 强调色要服务安装和导航 / 不要用营销色覆盖开发者判断
排版系统：大标题直接说明是什么 / 安装、文档、社区这些词要单独成层 / 代码或命令提示要很好扫
版式规则：首屏先给 get started / 文档和产品说明紧邻出现 / 让社区、stars 或生态证明自然入场
图片处理：界面、代码和架构图都可作为证据 / 少用纯情绪摄影 / 首图要说明产品形态而不是只定 mood
风格要求：Use a docs-first open-source family: show install or get-started cues early, keep docs and code proof near the hero, make community credibility visible, and let structure and developer trust do more of the persuasion than glossy brand theater.
```