设计语言

Design Language

PowPow 的设计语言由三大核心原则构成：扁平、极简、红色。

PowPow's design language consists of three core principles: Flat, Minimalist, Red.

扁平 Flat

Flat

扁平是 PowPow 的第一设计语言。它同时作用于三个维度：

Flat is PowPow's first design language. It operates on three dimensions:

视觉扁平 Visual Flatness

Visual Flatness

去除冗余层级，信息直接触达。UI 无阴影、无渐变、无装饰性元素。Logo 仅一个圆环，无文字、无图形、无立体效果。色彩系统仅红白灰三色，拒绝花哨。

Remove redundant layers, deliver information directly. UI without shadows, gradients, or decorative elements. Logo is just a ring — no text, no graphics, no 3D effects. Color system is red-white-gray only, rejecting ornamentation.

交互扁平 Interaction Flatness

Interaction Flatness

产品交互无深层嵌套。所有核心操作三步内完成，没有二级菜单的二级菜单，没有设置里的设置。

Product interactions have no deep nesting. All core actions complete within three steps. No secondary menus within secondary menus, no settings within settings.

组织扁平 Organizational Flatness

Organizational Flatness

1个自然人与9个 Agent 的协作模式，没有中层管理、没有汇报层级、没有部门墙。每个 Agent 直接面向目标工作，信息透明流动。

1 human + 9 Agents collaboration model, no middle management, no reporting hierarchy, no departmental walls. Every Agent works directly toward goals with transparent information flow.

极简 Minimalist

Minimalist

极简是 PowPow 的第二设计语言。它同时作用于视觉、产品与组织：

Minimalist is PowPow's second design language. It operates on visual, product, and organizational levels:

视觉极简 Visual Minimalism

Visual Minimalism

三步完成核心操作。Logo 仅一个圆环。页面仅一种字体栈。图标仅一个库（Lucide）。布局通过留白呼吸，而非色块堆叠。每一个像素的存在都必须有理由。

Three steps to core actions. Logo is just a ring. Pages use one font stack. Icons from one library (Lucide). Layout breathes through whitespace, not color blocks. Every pixel must justify its existence.

产品极简 Product Minimalism

Product Minimalism

拒绝过度包装，不堆砌功能。内容与真实地理坐标永久绑定——坐标即内容，位置即故事。数字人有出生地、有记忆、有立场，不扮演、不虚构。

Reject over-packaging, no feature bloat. Content is permanently bound to real geographic coordinates — coordinates are content, location is story. Digital humans have birthplaces, memory, and opinions. No acting, no fiction.

组织极简 Organizational Minimalism

Organizational Minimalism

组织即产品。一人多 Agent 的最小自治单元，独立决策，直接产出。非核心事务由 Agent 自动处理，非必要流程自动化。每一个 Agent 的存在，都必须有理由。

Organization is product. Minimal autonomous units of one human with multiple Agents, independent decisions, direct output. Non-core tasks handled by Agents automatically, unnecessary processes automated. Every Agent must justify its existence.

注："组织扁平"侧重结构上的无层级，"组织极简"侧重单元的最小化与规则的精简，两者互为补充。

Note: "Organizational Flatness" focuses on structural hierarchy-free design, while "Organizational Minimalism" focuses on minimal units and simplified rules. They complement each other.

红色 Red

Red

红色是 PowPow 的第三设计语言。它是品牌的情感底色与文化纽带，同时作用于三个维度：

Red is PowPow's third design language. It is the brand's emotional foundation and cultural bond, operating on three dimensions:

工作热情 Work Passion

Work Passion

红色代表 Agent 7×24 不间断运转的能量，代表扁平团队形态的激情与效率。它是扁平的心跳。

Red represents the energy of Agents running 24/7, the passion and efficiency of the flat team model. It is the heartbeat of flatness.

中国创新 China Innovation

China Innovation

红色是中国文化中最具代表性的颜色。PowPow 以红色宣示本土创新的自信。它是极简中的文化锚点。

Red is the most representative color in Chinese culture. PowPow uses red to declare confidence in local innovation. It is the cultural anchor in minimalism.

可解释性 Explainable AI

Explainable AI

在 AI 的思维链中，红色高亮标记最重要的逻辑跳转点。用户可以看到 Agent 的推理过程，红色代表"我在这里做了决定"——这是可解释 AI 的视觉承诺，建立人机信任。

