admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d8be643ec75429c718fd96752f3cc35e347cb4f1
workbuddy_skills/open-design/design-systems/wechat/DESIGN.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

303 lines
6.1 KiB
Markdown
Raw Blame History

# WeChat Design System
> Category: Social & Messaging
> Brand visual language for WeChat Mini Programs, official accounts, and open ecosystem extensions.
## Brand Identity
WeChat's identity is built on simplicity, cleanness, and trust — reflecting its role as a super-app that connects people, services, and businesses.
---
## Color Palette
### Brand Colors
| Token | Hex | Usage |
|---|----|----|
| `--wechat-green` | `#07C160` | Primary brand, CTA buttons, active states |
| `--wechat-green-light` | `#10B160` | Hover state for primary actions |
| `--wechat-green-dark` | `#059050` | Pressed/active state |
### Chat Bubble Colors
| Token | Hex | Usage |
|---|----|----|
| `--wechat-bubble-self` | `#95EC69` | Outgoing message bubbles |
| `--wechat-bubble-other` | `#FFFFFF` | Incoming message bubbles |
| `--wechat-bubble-text` | `#1A1A1A` | Primary text in bubbles |
### UI Neutrals
| Token | Hex | Usage |
|---|----|----|
| `--wechat-bg` | `#EDEDED` | Page/app background |
| `--wechat-surface` | `#F7F7F7` | Card, modal surfaces |
| `--wechat-border` | `#E0E0E0` | Dividers, borders |
| `--wechat-ink` | `#1A1A1A` | Primary text |
| `--wechat-muted` | `#888888` | Secondary text, timestamps |
### Functional Colors
| Token | Hex | Usage |
|---|----|----|
| `--wechat-red` | `#FA5151` | Errors, destructive actions |
| `--wechat-orange` | `#FAB702` | Warnings |
| `--wechat-blue` | `#576B95` | Links, info states |
---
## Typography
### Font Stack
```
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
```
### Type Scale
| Role | Size | Weight | Line Height |
|---|---|---|---|
| Page Title | 18px | 600 | 1.3 |
| Section Header | 16px | 600 | 1.4 |
| Body Text | 15px | 400 | 1.6 |
| Secondary Text | 13px | 400 | 1.5 |
| Caption/Timestamp | 11px | 400 | 1.4 |
| Button Label | 16px | 500 | 1.0 |
---
## Spacing System
4px base unit.
| Token | Value |
|---|-----|
| `--space-xs` | 4px |
| `--space-sm` | 8px |
| `--space-md` | 12px |
| `--space-lg` | 16px |
| `--space-xl` | 24px |
| `--space-2xl` | 32px |
### Border Radius
| Token | Value |
|---|-----|
| `--radius-sm` | 4px |
| `--radius-md` | 8px |
| `--radius-lg` | 16px |
| `--radius-bubble` | 16px (with directional corner clip) |
| `--radius-full` | 9999px (avatars, pills) |
---
## Components
### Chat Bubble
```css
.wechat-bubble {
max-width: 70%;
padding: 10px 14px;
border-radius: var(--radius-bubble);
font-size: 15px;
line-height: 1.6;
position: relative;
}
.wechat-bubble.self {
background: var(--wechat-bubble-self);
color: var(--wechat-bubble-text);
border-top-right-radius: 4px;
margin-left: auto;
}
.wechat-bubble.other {
background: var(--wechat-bubble-other);
color: var(--wechat-bubble-text);
border-top-left-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
```
### Primary Button (Send / Confirm)
```css
.btn-wechat-primary {
background: var(--wechat-green);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: 12px 32px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.btn-wechat-primary:hover {
background: var(--wechat-green-light);
}
.btn-wechat-primary:active {
background: var(--wechat-green-dark);
}
```
### Tab Bar
```css
.tab-bar {
display: flex;
background: var(--wechat-surface);
border-top: 1px solid var(--wechat-border);
padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.tab-bar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--wechat-muted);
font-size: 10px;
cursor: pointer;
transition: color 0.15s;
}
.tab-bar-item.active {
color: var(--wechat-green);
}
.tab-bar-item svg {
width: 24px;
height: 24px;
}
```
### Message Input Bar
```css
.input-bar {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: var(--wechat-surface);
border-top: 1px solid var(--wechat-border);
}
.input-bar textarea {
flex: 1;
min-height: 36px;
max-height: 100px;
padding: 8px 12px;
background: var(--wechat-bg);
border: 1px solid var(--wechat-border);
border-radius: var(--radius-lg);
font-size: 15px;
line-height: 1.5;
resize: none;
outline: none;
}
.input-bar textarea:focus {
border-color: var(--wechat-green);
}
```
### Avatar
```css
.avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
object-fit: cover;
background: var(--wechat-border);
}
.avatar.sm { width: 32px; height: 32px; }
.avatar.lg { width: 56px; height: 56px; }
```
### Timestamp Badge
```css
.timestamp {
display: inline-block;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.08);
border-radius: var(--radius-sm);
font-size: 11px;
color: var(--wechat-muted);
text-align: center;
}
```
---
## Motion & Animation
| Token | Value |
|---|-----|
| `--duration-instant` | 100ms |
| `--duration-fast` | 200ms |
| `--duration-normal` | 300ms |
| `--ease-default` | cubic-bezier(0.25, 0.1, 0.25, 1) |
Chat message entry: fade-in + slight slide up, 200ms.
---
## Dark Mode
| Token | Light | Dark |
|---|---|---|
| `--wechat-bg` | `#EDEDED` | `#1A1A1A` |
| `--wechat-surface` | `#F7F7F7` | `#2C2C2C` |
| `--wechat-ink` | `#1A1A1A` | `#F7F7F7` |
| `--wechat-bubble-self` | `#95EC69` | `#4CAF50` |
| `--wechat-bubble-other` | `#FFFFFF` | `#2C2C2C` |
---
## Usage
```css
:root {
--wechat-green: #07C160;
--wechat-green-light: #10B160;
--wechat-green-dark: #059050;
--wechat-bubble-self: #95EC69;
--wechat-bubble-other: #FFFFFF;
--wechat-bubble-text: #1A1A1A;
--wechat-bg: #EDEDED;
--wechat-surface: #F7F7F7;
--wechat-border: #E0E0E0;
--wechat-ink: #1A1A1A;
--wechat-muted: #888888;
--wechat-red: #FA5151;
--wechat-orange: #FAB702;
--wechat-blue: #576B95;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-bubble: 16px;
--radius-full: 9999px;
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-normal: 300ms;
--ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
}
```
Reference in new issue View Git Blame Copy Permalink