diff --git a/README.md b/README.md
index 01eac36..9a5ec1e 100644
--- a/README.md
+++ b/README.md
@@ -813,57 +813,55 @@ pendingUnlistReviews = [{
 
 #### 技能详情页（SkillEditorPage）
 
-**优化后的页面结构（两行布局）：**
+**优化后的页面结构（三段式布局）：**
 
 ```
 ┌─────────────────────────────────────────────────────────┐
 │                   技能编辑页面优化                      │
 ├─────────────────────────────────────────────────────────┤
 │                                                         │
-│  ┌───────────────────────────────────────────────────┐  │
-│  │ 技能概览卡片 (两行结构)                           │  │
-│  ├───────────────────────────────────────────────────┤  │
-│  │  [图标]  ┌─────────────────────────────────────┐ │  │
-│  │         │ 第一行：技能名称                      │ │  │
-│  │         │ 第二行：👥 156  📦 v1.2.0  ⭐ 4.7    │ │  │
-│  │         └─────────────────────────────────────┘ │  │
-│  └───────────────────────────────────────────────────┘  │
+│  ┌─────────────────────────────────────────────────────┐ │
+│  │ 技能概览卡片                                       │ │
+│  ├─────────────────────────────────────────────────────┤ │
+│  │  ┌────┐  技能名称 [状态]               [编辑基本信息] │ │
+│  │  │图标│  ─────────────────────────────────────────── │ │
+│  │  │80px│  👤 1,234    ⭐ 4.8    📦 v1.2.0           │ │
+│  │  │x80 │  [分类] [标签1] [标签2] [标签3]             │ │
+│  │  └────┘  技能描述...                               │ │
+│  └─────────────────────────────────────────────────────┘ │
 │                                                         │
-│  ┌───────────────────────────────────────────────────┐  │
-│  │ 详细信息卡片 (普通卡片)                           │  │
-│  ├───────────────────────────────────────────────────┤  │
-│  │ 状态：已上架                                      │  │
-│  │ 分类：信息查询                                    │  │
-│  │ 标签：天气 查询 生活                              │  │
-│  │ 技能描述：根据城市名称查询当前天气和未来预报...   │  │
-│  │ 版本说明：新增支持未来7天预报                     │  │
-│  └───────────────────────────────────────────────────┘  │
+│  ┌─────────────────────────────────────────────────────┐ │
+│  │ 版本历史卡片                                       │ │
+│  ├─────────────────────────────────────────────────────┤ │
+│  │  版本历史                      [上传新版本]       │ │
+│  │  ┌───────────────────────────────────────────────┐ │ │
+│  │  │ 版本号   │ 状态  │ 说明  │ 时间  │ 操作     │ │ │
+│  │  │ v1.3.0  │ 通过  │ ...   │ ...   │ [下载]   │ │ │
+│  │  │ v1.2.0  │ 拒绝  │ ...   │ ...   │ [下载]   │ │ │
+│  │  └───────────────────────────────────────────────┘ │ │
+│  └─────────────────────────────────────────────────────┘ │
 │                                                         │
-│  ┌───────────────────────────────────────────────────┐  │
-│  │ 操作按钮区                                        │  │
-│  ├───────────────────────────────────────────────────┤  │
-│  │ [更新基本信息] [下架技能] [删除技能]              │  │
-│  └───────────────────────────────────────────────────┘  │
-│                                                         │
-│  ┌───────────────────────────────────────────────────┐  │
-│  │ 技能包管理区 (保持不变)                          │  │
-│  ├───────────────────────────────────────────────────┤  │
-│  │ [上传新版本] 按钮                                 │  │
-│  │ 版本历史表格                                      │  │
-│  └───────────────────────────────────────────────────┘  │
+│  ┌─────────────────────────────────────────────────────┐ │
+│  │ 管理操作卡片                                       │ │
+│  ├─────────────────────────────────────────────────────┤ │
+│  │  管理                                              │ │
+│  │                              [下架技能] [删除技能]  │ │
+│  └─────────────────────────────────────────────────────┘ │
 │                                                         │
 └─────────────────────────────────────────────────────────┘
 ```
 
 **关键改进：**
-1. **两行布局设计**：左侧技能图标，右侧两行信息结构
-2. **图标化指标**：👥 订阅数、📦 当前版本、⭐ 评分，使用图标库图标
-3. **信息分层**：
-   - 第一行：技能名称
-   - 第二行：关键指标（带图标）
-4. **详细信息卡片**：包含状态、分类、标签、技能描述和版本说明
-5. **优化视觉层次**：四层结构：技能概览 → 详细信息 → 操作按钮 → 版本管理
-6. **简化交互**：详细信息卡片为普通卡片，不可折叠
+1. **三段式布局**：头部概览、版本历史、管理操作三个独立卡片
+2. **图标简化**：移除渐变背景，直接显示图标或首字母
+3. **信息整合**：
+   - 第一行：技能名称、状态标签、编辑按钮
+   - 第二行：指标行（图标+数值，无文字说明）
+   - 第三行：标签区（分类标签在前，蓝色背景区分）
+   - 第四行：技能描述
+4. **操作按钮分组**：编辑操作在右上角，危险操作在底部管理区
+5. **上传按钮单一入口**：只在版本历史卡片标题旁显示
+6. **状态标签纯文字**：移除图标，通过颜色区分状态
 
 **版本历史表格：**
 
@@ -873,11 +871,11 @@ pendingUnlistReviews = [{
 | v1.2.0 | 优化性能... | 审核拒绝 | 2026-03-08 | [下载] 拒绝理由: 测试用例不完整 |
 | v1.1.0 | 新增支持... | 审核中 | 2026-02-20 | [撤回审核] [下载] |
 
-**技能操作按钮：**
-- 更新基本信息：始终可用
-- 上传新版本：有审核中版本时禁用，提示"存在审核中的版本，请先撤回后再上传新版本"
-- 下架技能：技能状态为已上架且无审核中版本时可用
-- 删除技能：技能状态为开发中或已下架时可用，已上架时禁用并提示"已上架的技能需要先下架才能删除"
+**技能操作规则：**
+- 编辑基本信息：始终可用，位置在概览卡片右上角
+- 上传新版本：有审核中版本时禁用，位置在版本历史卡片标题旁
+- 下架技能：技能状态为已上架且无审核中版本时可用，位置在管理卡片
+- 删除技能：技能状态为开发中或已下架时可用，已上架时禁用，位置在管理卡片
 
 #### 我的技能列表页（MySkillsPage）
 
@@ -956,4 +954,4 @@ const versionStatusMap = {
 4. **Modal 确认**：删除和下架操作需要二次确认，使用 Modal 组件展示确认对话框
 5. **Toast 提示**：操作完成后显示 Toast 提示，展示操作结果（成功/失败）
 
-*最后更新：2026-03-20*
+*最后更新：2026-03-21*
diff --git a/openspec/specs/skill-detail-page-layout/spec.md b/openspec/specs/skill-detail-page-layout/spec.md
new file mode 100644
index 0000000..88b397b
--- /dev/null
+++ b/openspec/specs/skill-detail-page-layout/spec.md
@@ -0,0 +1,91 @@
+## Purpose
+技能详情页面布局规范定义了技能开发台详情页的三段式布局结构，确保信息层级清晰，用户能够快速定位基本信息和版本历史。
+
+## ADDED Requirements
+
+### Requirement: 三段式页面布局
+技能详情页面 SHALL 采用三段式卡片布局结构，依次展示头部概览、版本历史、管理操作。
+
+#### Scenario: 页面结构展示
+- **WHEN** 用户打开技能详情页面
+- **THEN** 页面从上到下依次显示：头部概览卡片、版本历史卡片、管理操作卡片
+
+### Requirement: 返回按钮
+技能详情页面 SHALL 在页面顶部显示返回按钮，允许用户返回上一级页面。
+
+#### Scenario: 返回按钮显示
+- **WHEN** 用户查看技能详情页面
+- **THEN** 页面顶部显示返回按钮，点击后返回"我的技能"页面
+
+### Requirement: 头部概览卡片
+技能详情页面 SHALL 在页面顶部显示头部概览卡片，整合展示技能的核心信息。
+
+#### Scenario: 概览卡片信息展示
+- **WHEN** 用户查看技能详情页面
+- **THEN** 头部概览卡片包含：技能图标（80x80，无背景）、技能名称、状态标签、指标行、标签区、技能描述
+
+#### Scenario: 概览卡片第一行布局
+- **WHEN** 用户查看头部概览卡片
+- **THEN** 第一行显示：技能名称、状态标签、右上角"编辑基本信息"按钮
+
+#### Scenario: 概览卡片图标样式
+- **WHEN** 用户查看头部概览卡片
+- **THEN** 技能图标为 80x80 像素，无渐变背景，直接显示图标或首字母
+
+### Requirement: 指标行布局
+头部概览卡片 SHALL 在名称下方显示指标行，展示关键数据。
+
+#### Scenario: 指标行内容
+- **WHEN** 用户查看头部概览卡片
+- **THEN** 指标行依次显示：订阅数（图标+数值）、评分（图标+数值）、当前版本号（图标+版本号）
+
+#### Scenario: 指标行样式
+- **WHEN** 用户查看头部概览卡片
+- **THEN** 指标行与名称之间有分隔线，指标项之间用空格分隔
+
+### Requirement: 标签区布局
+头部概览卡片 SHALL 在指标行下方显示标签区。
+
+#### Scenario: 标签区内容
+- **WHEN** 用户查看头部概览卡片
+- **THEN** 标签区第一个位置显示分类标签（蓝色背景），后面跟随技能的所有标签
+
+#### Scenario: 分类标签样式
+- **WHEN** 用户查看标签区
+- **THEN** 分类标签使用蓝色背景（#EFF6FF）和蓝色文字（#3B82F6），圆角样式
+
+### Requirement: 技能描述
+头部概览卡片 SHALL 在标签区下方显示技能描述。
+
+#### Scenario: 技能描述展示
+- **WHEN** 用户查看头部概览卡片
+- **THEN** 标签区下方显示技能描述文字
+
+### Requirement: 版本历史卡片
+技能详情页面 SHALL 在头部概览卡片下方显示版本历史卡片。
+
+#### Scenario: 版本历史卡片展示
+- **WHEN** 用户查看技能详情页面
+- **THEN** 版本历史卡片包含标题"版本历史"和版本历史表格
+
+#### Scenario: 版本历史操作按钮
+- **WHEN** 用户查看版本历史卡片
+- **THEN** 卡片标题栏右侧显示"上传新版本"按钮
+
+### Requirement: 管理操作卡片
+技能详情页面 SHALL 在版本历史卡片下方显示管理操作卡片。
+
+#### Scenario: 管理操作卡片展示
+- **WHEN** 用户查看技能详情页面
+- **THEN** 管理操作卡片包含标题"管理"和操作按钮区
+
+#### Scenario: 管理操作按钮展示
+- **WHEN** 用户查看管理操作卡片
+- **THEN** 卡片内直接展示"下架技能"和"删除技能"按钮
+
+### Requirement: 卡片间距规范
+技能详情页面的卡片之间 SHALL 保持一致的间距。
+
+#### Scenario: 卡片间距
+- **WHEN** 用户查看技能详情页面
+- **THEN** 每个卡片之间有 16px 的垂直间距
diff --git a/openspec/specs/skill-info-collapsible-panel/spec.md b/openspec/specs/skill-info-collapsible-panel/spec.md
deleted file mode 100644
index 6544850..0000000
--- a/openspec/specs/skill-info-collapsible-panel/spec.md
+++ /dev/null
@@ -1,35 +0,0 @@
-## Purpose
-技能信息折叠面板用于组织技能详细信息，解决信息重复显示问题，提供更好的信息组织和用户体验。
-
-## ADDED Requirements
-
-### Requirement: 技能信息折叠面板
-技能编辑页面 SHALL 提供可折叠的信息面板，用于组织技能详细信息，解决信息重复显示问题。
-
-#### Scenario: 折叠面板默认状态
-- **WHEN** 用户打开技能编辑页面
-- **THEN** 基本信息折叠面板默认展开，显示技能分类、标签、当前版本、版本说明和技能描述
-
-#### Scenario: 折叠面板收起/展开交互
-- **WHEN** 用户点击折叠面板的"收起"按钮
-- **THEN** 面板内容隐藏，按钮文字变为"展开"
-
-#### Scenario: 折叠面板展开交互
-- **WHEN** 用户点击折叠面板的"展开"按钮
-- **THEN** 面板内容显示，按钮文字变为"收起"
-
-#### Scenario: 信息网格布局
-- **WHEN** 用户查看展开的折叠面板
-- **THEN** 信息以网格布局展示，包含分类、标签、当前版本、版本说明和技能描述字段
-
-#### Scenario: 标签显示格式
-- **WHEN** 用户查看折叠面板中的标签字段
-- **THEN** 标签以圆角标签样式显示，多个标签之间用空格分隔
-
-#### Scenario: 版本说明显示
-- **WHEN** 用户查看折叠面板中的版本说明字段
-- **THEN** 显示当前版本的说明文字
-
-#### Scenario: 技能描述显示
-- **WHEN** 用户查看折叠面板中的技能描述字段
-- **THEN** 显示完整的技能描述文字，支持多行显示
\ No newline at end of file
diff --git a/openspec/specs/skill-overview-card/spec.md b/openspec/specs/skill-overview-card/spec.md
index 0d0b81d..a89e179 100644
--- a/openspec/specs/skill-overview-card/spec.md
+++ b/openspec/specs/skill-overview-card/spec.md
@@ -8,28 +8,48 @@
 
 #### Scenario: 卡片布局结构
 - **WHEN** 用户打开技能编辑页面
-- **THEN** 页面顶部显示技能概览卡片，包含技能图标、名称、状态标签和关键指标
+- **THEN** 页面顶部显示技能概览卡片，包含技能图标、名称、状态标签、指标行、标签区（含分类）、技能描述和右上角操作按钮
 
 #### Scenario: 技能图标显示
 - **WHEN** 用户查看技能概览卡片
-- **THEN** 卡片左侧显示技能图标，图标尺寸为80x80像素，圆角16像素
+- **THEN** 卡片左侧显示技能图标，图标尺寸为80x80像素，无背景，直接显示图标或首字母
 
-#### Scenario: 技能名称显示
+#### Scenario: 技能名称和状态显示
 - **WHEN** 用户查看技能概览卡片
-- **THEN** 卡片右侧顶部显示技能名称，字体大小为24px，字体加粗
+- **THEN** 卡片右侧第一行显示技能名称、状态标签，名称右侧显示"编辑基本信息"按钮
 
-#### Scenario: 状态标签显示
+#### Scenario: 状态标签样式
 - **WHEN** 用户查看技能概览卡片
-- **THEN** 技能名称下方显示状态标签，标签样式与现有状态标签系统保持一致
+- **THEN** 状态标签为纯文字样式，不使用图标，通过颜色区分状态类型
 
-#### Scenario: 关键指标显示
+#### Scenario: 指标行显示
 - **WHEN** 用户查看技能概览卡片
-- **THEN** 状态标签右侧显示关键指标，包括订阅数和评分，指标之间用分隔符分隔
+- **THEN** 名称下方显示指标行，包含订阅数（图标+数值）、评分（图标+数值）、当前版本号（图标+版本号）
+
+#### Scenario: 指标行样式
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 指标行与名称之间有分隔线，指标项不显示文字说明（如"订阅"、"评分"），图标本身已足够表达含义
+
+#### Scenario: 标签区显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 指标行下方显示标签区，第一个位置显示分类标签（蓝色背景），后面跟随技能的所有标签
+
+#### Scenario: 分类标签样式
+- **WHEN** 用户查看标签区
+- **THEN** 分类标签使用蓝色背景（#EFF6FF）和蓝色文字（#3B82F6），圆角胶囊样式，与其他标签区分
+
+#### Scenario: 技能描述显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 标签区下方显示技能描述
+
+#### Scenario: 操作按钮显示
+- **WHEN** 用户查看技能概览卡片
+- **THEN** 卡片右上角只显示"编辑基本信息"操作按钮
 
 #### Scenario: 卡片视觉样式
 - **WHEN** 用户查看技能概览卡片
-- **THEN** 卡片具有白色背景、圆角12像素、轻微阴影效果，与页面其他卡片样式一致
+- **THEN** 卡片具有白色背景、圆角12像素、轻微阴影效果
 
 #### Scenario: 响应式布局
 - **WHEN** 用户在较小屏幕设备上查看技能概览卡片
-- **THEN** 卡片内容自动调整布局，确保信息清晰可读
\ No newline at end of file
+- **THEN** 卡片内容自动调整布局，确保信息清晰可读
diff --git a/src/pages/developer/SkillEditorPage.jsx b/src/pages/developer/SkillEditorPage.jsx
index 0805c3d..696f36b 100644
--- a/src/pages/developer/SkillEditorPage.jsx
+++ b/src/pages/developer/SkillEditorPage.jsx
@@ -53,99 +53,66 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
                 <FiChevronLeft /> 返回我的技能
             </div>
             
-            {/* 1. 技能概览卡片（两行结构） */}
+            {/* 1. 技能概览卡片（三段式布局第一段） */}
             <div className="skill-overview-card">
                 <div className="skill-icon">{skill.icon || skill.name.charAt(0)}</div>
                 <div className="skill-header">
-                    {/* 第一行：技能名称 */}
-                    <h2 className="skill-name">{skill.name}</h2>
-                    
-                    {/* 第二行：关键指标（带图标） */}
+                    {/* 第一行：技能名称 + 状态 + 右上角操作按钮 */}
+                    <div className="skill-name-row">
+                        <h2 className="skill-name">{skill.name}</h2>
+                        <span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
+                            {skillStatusMap[skill.status]?.text || skill.status}
+                        </span>
+                        <div className="skill-actions">
+                            <button className="btn btn-primary btn-sm" onClick={() => onUpdateInfo && onUpdateInfo(skill.id)}>编辑基本信息</button>
+                        </div>
+                    </div>
+
+                    {/* 第二行：指标行（带分隔线） */}
                     <div className="skill-metrics-row">
                         <div className="metric-item">
                             <FiUsers className="metric-icon" />
                             <span className="metric-value">{skill.installs || 0}</span>
                         </div>
-                        <div className="metric-item">
-                            <FiPackage className="metric-icon" />
-                            <span className="metric-value">{skill.version || 'v1.0.0'}</span>
-                        </div>
                         <div className="metric-item">
                             <FiStar className="metric-icon" />
                             <span className="metric-value">{skill.rating || 0}</span>
                         </div>
+                        <div className="metric-item">
+                            <FiPackage className="metric-icon" />
+                            <span className="metric-value">{skill.version || 'v1.0.0'}</span>
+                        </div>
+                    </div>
+
+                    {/* 第三行：标签区 */}
+                    <div className="skill-tags-row">
+                        <span className="skill-category-tag">{skill.category}</span>
+                        {skill.tags.map(tag => (
+                            <span key={tag} className="dev-detail-tag">{tag}</span>
+                        ))}
+                    </div>
+
+                    {/* 第四行：技能描述 */}
+                    <div className="skill-desc-row">
+                        <p className="skill-desc-text">{skill.desc}</p>
                     </div>
                 </div>
             </div>
 
-            {/* 2. 详细信息卡片（普通卡片，不可折叠） */}
-            <div className="info-card">
+            {/* 2. 版本历史卡片（三段式布局第二段） */}
+            <div className="card" style={{ marginTop: '16px' }}>
                 <div className="card-header">
-                    <h3>详细信息</h3>
+                    <div className="card-title">版本历史</div>
+                    <button
+                        className="btn btn-primary btn-sm"
+                        onClick={() => onUploadNewVersion(skill.name)}
+                        disabled={skill.hasPendingReview}
+                        title={skill.hasPendingReview ? '存在审核中的版本，请先撤回后再上传新版本' : ''}
+                    >
+                        <FiUpload /> 上传新版本
+                    </button>
                 </div>
                 <div className="card-body">
-                    <div className="info-grid">
-                        <div className="info-item">
-                            <label>状态</label>
-                            <span className={`status ${skillStatusMap[skill.status]?.className || 'status-stopped'}`}>
-                                {skillStatusMap[skill.status]?.text || skill.status}
-                            </span>
-                        </div>
-                        <div className="info-item">
-                            <label>分类</label>
-                            <span>{skill.category}</span>
-                        </div>
-                        <div className="info-item full-width">
-                            <label>标签</label>
-                            <div className="tags">
-                                {skill.tags.map(tag => (
-                                    <span key={tag} className="dev-detail-tag">{tag}</span>
-                                ))}
-                            </div>
-                        </div>
-                        <div className="info-item full-width">
-                            <label>技能描述</label>
-                            <p>{skill.desc}</p>
-                        </div>
-                        <div className="info-item full-width">
-                            <label>版本说明</label>
-                            <span>{currentVersion?.desc || '暂无版本说明'}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* 3. 操作按钮区 */}
-            <div className="action-buttons">
-                <button className="btn btn-primary" onClick={() => onUpdateInfo && onUpdateInfo(skill.id)}>更新基本信息</button>
-                {skill.status === 'published' && (
-                    <button className="btn btn-danger" onClick={handleTogglePublish}>下架技能</button>
-                )}
-                <button
-                    className="btn btn-danger"
-                    onClick={() => setDeleteSkillModal(true)}
-                    disabled={skill.status === 'published'}
-                    title={skill.status === 'published' ? '已上架的技能需要先下架才能删除' : ''}
-                >
-                    删除技能
-                </button>
-            </div>
-            <div className="card" style={{ marginTop: '24px' }}>
-                <div className="card-header">
-                    <div className="card-title">技能包管理</div>
-                </div>
-                <div className="card-body">
-                    <div style={{ display: 'flex', gap: '12px', marginBottom: '24px' }}>
-                        <button
-                            className="btn btn-primary"
-                            onClick={() => onUploadNewVersion(skill.name)}
-                            disabled={skill.hasPendingReview}
-                            title={skill.hasPendingReview ? '存在审核中的版本，请先撤回后再上传新版本' : ''}
-                        >
-                            <FiUpload /> 上传新版本
-                        </button>
-                    </div>
-                    <h4 style={{ marginBottom: '12px' }}>版本历史</h4>
                     <div className="table-wrapper" style={{ margin: 0, padding: 0 }}>
                         <table className="table" style={{ tableLayout: 'fixed' }}>
                             <colgroup>
@@ -200,6 +167,29 @@ function SkillEditorPage({ skillId, onBack, onUploadNewVersion, onUpdateInfo })
                     </div>
                 </div>
             </div>
+
+            {/* 3. 管理操作卡片（三段式布局第三段） */}
+            <div className="card manage-card" style={{ marginTop: '16px' }}>
+                <div className="card-header">
+                    <div className="card-title">管理</div>
+                </div>
+                <div className="card-body">
+                    <div className="manage-actions">
+                        {skill.status === 'published' && (
+                            <button className="btn btn-danger" onClick={handleTogglePublish}>下架技能</button>
+                        )}
+                        <button
+                            className="btn btn-danger"
+                            onClick={() => setDeleteSkillModal(true)}
+                            disabled={skill.status === 'published'}
+                            title={skill.status === 'published' ? '已上架的技能需要先下架才能删除' : ''}
+                        >
+                            删除技能
+                        </button>
+                    </div>
+                </div>
+            </div>
+
             <Modal
                 visible={deleteSkillModal}
                 title="确认删除"
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 461b102..bf9487a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -474,71 +474,37 @@
 
 /* ============ 状态标签组件 ============ */
 .status {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
+    display: inline-block;
     padding: 4px 10px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.status::before {
-    content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    /* 移除 gap 和 ::before 伪元素图标 */
 }
 
 .status-running {
-    background: var(--color-success-light);
-    color: var(--color-success);
-}
-
-.status-running::before {
-    background: var(--color-success);
+    background: #D1FAE5;
+    color: #065F46;
 }
 
 .status-stopped {
-    background: var(--color-bg-3);
-    color: var(--color-text-3);
-}
-
-.status-stopped::before {
-    background: var(--color-text-4);
+    background: #F1F5F9;
+    color: #475569;
 }
 
 .status-starting {
-    background: var(--color-warning-light);
-    color: var(--color-warning);
-}
-
-.status-starting::before {
-    background: var(--color-warning);
-    animation: pulse 1.5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(0.8); }
+    background: #DBEAFE;
+    color: #1E40AF;
 }
 
 .status-error {
-    background: var(--color-danger-light);
-    color: var(--color-danger);
-}
-
-.status-error::before {
-    background: var(--color-danger);
+    background: #FEE2E2;
+    color: #991B1B;
 }
 
 .status-warning {
-    background: var(--color-warning-light);
-    color: var(--color-warning);
-}
-
-.status-warning::before {
-    background: var(--color-warning);
+    background: #FEF3C7;
+    color: #92400E;
 }
 
 /* 成员角色标签 */
diff --git a/src/styles/pages/_developer.scss b/src/styles/pages/_developer.scss
index 21cffd6..9a29f3c 100644
--- a/src/styles/pages/_developer.scss
+++ b/src/styles/pages/_developer.scss
@@ -135,7 +135,7 @@
 
 /* ============ 技能编辑页面优化样式 ============ */
 
-/* 技能概览卡片（两行结构） */
+/* 技能概览卡片（三段式布局第一段） */
 .skill-overview-card {
   display: flex;
   gap: 20px;
@@ -144,51 +144,68 @@
   border-radius: 12px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   margin-bottom: 16px;
-  
-  align-items: center;
-  
+  align-items: flex-start;
+
   .skill-icon {
     width: 80px;
     height: 80px;
-    border-radius: 16px;
-    background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
-    font-size: 36px;
+    font-size: 48px;
     flex-shrink: 0;
   }
-  
+
   .skill-header {
     flex: 1;
-    
-    /* 第一行：技能名称 */
-    .skill-name {
-      margin: 0 0 12px 0;
-      font-size: 24px;
-      font-weight: 700;
-      color: #1E293B;
+    min-width: 0;
+    display: block !important; /* 覆盖全局样式，确保子元素垂直排列 */
+
+    /* 第一行：技能名称 + 状态 + 作者 + 操作按钮 */
+    .skill-name-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px 12px;
+      margin-bottom: 16px;
+
+      .skill-name {
+        margin: 0;
+        font-size: 24px;
+        font-weight: 700;
+        color: #1E293B;
+        flex-shrink: 0;
+      }
+
+      .skill-actions {
+        margin-left: auto;
+        display: flex;
+        gap: 8px;
+        flex-shrink: 0;
+      }
     }
-    
-    /* 第二行：关键指标 */
+
+    /* 第二行：指标行（带分隔线） */
     .skill-metrics-row {
       display: flex;
       align-items: center;
-      gap: 24px;
-      
+      gap: 20px;
+      padding: 12px 0;
+      border-top: 1px solid #E2E8F0;
+      margin-bottom: 16px;
+
       .metric-item {
         display: flex;
         align-items: center;
         gap: 6px;
-        
+
         .metric-icon {
           width: 16px;
           height: 16px;
           opacity: 0.7;
           color: #64748B;
         }
-        
+
         .metric-value {
           font-size: 14px;
           font-weight: 500;
@@ -196,78 +213,46 @@
         }
       }
     }
-  }
-}
 
-/* 详细信息卡片（普通卡片） */
-.info-card {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 16px;
-  overflow: hidden;
-  
-  .card-header {
-    padding: 16px 24px;
-    border-bottom: 1px solid #E2E8F0;
-    
-    h3 {
-      margin: 0;
-      font-size: 16px;
-      font-weight: 600;
-      color: #1E293B;
+    /* 第三行：标签区 */
+    .skill-tags-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-bottom: 16px;
+
+      .skill-category-tag {
+        padding: 4px 12px;
+        background: #EFF6FF;
+        color: #3B82F6;
+        border-radius: 999px;
+        font-size: 13px;
+        font-weight: 500;
+      }
     }
-  }
-  
-  .card-body {
-    padding: 24px;
-    
-    .info-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
-      
-      .info-item {
-        &.full-width {
-          grid-column: 1 / -1;
-        }
-        
-        label {
-          display: block;
-          font-size: 13px;
-          font-weight: 500;
-          color: #64748B;
-          margin-bottom: 6px;
-          text-transform: uppercase;
-          letter-spacing: 0.5px;
-        }
-        
-        span, p {
-          font-size: 14px;
-          color: #1E293B;
-          line-height: 1.5;
-          margin: 0;
-        }
-        
-        .tags {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 6px;
-        }
+
+    /* 第四行：技能描述 */
+    .skill-desc-row {
+      .skill-desc-text {
+        font-size: 14px;
+        color: #475569;
+        line-height: 1.6;
+        margin: 0;
       }
     }
   }
 }
 
-/* 操作按钮区 */
-.action-buttons {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 24px;
+/* 管理操作卡片（三段式布局第三段） */
+.manage-card {
+  .card-body {
+    .manage-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-start;
+    }
+  }
 }
 
 /* 响应式设计 */
@@ -276,30 +261,108 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
-    
+
     .skill-icon {
       width: 60px;
       height: 60px;
-      font-size: 28px;
+      font-size: 36px;
     }
-    
+
     .skill-header {
-      .skill-name {
-        font-size: 20px;
+      width: 100%;
+
+      .skill-name-row {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+
+        .skill-name {
+          font-size: 20px;
+        }
+
+        .skill-actions {
+          margin-left: 0;
+          margin-top: 8px;
+          width: 100%;
+        }
+
+        .skill-actions .btn {
+          flex: 1;
+        }
       }
-      
+
       .skill-metrics-row {
         flex-wrap: wrap;
-        gap: 16px;
+        gap: 12px;
+      }
+
+      .skill-tags-row {
+        flex-direction: column;
+        align-items: flex-start;
       }
     }
   }
-  
-  .info-grid {
-    grid-template-columns: 1fr !important;
+
+  .manage-card {
+    .manage-actions {
+      flex-direction: column;
+
+      .btn {
+        width: 100%;
+      }
+    }
   }
-  
-  .action-buttons {
+}
+@media (max-width: 768px) {
+  .skill-overview-card {
     flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+
+    .skill-icon {
+      width: 60px;
+      height: 60px;
+      font-size: 36px;
+    }
+
+    .skill-header {
+      width: 100%;
+
+      .skill-name-row {
+        flex-wrap: wrap;
+        gap: 8px;
+
+        .skill-name {
+          font-size: 20px;
+          width: 100%;
+        }
+
+        .skill-actions {
+          width: 100%;
+          margin-left: 0;
+          margin-top: 8px;
+        }
+      }
+
+      .skill-metrics-row {
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+
+      .skill-tags-row {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .manage-card {
+    .manage-actions {
+      flex-direction: column;
+
+      .btn {
+        width: 100%;
+      }
+    }
   }
 }
\ No newline at end of file