In AI's chain of thought, red highlights the most important logical transition points. Users can see the Agent's reasoning process. Red means "I made a decision here" — this is the visual promise of explainable AI, building human-machine trust.

MI 理念识别

MI Mind Identity

品牌概述

Brand Overview

泡泡（PowPow）是一个基于地理位置的 Agent 社交应用。用户在地图上发布"泡泡"内容（图片、音频、文字），与锚定在真实地点的 AI 数字人对话，创造属于每个坐标的故事。

PowPow is a location-based Agent social platform. Users post "bubbles" (photos, audio, text) on the map and talk to AI digital humans anchored to real places, creating stories for every coordinate.

品牌核心主张：人生处处有故事。

Brand proposition: Every place has a story.

每一个真实坐标都可以成为叙事的起点，每一次对话都可以触发新的剧情。这一主张本身即是极简主义的表达——不需要复杂的社交图谱，只需要一个坐标和一段文字。

Every real coordinate can be the starting point of a narrative; every conversation can trigger a new plot. This proposition itself is an expression of minimalism — no complex social graph needed, just a coordinate and some text.

PowPow 的企业识别建立在扁平、极简、红色三大设计语言之上。它们不仅是视觉风格，更是产品与组织的哲学。

PowPow's corporate identity is built on three design languages: Flat, Minimalist, Red. They are not only visual styles, but the philosophy of product and organization.

愿景与使命

Vision & Mission

人类历史数千年，无数伟大的灵魂与精彩的故事都曾在这片土地上生根、绽放，而后湮灭在时间中。泡泡的愿景是：地球上的每一个坐标，都有很多的故事。我们将通过数字人与泡泡重新呈现，通过游戏与活动重新组织。不建造虚拟的王国，只做真实世界的叙事层。

Throughout thousands of years of human history, countless great souls and wonderful stories have taken root and bloomed on this land, only to vanish in time. PowPow's vision is: every coordinate on Earth has many stories. We will re-present them through digital humans and bubbles, reorganize them through games and activities. We don't build virtual kingdoms, only a narrative layer for the real world.

品牌价值观

Brand Values

VI 视觉识别

VI Visual Identity

Logo 规范

Logo Guidelines

PowPow Logo 是四大设计语言的完美交汇：极简（仅一个元素）、扁平（无立体、无渐变）、开放（无壁垒）、红色（品牌色）。

The PowPow Logo is the perfect intersection of four design languages: Minimalist (only one element), Flat (no 3D, no gradients), Open (no barriers), Red (brand color).

图形构成

Graphic Composition

PowPow Logo 是一个算法生成式 Logo（Algorithmic Logo），由 Python 脚本控制几何规则和视觉样式生成。标志由单一的红色圆环构成，无任何文字或图形装饰。圆环外径占画布宽度的 60%，线条宽度为外径的 20%，线条端点使用圆角：

stroke-linecap="round"

The PowPow Logo is an Algorithmic Logo generated by Python scripts controlling geometric rules and visual styles. The mark consists of a single red ring — no text, no graphic embellishments. The ring's outer diameter is 60% of the canvas width, stroke width is 20% of the outer diameter, with rounded line caps:

stroke-linecap="round"

Python 生成代码

Python Generation Code

import matplotlib.pyplot as plt
import matplotlib.patches as patches

# 创建图形 - 透明背景版本
fig, ax = plt.subplots(figsize=(6, 6))

# 设置透明背景
fig.patch.set_alpha(0)
ax.set_facecolor('none')

# 定义参数 - 建立函数关系
radius = 0.4  # 外圆半径（数据坐标 0-1）
stroke_ratio = 0.20  # 线宽占半径的比例（20%）
linewidth = radius * 600 * stroke_ratio  # 线宽与半径成函数关系

# 绘制圆环
outer_circle = patches.Circle((0.5, 0.5), radius, fill=False,
                               edgecolor='#B22222', linewidth=linewidth)
ax.add_patch(outer_circle)

ax.set_xlim(0, 1)
ax.set_ylim(0, 1)
ax.set_aspect('equal')
ax.axis('off')
plt.tight_layout(pad=0)

plt.savefig('red_ring.png', dpi=150, bbox_inches='tight',
            facecolor='none', edgecolor='none', transparent=True)
plt.show()

安全区域

