goplus
diff --git a/‎ui/README.md‎
Lines changed: 42 additions & 45 deletions b/‎ui/README.md‎
Lines changed: 42 additions & 45 deletions
diff --git a/‎ui/README.zh.md‎
Lines changed: 62 additions & 0 deletions b/‎ui/README.zh.md‎
Lines changed: 62 additions & 0 deletions
@@ -1,65 +1,62 @@
-# UI 设计工程系统
+# UI Design System
 
-本仓库是一个「设计工程系统」，而不仅仅是「存放设计稿」的地方。
+This repository stores design assets for the Builder project.
 
-我们通过引入 **设计左移（Shift Left in Design）** 的理念，将设计纳入工程主流程，使设计资产具备：可版本化、可审查、可追溯、可复用、可自动校验。
+This is a "Design Engineering System", not just a place to store design files.
 
-目标是提升团队的 **端到端试错能力**，让问题在设计阶段暴露，而不是在开发或上线后修复。
+By adopting the **Shift Left in Design** philosophy, we integrate design into the engineering workflow, making design assets versionable, reviewable, traceable, reusable, and automatically verifiable.
 
-## 仓库结构
+The goal is to enhance the team's **end-to-end iteration capability**, exposing issues during the design phase rather than fixing them after development or release.
+
+## Directory Structure
 
 ```text
-docs/                         # 规范文档
-system/                       # 设计系统
-templates/                    # 设计模板
-features/                     # 业务设计文件（给开发看）
-archive/                      # 废弃设计
+ui/
+├── components/          # Reusable design components
+│   └── spx/
+│       └── builder-component.lib.pen
+├── pages/               # Page designs
+│   └── spx/
+│       ├── community-*.pen
+│       ├── *-editor.pen
+│       └── tutorial.pen
+├── docs/                # Documentation
+├── images/              # Image assets
+└── archive/             # Deprecated designs
 ```
 
-## 目录说明
-
-`docs/` 包含：
-
-- 设计原则
-- 命名规范
-- pr-checklist
-- pr-template
-- 工作流说明
-
-`system/` 包含：
+## Quick Start
 
-- Design Tokens
+### For Designers
 
-`templates/` 包含：
+1. Component library: [`components/spx/builder-component.lib.pen`](components/spx/builder-component.lib.pen)
+2. Create page designs in `pages/spx/`
+3. Submit changes via PR
 
-- 页面结构模板
-- 交互模板
+### For Developers
 
-`features/`：
+Page designs are in `pages/spx/`. Each `.pen` file corresponds to a feature or page.
 
-每个功能一个目录，必须包含：
+## Documentation
 
-- 设计文件（Pencil 文件 .json .pen）
-- 设计说明
-- 可交互的 Demo html
+| Document | Description |
+| -------- | ----------- |
+| [Team Workflow](docs/team-workflow.md) | Collaboration process |
+| [AI Design Workflow](docs/ai-design-workflow.md) | Using AI to reproduce Figma designs |
+| [PR Template](docs/pr-template.md) | PR title and description format |
+| [Design Review Checklist](docs/design-review-checklist.md) | Pre-submission checklist |
 
-`archive/`：
-
-废弃或历史版本设计。
-
-## 工作流及原则
+## Workflow
 
 ```text
-需求 → 设计 → Design PR → Review → 合并
-                              ↓ 开发实现 → Code PR
+Issue → Design (.pen)
+              │
+              ├─ Simple → AI generates code → PR → Dev review & merge
+              │
+              └─ Complex → Design commit → Dev implements → Code PR
 ```
 
-- 所有设计变更必须通过 PR
-- 所有代码 PR 必须关联对应设计
-- 未合并的设计，不允许开发实现
-
-如果你要修改设计，请先阅读：
+## File Naming
 
-- 📖 [docs/team-workflow.md](docs/team-workflow.md)
-- 📖 [docs/design-review-checklist.md](docs/design-review-checklist.md)
-- 📖 [docs/pr-template.md](docs/pr-template.md)
+- Use kebab-case: `community-home.pen`
+- Pages: `{feature-name}.pen`
@@ -0,0 +1,62 @@
+# UI 设计系统
+
+本仓库存放 Builder 项目的设计资源。
+
+这是一个「设计工程系统」，而不仅仅是「存放设计稿」的地方。
+
+我们通过引入 **设计左移（Shift Left in Design）** 的理念，将设计纳入工程主流程，使设计资产具备可版本化、可审查、可追溯、可复用、可自动校验的特性。
+
+目标是提升团队的 **端到端试错能力**，让问题在设计阶段暴露，而不是在开发或上线后修复。
+
+## 目录结构
+
+```text
+ui/
+├── components/          # 可复用设计组件
+│   └── spx/
+│       └── builder-component.lib.pen
+├── pages/               # 页面设计
+│   └── spx/
+│       ├── community-*.pen
+│       ├── *-editor.pen
+│       └── tutorial.pen
+├── docs/                # 文档
+├── images/              # 图片资源
+└── archive/             # 已废弃的设计
+```
+
+## 快速开始
+
+### 设计师
+
+1. 组件库：[`components/spx/builder-component.lib.pen`](components/spx/builder-component.lib.pen)
+2. 在 `pages/spx/` 中创建页面设计
+3. 通过 PR 提交更改
+
+### 开发者
+
+页面设计位于 `pages/spx/`。每个 `.pen` 文件对应一个功能或页面。
+
+## 文档
+
+| 文档 | 说明 |
+| ---- | ---- |
+| [团队工作流程](docs/team-workflow.md) | 协作流程 |
+| [AI 设计工作流程](docs/ai-design-workflow.md) | 使用 AI 还原 Figma 设计 |
+| [PR 模板](docs/pr-template.md) | PR 标题和描述格式 |
+| [设计审查清单](docs/design-review-checklist.md) | 提交前检查清单 |
+
+## 工作流程
+
+```text
+Issue → 设计 (.pen)
+              │
+              ├─ 简单需求 → AI 生成代码 → PR → 开发审查并合并
+              │
+              └─ 复杂需求 → 设计提交 → 开发实现 → 代码 PR
+```
+
+## 文件命名
+
+- 使用 kebab-case：`community-home.pen`
+- 页面：`{feature-name}.pen`