jack/digital-psychology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: seal Design Vision v1 and monorepo scaffold

Browse Source 
Archive the differentiated YuXinGu product docs, AI engineering system,
design contract, and Go/Vue scaffold. Next execution prioritizes Cece-parity
over early innovation (see .ai/product/STRATEGY.md).

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-02 16:00:44 +08:00
co-authored by Cursor
parent 2686866376
commit 2fb1dfee14
193 changed files with 8854 additions and 1851 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ai/design/README.md
+15
View File
@@ -0,0 +1,15 @@
# AI Design System
Machine-readable **UI/UX/VI contract** for agents generating H5 / Mini Program / Web / App UI.
| File | Purpose |
|---|---|
| [design-system.md](design-system.md) | Foundation: tokens, color, type, spacing, motion, voice |
| [component-catalog.md](component-catalog.md) | Button / Card / Chat / Report / Membership … |
| [platform/h5.md](platform/h5.md) | Mobile Web implementation limits |
| [platform/mini-program.md](platform/mini-program.md) | WeChat constraints |
| [platform/website.md](platform/website.md) | Desktop / SEO / admin |
| [platform/flutter.md](platform/flutter.md) | Future native |
Runtime tokens: `packages/ui/src/tokens.css`
Product chrome / tabs: `../ui.md`
.ai/design/component-catalog.md
+233
View File
@@ -0,0 +1,233 @@
# Component Catalog — AI Contract
Agents MUST check this file + platform `components/` before creating UI.
Naming: PascalCase; domain words from `.ai/domain.md`.
Visual tokens: [design-system.md](design-system.md).
Ship path today: `apps/user-h5/src/components/` (Vue). Mini Program / Flutter map 1:1 by name.
Status: `exists` | `required` (build when first needed) | `future`
---
## Primitives
### Button
Status: **required**
Types ONLY: `Primary` · `Secondary` · `Ghost` · `Danger` · `Loading` · `Disabled`
| Prop | Notes |
|---|---|
| variant | primary / secondary / ghost / danger |
| loading | shows progress; blocks double submit |
| disabled | uses `--color-primary-disabled` or neutral |
| block | full width on H5 forms |
MUST NOT: `SpecialButton`, `CustomButton2`, one-off gradient buttons outside Primary.
Primary visual: pill + brand CTA gradient from design-system.
### IconTile
Status: **required**
Square/rounded tile for Explore / Home grid. Soft accent bg + symbol (△ ◆ ☯ 问), not emoji.
### Avatar
Status: **required**
Profile face placeholder (initials or soft color). Sizes: sm 32 / md 40 / lg 56.
### Tag / Chip
Status: **required**
Filter chips, Soft labels. Active = white surface + primary text + light shadow.
### Divider
Status: **required** — `--color-border`, 1px.
### Skeleton
Status: **required** — list/card placeholders; calm pulse ≤300ms feel, no flashy shimmer rainbow.
### Toast / Banner
Status: **required** — success / error / info. Short copy; no fear wording.
---
## Layout chrome
### AppShell
Status: **exists** (TabBar + max-width column)
User column `max-width: var(--layout-max-user)`. Safe-area bottom padding.
### TabBar
Status: **exists**
Tabs: 首页 / 探索 / **问** / 陪伴 / 我的. Center Ask may use primary circle. Active = primary.
### TopBar
Status: **required**
Secondary pages: back · title · optional action. Soft wash or white; not heavy app bar.
### ContentSheet
Status: **required**
White rounded sheet over peach wash (home feed pattern).
---
## Forms
### TextField / DateField
Status: **required**
Label required · error · disabled · focus border soft primary. Birthday Decode uses compact year/month/day fields.
### FormSection
Status: **required** — label + control + helper/error.
Rules: Label, error, loading, disabled states always.
---
## Cards
### Card (base)
Status: **required**
Structure: Container → Padding (`--spacing-md`) → Content → Optional Action.
Surface white, `--radius-lg`, `--shadow-card`. No random card skins.
### FeatureCard
Status: **required** — Explore entry (icon + title + one line).
### ReportCard
Status: **required**
Decode / Match summary. Shows free conclusion; locked sections use PaywallLock. Footer disclaimer slot.
### MoodCard
Status: **required** — Companion daily mood entry/result. Soft, never clinical.
### SolarTermCard
Status: **required** — Today’s SolarTerm title + short lifestyle tip (no 吉凶).
### SubscriptionCard
Status: **required**
Membership plans. Clear price · period · benefits. **MUST NOT** fake countdown / dark patterns. CTA = Primary Button.
### UnlockCard
Status: **required** — single Report / Match Unlock alternative to VIP.
---
## AI / Ask
### ChatThread
Status: **required** — scrollable Ask history; Profile context chip at top (Self / Other switch).
### ChatBubble
Status: **required**
User vs AI. AI bubble: soft surface, calm radius; no neon bot skins. Streaming = typing/skeleton, not decorative bounce spam.
### AIMessage
Status: **required**
Structured Ask answer: short answer · optional bullets · disclaimer when health-adjacent. Prefer structured blocks over wall of text.
### PromptChip
Status: **required** — suggested follow-ups under Ask input; path-aware (性格 / 关系 / 养生), never 运势.
### AskInputBar
Status: **required** — bottom composer; ≥44px hit; send loading state.
---
## Profile & social
### ProfileSwitcher
Status: **required** — Self / Other list; “帮 TA 测” entry.
### ShareCard
Status: **required** — Decode / ScaleResult share visual; brand + one conclusion line; no medical claims.
### ScaleQuestion / ScaleResultView
Status: **required** — progress · options · result type + CTA to Decode/Ask.
---
## Commerce
### PaywallLock
Status: **required** — blurred/locked reason+plan; CTA Unlock or Membership.
### OrderSummary
Status: **required** — plan/report line items before pay-mock.
---
## States
### EmptyState
Status: **required** — one sentence + one action.
### ErrorState
Status: **required** — message + retry/back.
### LoadingBlock
Status: **required** — page/section skeleton wrapper.
---
## Forbidden inventions
Without approval / catalog update:
- Parallel button systems
- “Glassmorphism” chat skins
- Emoji-only navigation
- New layout shells beside AppShell
- Countdown / guilt paywalls
---
## Extension rule
Need a new component → add a row here (name, status, props, do/don’t) in the **same PR** as the first implementation. Then build under platform `components/`.
.ai/design/design-system.md
+276
View File
@@ -0,0 +1,276 @@
# AI Design System Contract — 愈心谷
**Mandatory.** Agents MUST read this before creating or modifying frontend UI
(`apps/user-h5`, `apps/mini-program`, `apps/admin-h5`, future website / Flutter).
| File | Role |
|---|---|
| [component-catalog.md](component-catalog.md) | Reusable components — check before inventing |
| [platform/h5.md](platform/h5.md) | Mobile Web (primary) |
| [platform/mini-program.md](platform/mini-program.md) | WeChat Mini Program |
| [platform/website.md](platform/website.md) | Desktop / marketing Web |
| [platform/flutter.md](platform/flutter.md) | Native app (future) |
Tokens: `packages/ui/src/tokens.css`
IA / tabs: `.ai/ui.md` · Domain: `.ai/domain.md`
---
## 0. Purpose
This is an **AI contract**, not a traditional design deck.
- Consistent brand across H5 / Mini Program / Web / App
- Stop random UI decisions
- Reuse components before inventing
- Shared language here; platform limits in `platform/*`
When uncertain: **DO NOT invent. ASK FIRST.** Consistency > creativity.
---
## 1. Design Philosophy
### Core values
| Value | UI implication |
|---|---|
| Simple | One job per section; short copy |
| Calm | Warm soft surfaces; low motion; no neon |
| Trustworthy | Clear hierarchy; disclaimer on reports |
| Professional | Stable tokens; no gaming chrome |
| Human-centered | Soft language; easy exit from paywalls |
| AI-first | Ask / chat are first-class patterns |
### Domain (psychology / wellness) — MUST
- Gentle self-understanding — not clinical hospital UI, not fortune-telling casino.
- Atmosphere: warm peach / coral wash → white content sheet.
- Unicode symbols (△ ☯ ◈) or SVG over emoji in chrome.
- Copy: friendly, clear, respectful, encouraging.
- **MUST NOT:** fear, guilt, fake urgency, medical cure claims, 吉凶祸福.
### MUST NOT create
- Excessive multi-stop gradients on chrome
- Neon, glow, dark-mode-by-default, purple-on-white “AI slop”
- Gaming HUD, particle spam, continuous decorative animation
- Random illustrations / emoji clusters
- Inconsistent spacing / one-off hex colors
- Dashboard clutter in home first viewport
---
## 2. Design Architecture
```
Foundation (tokens) → Components (catalog) → Platform implementation
```
AI MUST follow this order. Never invent page magic numbers or duplicate components.
---
## 3. Foundation — Design Tokens
All UI values MUST use tokens from `packages/ui` (or platform mapping of the same names).
Forbidden: `padding:17px; color:#2563eb; border-radius:13px;`
Required: `padding:var(--spacing-md); color:var(--color-primary); border-radius:var(--radius-md);`
If a token is missing: **ASK** or add it to `packages/ui/src/tokens.css` in the same change — do not hardcode.
Legacy `--yxg-*` remains valid; new code SHOULD prefer semantic names below.
---
## 4. Color System
Use only these semantic colors. Do not invent brand hues.
### Primary
| Token | Value | Use |
|---|---|---|
| `--color-primary` | `#E54D42` | CTA, brand, active tab |
| `--color-primary-hover` | `#D44338` | Hover / pressed |
| `--color-primary-soft` | `#FFE4E4` | Soft chip / Ask surface |
| `--color-primary-disabled` | `#F5B5B0` | Disabled primary |
Brand CTA gradient (only this one):
`linear-gradient(135deg, #FF7A6E, var(--color-primary))`
### Atmosphere
| Token | Value |
|---|---|
| `--color-bg-start` | `#FFD1C7` |
| `--color-bg-end` | `#FFC8B5` |
| `--color-bg-sheet` | `#FFF9F7` |
Do not replace with flat gray or purple gradients.
### Neutral
| Token | Value | Use |
|---|---|---|
| `--color-surface` | `#FFFFFF` | Cards, sheets, nav |
| `--color-text-primary` | `#333333` | Titles / body |
| `--color-text-secondary` | `#999999` | Subcopy |
| `--color-text-tertiary` | `#BBBBBB` | Meta |
| `--color-border` | `#F0F0F0` | Dividers |
| `--color-border-strong` | `#EEEEEE` | Inputs |
| `--color-input-bg` | `#FDFAF8` | Form fields |
### Domain accents (tint only — not global CTA)
| Token | Value | Feature |
|---|---|---|
| `--color-accent-gold` | `#C8923A` | Decode |
| `--color-accent-gold-soft` | `#FFF3D6` | Decode tile |
| `--color-accent-blue` | `#4A90E2` | Scale |
| `--color-accent-blue-soft` | `#E3EEFF` | Scale tile |
| `--color-accent-green` | `#5CB85C` | Companion / SolarTerm |
| `--color-accent-green-soft` | `#E0F6E4` | Companion tile |
| `--color-accent-orange` | `#E8985A` | Warm secondary |
| `--color-accent-purple` | `#8B5CF6` | Sparse only — never page theme |
### Status (only)
`success` · `warning` · `error` · `info`
Map: success≈green, warning≈orange/gold, error≈primary family, info≈blue.
### Forbidden
Neon / pure-black full-bleed / random Tailwind blue as brand / purple global theme.
---
## 5. Typography
Stack: `-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif`
Do not add Inter/Roboto/display fonts on product UI without ADR.
| Level | Size | Weight | Use |
|---|---|---|---|
| Display | 28–32px | 700 | Brand 愈心谷 only |
| Heading 1 | 20–22px | 700 | Page hero |
| Heading 2 | 16–17px | 600–700 | Section |
| Heading 3 | 15px | 600 | Card title |
| Body | 14px | 400 | Default |
| Body Small | 12–13px | 400 | Secondary |
| Caption | 10–11px | 400 | Tab / disclaimer |
No arbitrary sizes. Body line-height ≈ 1.6–1.7.
---
## 6. Spacing
Scale: **4 · 8 · 12 · 16 · 24 · 32 · 48 · 64**
| Token | px |
|---|---|
| `--spacing-2xs` | 4 |
| `--spacing-xs` | 8 |
| `--spacing-sm` | 12 |
| `--spacing-md` | 16 |
| `--spacing-lg` | 24 |
| `--spacing-xl` | 32 |
| `--spacing-2xl` | 48 |
| `--spacing-3xl` | 64 |
Forbidden: 13 / 18 / 27 / 35. Page pad default: 16.
---
## 7. Radius, shadow, width
| Token | Value | Use |
|---|---|---|
| `--radius-sm` | 10px | Back / small controls |
| `--radius-md` | 12px | Inputs / tiles |
| `--radius-lg` | 16px | Cards |
| `--radius-xl` | 18–20px | Large sheets |
| `--radius-pill` | 999px | CTA capsule |
Shadows: `--shadow-card: 0 2px 10px rgba(0,0,0,.04)`; `--shadow-nav: 0 -2px 8px rgba(0,0,0,.03)`. No glow.
`--layout-max-user: 430px` · `--layout-nav-h: 56px`
---
## 8. Components
MUST reuse. Before creating: catalog → `src/components/` → extend.
No `SpecialButton` / `CustomButton2` / `NewCard`.
---
## 9. Layout Patterns
| Pattern | Screens |
|---|---|
| HomeWash | Brand + Decode + white sheet |
| List | Explore, orders |
| Detail | Report / Match |
| Form | Decode birthday, edit Profile |
| Profile | Mine / switch Profile |
| Settings | Account, privacy |
| AI Chat | Ask |
| Paywall | Membership / Unlock |
| Companion | SolarTerm + Mood |
Home first viewport: **brand · headline · Decode form · CTA**. No stats/promo clutter.
---
## 10. Interaction States
Network UI MUST have: Loading (skeleton) · Empty · Error (+ recovery) · Success · Disabled.
Paywall: free conclusion, lock reason/plan; no fake countdown.
---
## 11. Motion
Durations: **150 / 200 / 300ms**. Feedback only.
No continuous loops or decorative scroll animation.
---
## 12. Accessibility
Contrast for body text; touch ≥ 44px; no hover-only essentials; label interactive controls.
---
## 13. Brand Voice
温和、清晰、尊重。禁止恐吓 / 道德绑架 / 虚假倒计时.
Report/Ask: lifestyle disclaimer（非医疗、非算命）. Labels follow `.ai/domain.md`.
---
## 14. Platforms
Shared language = this file. Limits = `platform/*`.
Priority: **H5 → Mini Program → Website → Flutter**.
---
## 15. Before Coding Checklist
- [ ] Catalog + components checked
- [ ] Correct `platform/*.md` read
- [ ] Tokens only
- [ ] Loading / empty / error
- [ ] Compliance copy if Report / Ask / Membership
- [ ] A11y (touch / contrast)
- [ ] No emoji chrome; no medical / 吉凶 wording
---
## 16. Final Rule
Uncertain → **ASK**. Do not invent colors, components, or layouts.
.ai/design/platform/flutter.md
+38
View File
@@ -0,0 +1,38 @@
# Platform Contract — Flutter / Native App
Future client. Not in MVP scope unless task explicitly opens it.
Design language: [../design-system.md](../design-system.md) · Catalog names stay the same.
---
## Priority
**Performance > Native experience > Visual decoration**
---
## MUST
- Map tokens to `ThemeData` / design token classes — same hex and spacing scale.
- Native navigation patterns (Material/Cupertino as decided by ADR).
- Platform permissions (camera, photos, notifications) only with clear UX rationale.
- 60fps interactions; avoid heavy blur/shadow on low-end devices.
- Reuse catalog component names (`Button`, `ChatBubble`, `SubscriptionCard`…).
- Same compliance and domain copy rules.
---
## MUST NOT
- Invent a dark-neon “AI app” skin.
- Bypass API unlock/membership rules with local flags.
- Port Web DOM assumptions.
---
## Checklist
- [ ] Token theme 1:1 with `packages/ui`
- [ ] Catalog parity for screens in scope
- [ ] Permission + performance considered
- [ ] ADR if introducing Flutter stack officially
.ai/design/platform/h5.md
+47
View File
@@ -0,0 +1,47 @@
# Platform Contract — H5 (Mobile Web)
Primary shipping client: `apps/user-h5` (Vue 3 + Vite).
Design language: [../design-system.md](../design-system.md) · Components: [../component-catalog.md](../component-catalog.md)
---
## MUST
- Mobile-first; content column `max-width: var(--layout-max-user)` (430px), centered on large screens.
- Touch targets ≥ 44×44px.
- Prefer bottom actions (TabBar, AskInputBar, sticky CTA).
- Safe area: `env(safe-area-inset-bottom)` on TabBar / fixed footers.
- `user-scalable` / viewport per existing app shell; no desktop-only hover for essentials.
- Import tokens from `@yuxingu/ui` / `packages/ui` — no page-local brand hex.
- Data via `src/api` → `@yuxingu/sdk` only (no raw `fetch` in pages).
- Structure: `pages/` · `components/` · `layouts/` · `stores/` · `router/`.
- Loading / empty / error on every network view.
- Report / Decode / Ask: compliance disclaimer.
---
## MUST NOT
- Rely on hover tooltips for critical info.
- Use `window` APIs that break iOS WeChat/browser without fallback.
- Invent a second tab IA; tabs = Home / Explore / Ask / Companion / Mine.
- Grow Legacy root HTML (`yuxingu.html`, `pages/`) for new UI.
---
## Layout notes
- HomeWash: peach gradient body + Decode form + white ContentSheet.
- Secondary: TopBar + padded content.
- Keyboard: inputs must not hide primary CTA (scroll / visualViewport aware when needed).
---
## Checklist before Done
- [ ] Tokens only
- [ ] Catalog component reused or catalog updated
- [ ] 44px touch
- [ ] Safe area
- [ ] States + compliance if needed
- [ ] `npm run build:h5`
.ai/design/platform/mini-program.md
+47
View File
@@ -0,0 +1,47 @@
# Platform Contract — WeChat Mini Program
Client: `apps/mini-program`.
Design language shared with H5; **implementation is native mini-program**, not Vue SFC reuse.
Tokens: map `packages/ui` values into `app.wxss` / CSS variables supported by the base library — do not fork a second palette.
---
## MUST
- Use Mini Program lifecycle (`onLoad` / `onShow` / …) and `wx` APIs.
- Native navigation (`wx.navigateTo`, tabBar in `app.json`).
- Components under `components/`; pages call `services/*` only (same idea as H5 sdk).
- Support: share (`onShareAppMessage`), user authorization, payment flow when enabled.
- Touch ≥ 44px; rpx spacing aligned to 4/8/12/16… scale.
- Same IA tabs and domain copy rules as H5.
- Paywall / Membership decisions still from API — never local unlock only.
---
## MUST NOT
- `window` / `document` / DOM browser APIs.
- Import Vue SFCs from `user-h5` as runtime.
- Duplicate brand colors with new hex values.
- Build UGC广场 or Consult marketplace in MVP.
---
## Mapping
| H5 | Mini Program |
|---|---|
| Vue page | `pages/*` |
| Pinia | global / store pattern approved in playbook |
| `@yuxingu/sdk` | same package or thin `services` wrapper |
| CSS modules | `wxss` + shared token sheet |
---
## Checklist
- [ ] No browser-only APIs
- [ ] Tokens mapped 1:1
- [ ] Share / auth / pay paths considered
- [ ] Catalog names reused
.ai/design/platform/website.md
+44
View File
@@ -0,0 +1,44 @@
# Platform Contract — Website (Desktop / Marketing Web)
Future or secondary surfaces (landing, SEO pages, admin beyond mobile shell).
Brand tokens identical to [../design-system.md](../design-system.md).
---
## MUST
- SEO basics: title / description / semantic headings on marketing pages.
- Keyboard navigation and visible focus for interactive controls.
- Hover states allowed as **enhancement**; core actions still work without hover.
- Large screens: may use sidebar, table, multi-column — do not ship desktop-only flows that leave mobile broken if the same app is responsive.
- Accessibility: contrast, labels, skip/focus order.
- Admin (`apps/admin-h5`): denser List/Table OK; still use tokens (primary coral, not random admin blue).
---
## MUST NOT
- Purple SaaS gradient landing that ignores 愈心谷 peach/coral brand.
- Heavy dashboard chrome on consumer marketing hero (see design-system home budget).
- Medical / 吉凶 claims in SEO copy.
---
## Breakpoints
| Name | Guide |
|---|---|
| Mobile | &lt; 768px — follow H5 patterns |
| Tablet | 768–1024px — adapt columns, keep touch sizes |
| Desktop | &gt; 1024px — sidebar / multi-column allowed |
Do not merely scale desktop UI down to mobile.
---
## Checklist
- [ ] Tokens + brand voice
- [ ] Keyboard / focus
- [ ] Responsive behavior explicit
- [ ] SEO for public pages