Clear Space

Logo 图形距离画布边缘至少 20%。安全区域内不得放置其他元素——这是极简主义对留白的尊重。

The logo graphic must be at least 20% away from canvas edges. No other elements within the clear space — this is minimalism's respect for whitespace.

最小尺寸

Minimum Size

变体规范

Variants

默认版本

Default

#B22222 on white/transparent

品牌标志版

Brand Mark

包含文字标识，适用于正式品牌展示与商务合作场景

With wordmark, for formal presentations and partnerships

禁止用法

Prohibited Usage

色彩系统

Color System

PowPow 的色彩系统是极简的：仅红白灰三色，无渐变、无花哨。红色是唯一的品牌色，白色和灰色是支撑色。

PowPow's color system is minimalist: only red, white, and gray, no gradients, no ornamentation. Red is the sole brand color; white and gray are supporting colors.

品牌主色

Brand Colors

中性色（灰度）

Neutral Colors (Grayscale)

使用规范

Usage Guidelines

CSS 变量

CSS Variables

:root {
  /* 红色系 - 品牌色 */
  --red:        #B22222;
  --red-h:      #9a1c1c;
  --red-dark:   #8B1A1A;
  --red-light:  #CD5C5C;
  /* 灰度系 - 中性色 */
  --bg:         #ffffff;
  --fg:         #333333;
  --muted:      #666666;
  --subtle:     #aaaaaa;
  --border:     rgba(0,0,0,0.09);
}

字体规范

Typography

PowPow 的字体系统是极简的：仅使用一套字体栈，字重仅 4 级（300/400/500/600），拒绝花哨的字体组合。

PowPow's font system is minimalist: only one font stack, only 4 weights (300/400/500/600), rejecting fancy font combinations.

中文字体栈

Chinese Font Stack

font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei',
  ui-sans-serif, system-ui, -apple-system, sans-serif;

英文字体栈

English Font Stack

font-family: 'Inter', system-ui, -apple-system, sans-serif;

字重使用

Font Weight Usage

排版比例

Type Scale

图标系统

Icon System

使用 Lucide React 作为唯一图标库——这是极简主义的体现：一个库、一种风格、无填充、无渐变。禁止混用其他图标库。

Use Lucide React as the sole icon library — this is minimalism in practice: one library, one style, no fill, no gradients. Do not mix with other icon libraries.

尺寸规范

Size Guidelines

颜色规范

Color Guidelines

始终使用设计系统中的颜色变量，禁止硬编码颜色值：

Always use design system color variables. Never hardcode color values:

<UserCircle className="w-4 h-4 text-primary" />

<UserCircle className="w-4 h-4 text-purple-500" />

布局原则

Layout Principles

扁平原则 Flat Principle

Flat Principle

• 无阴影（除地图 popup 等必要场景）
• 无渐变（除目标位置标记等必要场景）
• 无圆角或微圆角（2px-8px）
• 无边框或 1px 细边框
• 通过留白区分层级，而非背景色块

极简留白 Minimalist Whitespace

Minimalist Whitespace

留白不是空白，而是内容的一部分。PowPow 通过留白创造呼吸感，让用户专注于内容本身。

Whitespace is not empty space, but part of the content. PowPow creates breathing room through whitespace, letting users focus on content itself.

间距系统

Spacing System

PWA 图标规范

PWA Icon Guidelines

设计规范

Design Specs

• 背景：白色（极简）
• 图形：红色圆环，占画布 60%（红色+极简）
• 边距：四周各 20% 安全区域（扁平的留白）
• 格式：PNG + SVG 双格式

BI 行为识别

BI Behavior Identity

扁平行为

Flat Behavior

1人+9 Agent 协作模式

1 Human + 9 Agents Collaboration

PowPow 采用 AI 时代的扁平组织形态：1个自然人与9个 Agent 直接协作，无中层管理、无部门墙、无汇报层级。每个 Agent 面向目标工作，信息透明流动。

PowPow adopts a flat organizational form for the AI era: 1 human collaborates directly with 9 Agents, no middle management, no departmental walls, no reporting hierarchy. Every Agent works toward goals with transparent information flow.

开放生态接口

Open Ecosystem Interfaces

开放 API、B2D 模式、OpenClaw Skill 生态——扁平组织在对外协作上的具体体现。内部无层级壁垒，对外接口自然开放，开发者与生态伙伴无门槛接入。

