forth-ai-brand

在创建前端时应用Forth AI品牌指南。适用于UI组件、页面、应用程序和设计系统。贯彻极简主义、多态接口和Forth AI视觉识别。

SKILL.md

--- frontmatter

name: forth-ai-brand
description: Apply Forth AI brand guidelines when creating frontends. Use for UI components, pages, applications, and design systems. Enforces radical simplicity, polymorphic interfaces, and the Forth AI visual identity.

Forth AI Design System

Forth AI is the AI-native enterprise. All interfaces must embody radical simplicity and joyful usability.

Source Documents

Before building, read these canonical documents:

Document	Path	Contains
Design Doctrine	`SSOT/Product/design-doctrine.md`	UX philosophy, layout doctrine, interaction principles, governance rules
Brand Guide	`SSOT/GTM/brand-guide.md`	Visual identity, colors, typography, components, messaging
Product Vision	`SSOT/Product/vision.md`	What we're building and why

Core Philosophy (Quick Reference)

The One Interface

Google Search simplicity × ChatGPT polymorphism × Enterprise predictability.

One universal input box handles:

•Search
•Actions & workflows
•Automations
•Queries
•Data retrieval
•Configuration

Rule: If a user needs a different page to perform a fundamentally similar task, the design has failed.

Speed = Product Value

Metric	Target
Perceived latency	<500ms
First token	<600ms
Response style	Always streaming
Loading states	Skeletal placeholders, never spinners

Restraint

•Hide advanced features until intent is signaled
•Reveal tools contextually
•First-time users must feel like they already know how to use it

Visual Identity (Quick Reference)

Colors (Dark-First)

css

/* Backgrounds */
--bg-primary: #0a0a0c;
--bg-secondary: #111114;
--bg-tertiary: #18181c;
--bg-elevated: #1f1f24;

/* Text */
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;

/* Accent — Amber */
--accent: #f59e0b;
--accent-soft: rgba(245, 158, 11, 0.15);

/* Semantic */
--success: #22c55e;
--warning: #eab308;
--danger: #ef4444;

/* Borders */
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.1);

Typography

Use	Font
Headlines, brand	Clash Display
Body, UI	General Sans
Code, technical	Geist Mono

Effects

•Glass: backdrop-filter: blur(12px) with subtle white overlay
•Noise texture: 2% opacity grain overlay
•Glow: Amber accent shadows on CTAs and active elements

Canonical Components

Universal Input Bar

The centerpiece. Identical across all modules.

tsx

<input
  className="w-full px-4 py-3 rounded-xl text-sm outline-none"
  style={{
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border-default)',
    color: 'var(--text-primary)',
  }}
  placeholder="Ask anything..."
/>

Result Card

tsx

<div
  className="rounded-xl p-4"
  style={{
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border-subtle)',
  }}
>
  <h3 style={{ fontFamily: "'Clash Display', sans-serif" }}>Title</h3>
  <p style={{ color: 'var(--text-secondary)' }}>Description</p>
  <div className="flex gap-2 mt-4">
    <Button>Edit</Button>
    <Button>Automate</Button>
    <Button>Run</Button>
  </div>
</div>

Status Badges

css

.status-draft { background: rgba(113, 113, 122, 0.2); color: #a1a1aa; }
.status-sent { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.status-paid { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.status-overdue { background: rgba(239, 68, 68, 0.2); color: #f87171; }

Do NOT Add

•New sidebars
•New persistent panels
•New "mini dashboards"
•New icons (use existing set)
•More than 6 colors
•Any feature that breaks the "one box" metaphor

Design Checklist

Before shipping any interface:

The Goal

A feeling of effortless capability — a system that "just works" for any task without overwhelming the user.