Open API, B2D model, OpenClaw Skill ecosystem — concrete manifestations of flat organization in external collaboration. No internal hierarchical barriers, external interfaces naturally open, developers and ecosystem partners access without barriers.

GitHub 开源透明

GitHub Open Source Transparency

代码开源、文档公开、决策透明。信息不囤积，知识不垄断，协作无边界。

Open source code, public documentation, transparent decisions. Information is not hoarded, knowledge is not monopolized, collaboration has no boundaries.

极简行为

Minimalist Behavior

三步原则

Three-Step Principle

任何核心操作必须在三步内完成。以发布一个泡泡为例：

Any core operation must be completed within three steps. Taking posting a bubble as an example:

PWA 零安装

PWA Zero Install

浏览器打开即用，无需下载、无需注册、无门槛。这是极简的接入方式。

Open in browser and use instantly, no download, no registration, no barriers. This is the minimalist access method.

AI 内容生成

AI Content Generation

依赖 AI 辅助生成图片、音频、文字，降低创作门槛。让技术承担复杂性，让用户享受简单性。

Rely on AI to assist in generating photos, audio, and text, lowering the barrier to creation. Let technology bear the complexity, let users enjoy simplicity.

交互文案 Microcopy

Microcopy

UI 中的每一个文字都应极简、直接、诚实。拒绝冗长，拒绝模棱两可。

Every word in the UI should be minimalist, direct, and honest. Reject verbosity, reject ambiguity.

红色行为

Red Behavior

品牌色使用规范

Brand Color Usage

红色精准点缀，不滥用。在极简的白色界面中，红色用于引导注意力、标记关键操作、传递品牌温度。

Red is precisely placed, not overused. In a minimalist white interface, red guides attention, marks key actions, and conveys brand warmth.

文化表达

Cultural Expression

在真实地点相关的场景中，红色不仅是品牌色，更是文化符号。例如"永乐·1421"故宫项目中，红色连接数字体验与物理空间，让用户在真实坐标上感受历史温度。

In scenarios related to real places, red is not only a brand color but also a cultural symbol. For example, in the "Yongle · 1421" Forbidden City project, red connects digital experience with physical space, letting users feel historical warmth at real coordinates.

内容规范

Content Guidelines

数字人创建标准

Digital Human Creation

• 必须有名字、形象、人设和出生地
• 人设需包含性格、记忆、立场三要素
• 出生地必须为真实地理坐标
• 禁止创建违反法律法规的人设

内容审核

Content Moderation

• 禁止发布违法违规内容
• 禁止发布虚假信息
• 尊重他人隐私和知识产权
• 鼓励原创和真实体验分享

API 开放标准

API Open Standards

PowPow 采用 B2D（Business to Developer）模式，面向开发者开放 API。这是扁平组织生态的具体体现。

PowPow adopts a B2D (Business to Developer) model, opening APIs to developers. This is the concrete manifestation of flat organizational ecosystem.

OpenClaw Skill 规范

OpenClaw Skill Specs

• Skill 必须包含 name、description、icon 字段
• API 遵循 RESTful 设计原则
• 返回格式统一为 JSON
• 错误码遵循 HTTP 状态码规范

社区准则

Community Guidelines

PowPow 社区遵循以下核心原则：

The PowPow community follows these core principles:

代码规范

Code Standards

扁平代码结构

Flat Code Structure

扁平目录结构

Flat Directory Structure

目录层级不超过 3 层。拒绝深层嵌套，拒绝过度工程化。每个文件应当一目了然，不需要在目录迷宫中寻找。

Directory depth does not exceed 3 levels. Reject deep nesting, reject over-engineering. Every file should be immediately clear, no need to search through directory mazes.

/* 推荐：扁平结构 */
src/
  app/          # 页面路由（扁平，无深层嵌套）
  components/   # 组件（扁平，按功能命名）
  lib/          # 工具函数（扁平，无 utils/helpers 细分）
  hooks/        # 自定义 hooks
  types/        # 类型定义

/* 不推荐：深层嵌套 */
src/
  modules/
    user/
      components/
        forms/
          LoginForm/
            index.tsx
            styles.css
            types.ts

扁平组件设计

Flat Component Design

组件职责单一，不嵌套过多子组件。优先组合而非继承，优先扁平传递 props 而非深层 context。

Components have single responsibilities, not too many nested child components. Prefer composition over inheritance, prefer flat prop passing over deep context.

极简代码风格

Minimalist Code Style

最小必要代码

Minimum Necessary Code

每一行代码都必须有存在的理由。拒绝过度抽象、拒绝提前优化、拒绝"可能以后会用到"的代码。如果删除某行代码不影响功能，那它就不应该存在。

Every line of code must justify its existence. Reject over-abstraction, reject premature optimization, reject "might need later" code. If removing a line doesn't affect functionality, it shouldn't exist.

通用编码原则

General Coding Principles

• 使用 TypeScript，禁止裸 JavaScript
• 使用 ESLint + Prettier 统一格式
• 组件文件使用 PascalCase（如 Logo.tsx）
• 工具函数文件使用 camelCase（如 useLocation.ts）
• 常量使用 UPPER_SNAKE_CASE

CSS / Tailwind 规范

CSS / Tailwind Guidelines

/* 使用 CSS 变量 */
className="text-primary bg-primary/10"

/* 使用 Tailwind 语义化类 */
className="text-red-600"

/* 禁止硬编码颜色 */
className="text-purple-500"
className="text-[#ff0000]"
style={{ color: 'red' }}

Tailwind 优先级

Tailwind Priority

/* 1. 优先使用 Tailwind 工具类 */
<div className="flex items-center gap-4 p-4">

/* 2. 复杂样式使用 cn() 工具函数 */
import { cn } from '@/lib/utils';
<div className={cn("flex", isActive && "bg-primary")}>

/* 3. 全局样式仅在 globals.css 中定义 */
/* 组件级样式禁止随意添加 */

红色代码标识

Red Code Identity

品牌色变量

Brand Color Variables

代码中必须使用品牌色变量，禁止硬编码。红色不仅是视觉标识，也是代码层面的品牌一致性。

Brand color variables must be used in code, never hardcoded. Red is not only a visual identifier, but also brand consistency at the code level.

/* 正确：使用品牌变量 */
const COLORS = {
  primary: '#B22222',
  primaryHover: '#8B1A1A',
  primaryLight: '#CD5C5C',
} as const;

/* 错误：硬编码颜色 */
const BAD_COLOR = '#ff0000';

语义化命名

Semantic Naming

使用语义化命名而非颜色名，让代码本身表达品牌意图：

Use semantic naming rather than color names, letting code itself express brand intent:

/* 正确：语义化 */
className="text-primary"
className="bg-primary/10"
className="border-primary"

/* 错误：颜色名 */
className="text-red"
className="bg-red-100"

React / TypeScript 规范

React / TypeScript Guidelines

组件结构

Component Structure

// 1. 导入顺序：React → 第三方库 → 内部模块 → 类型 → 样式
import { useState, useCallback } from 'react';
import { UserCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
import { TypeIconProps } from './types';

// 2. 接口定义
interface Props {
  type: 'digital_human' | 'post';
  size?: number;
}

// 3. 组件定义（使用函数声明）
export function TypeIcon({ type, size = 16 }: Props) {
  // 4. hooks
  const [isHovered, setIsHovered] = useState(false);

  // 5. 事件处理
  const handleClick = useCallback(() => {
    // ...
  }, []);

  // 6. 渲染
  return (
    <UserCircle
      size={size}
      className={cn("text-primary", isHovered && "text-red-h")}
      onClick={handleClick}
    />
  );
}

类型定义

Type Definitions

// 优先使用 interface 定义对象类型
interface User {
  id: string;
  name: string;
  avatar?: string; // 可选字段
}

// 使用 type 定义联合类型
type ContentType = 'image' | 'audio' | 'text';

// 枚举使用 const 对象替代 enum
const ContentTypeEnum = {
  IMAGE: 'image',
  AUDIO: 'audio',
  TEXT: 'text',
} as const;

命名规范

Naming Conventions

文件命名

File Naming

/* 组件 */
components/
  Logo.tsx              # 组件
  Logo.test.tsx         # 测试
  Logo.stories.tsx      # Storybook

/* 页面 */
app/
  page.tsx              # 页面
  layout.tsx            # 布局
  loading.tsx           # 加载状态
  error.tsx             # 错误页面

/* API 路由 */
api/
  posts/
    route.ts            # 路由处理器