@gong-ym/ai-spec-auto 0.2.3

package/.agents/rules/profiles/node-tooling/13-/344/273/243/347/240/201/346/240/274/345/274/217/345/214/226/344/270/216/346/243/200/346/237/245.md

@@ -0,0 +1,55 @@
+---
+alwaysApply: false
+description: Node.js 工具仓的代码格式化与静态检查规范，包括 ESLint、Prettier 的工具链职责、配置约定与开发流程集成。当配置或调整 lint/format 工具时读取此规则。
+---
+
+# 代码格式化与检查（Node.js Tooling）
+
+## 工具链
+
+| 工具 | 职责 | 配置文件 |
+|------|------|----------|
+| **Prettier** | 代码格式化（缩进、引号、分号等） | `.prettierrc.json` |
+| **ESLint** | 代码质量与风格检查 | `eslint.config.js` / `.eslintrc.cjs` |
+
+## Prettier 规则
+
+| 配置项 | 值 | 说明 |
+|--------|-----|------|
+| `semi` | `true` | 语句末尾加分号 |
+| `tabWidth` | `2` | 缩进 2 空格 |
+| `singleQuote` | `true` | 使用单引号 |
+| `printWidth` | `100` | 单行最大宽度 |
+| `trailingComma` | `"es5"` | 对象/数组末尾加逗号 |
+| `endOfLine` | `"auto"` | 自动适配换行符 |
+
+## ESLint 核心规则
+
+```js
+// eslint.config.js（ESLint 9 flat config）
+export default [
+  {
+    files: ['src/**/*.ts'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': 'error',
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+    },
+  },
+];
+```
+
+## 开发流程集成
+
+### 提交前自动检查（husky + lint-staged）
+
+```json
+{
+  "*.{ts,js,json}": ["eslint --fix", "prettier --write"]
+}
+```
+
+### CI 集成
+
+- CI 流水线必须包含 `lint`、`typecheck`、`test` 三个检查步骤
+- 任一步骤失败则阻断 PR 合并

package/.agents/rules/profiles/react/01-/351/241/271/347/233/256/346/246/202/350/277/260.md

@@ -0,0 +1,29 @@
+---
+alwaysApply: false
+description: 项目定位与技术栈概览。当需要了解项目背景、使用的技术栈时读取此规则。
+---
+
+# 项目概述
+
+## 项目定位
+
+一个基于 React + TypeScript 的单页应用（SPA）。
+
+> **与 JavaScript 存量项目的关系**：本文件默认描述团队推荐的 **React + TypeScript**。若 `package.json` 的 `dependencies` / `devDependencies` 中**未**声明 `typescript`，以「初始化项目规范」技能生成的 **01-项目概述.md** 为准，并遵循 **02-编码规范** 中的 JavaScript 小节。
+
+## 技术栈
+
+| 领域 | 技术 | 说明 |
+|------|------|------|
+| UI 框架 | React ^18.3.1 | 强制使用 |
+| 类型系统 | TypeScript 5.x | 推荐；新代码优先 TS。纯 JS 项目见 02-编码规范 |
+| 构建工具 | Vite 5.x | 通过 @shentu/cli 封装 |
+| 路由管理 | React Router ^6.30.2 | - |
+| 状态管理 | Zustand ^5.0.8 | Zustand（推荐）或 Redux，详见 07-状态管理 |
+| 组件库 | Ant Design 6.1.0+ | 所有交互 UI 必须基于 Antd 二次封装 |
+| 样式方案 | SCSS Modules, classnames | 强制使用，禁止全局样式 |
+| HTTP 请求 | @koi-design/vix-tools (request) | 统一请求封装，详见 05-API规范 |
+| 基础库 | @shentu/cli, @shentu/core | 脚手架与核心工具库 |
+| Hooks 工具 | ahooks 3.9.6 | 编写或封装 hooks 时，优先考虑是否有可使用的 ahooks |
+| 工具函数 | lodash-es 4.17.21 | 编写或封装 函数 时，优先考虑是否有可使用的 lodash 函数 |
+| 时间工具 | dayjs 1.11.19 | 涉及日期时间的处理统一用 dayjs |

package/.agents/rules/profiles/react/03-/351/241/271/347/233/256/347/273/223/346/236/204.md

@@ -0,0 +1,104 @@
+---
+alwaysApply: false
+description: 项目的目录结构规范，定义了 src 目录下各目录的用途与约束（禁止新建非标准目录）。当需要确定代码应放在哪个目录时读取此规则。
+---
+
+# 项目结构（NON-NEGOTIABLE）
+
+## 目录结构
+
+```
+src/
+├── api/           # 接口封装，按业务模块划分
+├── assets/        # 静态资源，按模块分子目录（如 login/、icon/、common/）
+├── components/    # 可复用 UI 组件
+├── config/        # 配置文件（如 requestConfig.ts）
+├── constants/     # 业务常量、枚举
+├── hooks/         # 自定义 Hook
+├── layouts/       # 布局组件（如 BasicLayout、BlankLayout）
+├── libs/          # 独立封装模块（如 crypto、富文本适配等较重的功能模块）
+├── mock/          # Mock 数据，按业务模块划分
+├── pages/         # 页面视图
+├── router/        # 路由配置与导航守卫（modules/ 按模块拆分）
+├── store/         # 状态管理（Zustand 或 Redux，二选一）
+│   └── modules/   # 按业务模块划分，每个模块含 index.ts + type.ts
+├── styles/        # 全局样式、变量、mixins
+├── types/         # 全局类型声明与 DTO
+├── utils/         # 通用工具函数
+└── 根级文件        # App.tsx / App.jsx、main.tsx / main.js 等（以仓库实际为准）
+```
+
+## 结构约束（禁止在 src 下新建非标准目录）
+
+| 类型 | 目录 | 规范 |
+|------|------|------|
+| 接口 | `src/api/` | 按模块划分，每个模块含请求函数；类型定义放 `src/api/types/` |
+| 静态资源 | `src/assets/<module>/` | 按模块分子目录，如 `login/`、`icon/`、`common/` |
+| 组件 | `src/components/` | 每个组件独立目录，导出到 `index.ts` |
+| 配置 | `src/config/` | 配置文件，如 `requestConfig.ts` |
+| 常量 | `src/constants/` | 按模块划分，所有模块导出到 `index.ts` |
+| Hook | `src/hooks/` | 自定义 Hook，`useXxx.ts` 命名 |
+| 布局 | `src/layouts/` | 布局组件（如 BasicLayout、BlankLayout），供路由配置引用 |
+| 脚本模块 | `src/libs/` | 独立封装的较重功能模块，每个模块 `<lib-name>/index.ts` |
+| Mock | `src/mock/` | Mock 数据，按业务模块划分 `<module>.ts` |
+| 页面 | `src/pages/` | 每个页面独立目录，使用 `kebab-case` 命名 |
+| 路由 | `src/router/modules/` | 按业务模块拆分路由配置，每个模块一个 `.ts` 文件 |
+| 状态 | `src/store/modules/` | 按业务模块划分子目录，每个含 `index.ts` + `type.ts`（Zustand 暴露 `useXxxStore` / Redux 导出 reducer + actions） |
+| 全局样式 | `src/styles/` | 全局样式、变量、mixins |
+| 全局类型 | `src/types/` | 全局共享类型与 DTO，模块私有类型就近放置 |
+| 工具 | `src/utils/` | 轻量工具函数，按功能模块划分，所有模块导出到 `index.ts` |
+
+## 页面目录内的组件放置规则
+
+页面专用组件放在 `src/pages/<page-name>/components/` 目录：
+
+```
+src/pages/<page-name>/
+  ├─ components/           # 仅供当前页面使用的子组件
+  │   └─ xxx/
+  │       ├─ index.tsx
+  │       └─ index.module.scss
+  ├─ index.tsx             # 页面主组件
+  └─ index.module.scss     # 页面样式
+```
+
+**判断标准**：
+
+- 通用组件：多处复用、业务无关 → `src/components/`
+- 页面级组件：仅单页使用 → 页面目录下的 `components/`
+
+**约束**：`src/components/` 只存放通用组件，禁止将仅单页使用的组件放入。
+
+## Mock 数据策略
+
+当后端接口未完成时：
+
+### 目录结构
+
+```
+src/
+  ├─ mock/
+  │   └─ <module>.ts        # mock 数据文件，按业务模块划分
+  ├─ api/
+  │   └─ <module>.ts        # 请求函数（调用 mock 数据或真实接口）
+  └─ types/
+      └─ <module>.ts        # 全局类型定义
+```
+
+### 原则
+
+1. Mock 数据：创建 `src/mock/<module>.ts`，存放模拟数据
+2. 接口文件：创建 `src/api/<module>.ts`，包含请求函数（开发阶段可引用 mock）
+3. 类型定义：使用 `src/types/<module>.ts`（单文件），不创建目录
+4. 状态管理：不创建独立 store，必要时使用组件内 state
+5. 优先级：UI 还原度优先于功能完整
+
+### 禁止
+
+- 禁止创建复杂的 mock 数据结构
+- 禁止创建独立的 store（接口未完成时）
+- 禁止预留过多扩展字段
+
+## 脚本与入口扩展名
+
+上表与目录树中的 `.ts`、`.tsx` 为 TypeScript 示例。**纯 JavaScript 项目**将对应文件改为 `.js` / `.jsx`。入口、路由、API、Mock、`types` 等路径须与 `src/` 实际一致；使用「初始化项目规范」技能时以扫描结果为准。

package/.agents/rules/profiles/react/04-/347/273/204/344/273/266/350/247/204/350/214/203.md

@@ -0,0 +1,46 @@
+---
+alwaysApply: false
+globs: ["**/*.tsx", "**/*.jsx", "**/components/**"]
+description: 项目的组件规范，包括组件目录结构、SCSS Modules 使用、组件层级规划（通用 vs 页面级）。当创建、修改、重写、重构或拆分组件，或涉及 .tsx/.jsx 文件时读取此规则。
+---
+
+# 组件规范
+
+## 组件结构
+
+- 组件目录在 `src/components` 下，每个组件单独一个目录
+- 组件文件名为 `index.tsx`，样式文件为 `index.module.scss`
+- 所有组件必须导入到 `src/components/index.ts` 中集中导出
+- 组件必须使用 SCSS Modules，禁止使用全局样式
+- 交互组件库二次封装必须使用 Ant Design 组件
+- 组件必须使用清晰的 TS 类型定义，Props 接口必须明确
+- 使用 `classnames` 负责动态 class 管理
+
+如需查看创建组件的完整示例与拆分步骤，请使用技能文件：
+
+- `.agents/skills/create-component/SKILL.md`
+
+## 组件层级规划
+
+- 单个 `.tsx` 文件建议不超过 400 行（作为拆分的参考阈值）
+- 遵循单一职责原则，每个组件应有明确的职责边界
+- **页面级组件**：仅在当前页面使用 → 放在 `src/pages/<page>/components/`
+- **通用组件**：跨页面复用 → 提取到 `src/components/`
+
+## 组件放置决策树
+
+新增组件时，按以下流程判断放置位置：
+
+```
+组件需要在多个页面使用吗？
+├─ YES → 通用组件 → 放在 `src/components/<name>/`
+└─ NO → 仅在单页使用 → 放在 `src/pages/<page>/components/<name>/`
+```
+
+**示例**：
+
+- `ErrorBoundary`（多处使用）→ `src/components/error-boundary/`
+- `HomeHeader`（仅首页使用）→ `src/pages/home/components/header/`
+- `CraftSheetCard`（仅工艺单页面使用）→ `src/pages/craft-sheet/components/craft-sheet-card/`
+
+**约束**：`src/components/` 中的组件必须是真正通用的，业务耦合组件禁止放入。

package/.agents/rules/profiles/react/05-API/350/247/204/350/214/203.md

@@ -0,0 +1,67 @@
+---
+alwaysApply: false
+description: React 项目的 API 规范，包括接口目录结构、请求封装、函数命名约定、类型定义、错误处理原则。当新增、修改、重构或重写接口时读取此规则。
+---
+
+# API 规范（React）
+
+## 目录结构
+
+```text
+src/
+├── api/                    # 接口请求函数
+│   ├── login.ts
+│   ├── order.ts
+│   └── types/              # 请求/响应类型定义
+│       ├── login.ts
+│       └── order.ts
+└── config/
+    └── requestConfig.ts    # 请求全局配置
+```
+
+- 所有接口请求函数集中在 `src/api/<name>.ts` 中，按业务模块拆分文件
+- 请求/响应类型定义放在 `src/api/types/<name>.ts` 中
+- 禁止在组件、页面、store 中直接调用 `request`，必须通过 `src/api/` 下的函数
+
+## 接口请求规范
+
+- 使用 `@koi-design/vix-tools` 的 `request` 发起请求
+- 请求全局配置（超时、成功码、鉴权失败处理等）集中在 `src/config/requestConfig.ts`
+- 应用入口通过 `request.init(requestConfig)` 完成初始化
+
+```ts
+import { request } from '@koi-design/vix-tools';
+
+export function getOrderListApi(data: GetOrderListParams): Promise<GetOrderListResult> {
+  return request({
+    url: '/api/order/page',
+    method: 'post',
+    data,
+  });
+}
+```
+
+如需查看完整示例与落地步骤，请使用技能文件：
+
+- `.agents/skills/create-api/SKILL.md`
+
+## 接口函数命名（NON-NEGOTIABLE）
+
+| 操作 | 命名规则 | 示例 |
+|------|----------|------|
+| 获取列表 | getXxxListApi | `getOrderListApi` |
+| 获取详情 | getXxxDetailApi | `getOrderDetailApi` |
+| 创建 | createXxxApi | `createOrderApi` |
+| 更新 | updateXxxApi | `updateOrderApi` |
+| 删除 | deleteXxxApi | `deleteOrderApi` |
+
+- 统一使用 `Api` 后缀，区分接口函数与业务函数
+- **禁止**使用 `fetch` 前缀或匈牙利命名法
+
+## 接口错误处理（NON-NEGOTIABLE）
+
+`requestConfig` 中的 `API_RESPONSE_TRANSFER_METHOD` 和 `API_RESPONSE_ERROR_METHOD` 已统一处理接口错误，业务代码中**禁止重复添加** `message.error` 等错误提示：
+
+- 接口错误由请求配置统一处理，业务代码只需处理成功逻辑
+- 前端表单验证错误和业务逻辑检查错误可以保留
+- 成功提示可以保留（业务逻辑的成功反馈）

package/.agents/rules/profiles/react/06-/350/267/257/347/224/261/350/247/204/350/214/203.md

@@ -0,0 +1,54 @@
+---
+alwaysApply: false
+description: 项目的路由规范，包括路由目录结构、模块配置、懒加载与路由集中管理原则。当新增、修改页面或配置路由时读取此规则。
+---
+
+# 路由规范（NON-NEGOTIABLE）
+
+## 路由结构
+
+- 路由配置统一在 `src/router/` 目录下管理
+- 页面组件统一在 `src/pages/` 目录下，使用 `kebab-case` 命名
+- 路由按业务模块拆分到 `src/router/modules/` 目录
+
+```
+src/router/
+├── index.ts           # 创建路由实例、注册全局守卫
+└── modules/           # 按业务模块拆分路由配置
+    ├── dashboard.ts
+    ├── user-manage.ts
+    └── settings.ts
+```
+
+- 入口文件：`src/router/index.ts`
+- 模块文件：`src/router/modules/<module-name>.ts`，文件名使用 `kebab-case`
+
+## 懒加载（NON-NEGOTIABLE）
+
+所有页面级路由必须使用 `React.lazy` 实现懒加载：
+
+```typescript
+// src/router/modules/user-manage.ts
+import { lazy } from 'react'
+
+const UserManage = lazy(() => import('@/pages/user-manage'))
+
+const routes = [
+  {
+    path: '/user-manage',
+    element: <UserManage />,
+    meta: { title: '用户管理', requiresAuth: true },
+  },
+]
+
+export default routes
+```
+
+- 禁止在路由配置中静态导入页面组件
+- 布局组件（`src/layouts/`）允许静态导入
+
+## 路由与菜单规范（NON-NEGOTIABLE）
+
+- **禁止多处维护路由**：路由配置集中在 `src/router/modules/` 管理，禁止散落在其他目录
+- **避免重复注册**：同一页面组件只允许被一条路由引用
+- **路由命名唯一**：每条路由的标识必须全局唯一

package/.agents/rules/profiles/react/07-/347/212/266/346/200/201/347/256/241/347/220/206.md

@@ -0,0 +1,226 @@
+---
+alwaysApply: false
+description: 项目的状态管理规范，支持 Zustand 或经典 Redux（二选一）。当新增、修改或重构状态管理时读取此规则。
+---
+
+# 状态管理规范（NON-NEGOTIABLE）
+
+## 基础规范
+
+- 状态管理使用 **Zustand** 或 **经典 Redux**，同一项目**禁止混用**
+- 所有 store 文件必须放在 `src/store/modules/` 目录下，按业务模块划分子目录
+- **禁止在 `src` 下新建其他目录存放 store**
+
+## 目录结构
+
+无论使用哪种方案，模块化目录结构保持一致：
+
+```
+src/store/
+├── index.ts                    # Zustand: 统一导出 / Redux: createStore + combineReducers
+└── modules/
+    ├── user/
+    │   ├── index.ts            # Zustand: useUserStore / Redux: reducer + action creators
+    │   └── type.ts             # 类型定义
+    ├── theme/
+    │   ├── index.ts
+    │   └── type.ts
+    └── ai-editor/
+        ├── index.ts
+        └── type.ts
+```
+
+- 每个业务模块独立一个目录，目录名使用 `kebab-case`
+- 目录内必须包含 `index.ts`（store / reducer 定义）和 `type.ts`（类型定义）
+- `src/store/index.ts` 负责统一导出或创建 store 实例
+
+---
+
+## 方案 A：Zustand
+
+### Store 编写规范
+
+- 每个模块暴露 `useXxxStore` Hook
+- Store 中不要直接耦合具体 UI 组件，只存纯数据与业务行为
+
+```typescript
+// src/store/modules/theme/type.ts
+export enum ThemeMode {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+export interface ThemeState {
+  theme: ThemeMode
+  setTheme: (theme: ThemeMode) => void
+  toggleTheme: () => void
+}
+```
+
+```typescript
+// src/store/modules/theme/index.ts
+import { create } from 'zustand'
+import { ThemeMode } from './type'
+import type { ThemeState } from './type'
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  theme: ThemeMode.LIGHT,
+  setTheme: (theme) => set({ theme }),
+  toggleTheme: () =>
+    set((state) => ({
+      theme: state.theme === ThemeMode.LIGHT ? ThemeMode.DARK : ThemeMode.LIGHT,
+    })),
+}))
+```
+
+### 持久化
+
+当状态需要跨页面刷新保留时，使用 `zustand/middleware` 的 `persist`：
+
+```typescript
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import type { ThemeState } from './type'
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: ThemeMode.LIGHT,
+      setTheme: (theme) => set({ theme }),
+    }),
+    { name: 'app-theme' },
+  ),
+)
+```
+
+### 入口文件
+
+```typescript
+// src/store/index.ts
+export { useThemeStore } from './modules/theme'
+export { useUserStore } from './modules/user'
+```
+
+### 组件中使用
+
+```typescript
+const { theme, toggleTheme } = useThemeStore()
+```
+
+---
+
+## 方案 B：经典 Redux
+
+### Store 编写规范
+
+- 每个模块默认导出 reducer，具名导出 action creators
+- State 类型和 Action 类型统一放在 `type.ts`
+- Action type 常量定义在 `type.ts` 中，使用 `模块名/动作名` 格式
+
+```typescript
+// src/store/modules/user/type.ts
+export interface UserInfo {
+  id: string
+  name: string
+  avatar: string
+  roles: string[]
+}
+
+export interface UserState {
+  userInfo: UserInfo | null
+  token: string
+}
+
+export const SET_USER = 'user/SET_USER'
+export const SET_TOKEN = 'user/SET_TOKEN'
+export const RESET_USER = 'user/RESET_USER'
+
+export type UserAction =
+  | { type: typeof SET_USER; payload: UserInfo }
+  | { type: typeof SET_TOKEN; payload: string }
+  | { type: typeof RESET_USER }
+```
+
+```typescript
+// src/store/modules/user/index.ts
+import type { UserInfo, UserState, UserAction } from './type'
+import { SET_USER, SET_TOKEN, RESET_USER } from './type'
+
+const initialState: UserState = {
+  userInfo: null,
+  token: '',
+}
+
+export const setUser = (payload: UserInfo): UserAction => ({ type: SET_USER, payload })
+export const setToken = (payload: string): UserAction => ({ type: SET_TOKEN, payload })
+export const resetUser = (): UserAction => ({ type: RESET_USER })
+
+export default function userReducer(state = initialState, action: UserAction): UserState {
+  switch (action.type) {
+    case SET_USER:
+      return { ...state, userInfo: action.payload }
+    case SET_TOKEN:
+      return { ...state, token: action.payload }
+    case RESET_USER:
+      return { ...state, userInfo: null, token: '' }
+    default:
+      return state
+  }
+}
+```
+
+### 入口文件
+
+```typescript
+// src/store/index.ts
+import { createStore, combineReducers } from 'redux'
+import userReducer from './modules/user'
+import themeReducer from './modules/theme'
+
+const rootReducer = combineReducers({
+  user: userReducer,
+  theme: themeReducer,
+})
+
+export type RootState = ReturnType<typeof rootReducer>
+export type AppDispatch = typeof store.dispatch
+
+const store = createStore(rootReducer)
+export default store
+```
+
+### 类型化 Hook
+
+在 `src/hooks/` 下定义类型化的 `useAppSelector` 和 `useAppDispatch`，组件中统一使用：
+
+```typescript
+// src/hooks/useRedux.ts
+import { useSelector, useDispatch } from 'react-redux'
+import type { TypedUseSelectorHook } from 'react-redux'
+import type { RootState, AppDispatch } from '@/store'
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+```
+
+### 组件中使用
+
+```typescript
+import { useAppSelector, useAppDispatch } from '@/hooks/useRedux'
+import { setUser } from '@/store/modules/user'
+
+const userInfo = useAppSelector((state) => state.user.userInfo)
+const dispatch = useAppDispatch()
+
+dispatch(setUser({ id: '1', name: 'Admin', avatar: '', roles: ['admin'] }))
+```
+
+---
+
+## 通用约束
+
+- 按业务领域拆分，每个模块单独一个目录
+- 禁止创建巨型 store / reducer，单个模块的 `index.ts` 不超过 **200 行**
+- 模块之间禁止循环依赖
+- 模块私有类型放在模块目录下的 `type.ts`，全局共享类型放在 `src/types/`
+- Store 中不要直接耦合具体 UI 组件，只存纯数据与业务行为

package/.agents/rules/profiles/react/09-/346/240/267/345/274/217/350/247/204/350/214/203.md

@@ -0,0 +1,71 @@
+---
+alwaysApply: false
+globs: ["**/*.tsx", "**/*.jsx", "**/*.scss", "**/*.module.scss"]
+description: 项目的样式规范，包括 SCSS Modules 使用、Ant Design 与自定义主题 CSS 变量。当编写、修改组件样式或主题适配，或涉及 .tsx/.jsx/.scss 文件时读取此规则。
+---
+
+# 样式规范
+
+## 基础原则
+
+- 组件库使用 Ant Design
+- 组件样式采用 SCSS Modules（`index.module.scss`）
+- 全局样式（变量、reset、mixins）统一在 `src/styles/` 目录下定义，禁止在组件中使用无作用域的全局样式
+- `classnames` 负责动态 class 管理
+- UI 交互保持 Antd + 自研组件体验一致
+
+## 主题色 CSS 变量（NON-NEGOTIABLE）
+
+在未使用 Ant Design 组件的场景下，自定义样式**必须**使用主题色 CSS 变量，**严格禁止**硬编码颜色值：
+
+- **Ant Design 变量**：`var(--ant-color-primary)`、`var(--ant-color-text)`、`var(--ant-color-bg-container)`、`var(--ant-color-border)`
+- **自定义变量**：`var(--shentu-card-bg)`、`var(--shentu-border-radius)`、`var(--shentu-cn-family)`
+
+确保自定义组件能够正确响应主题切换（浅色/暗色模式）。
+
+如需了解主题变量的具体使用方式，请使用技能文件：
+
+- `.agents/skills/theme-variables/SKILL.md`
+
+## 设计稿颜色提取规范
+
+### 常见颜色属性
+
+| 属性 | 含义 | 示例 |
+|------|------|------|
+| `fill` | 背景色 | `"#13131c73"` |
+| `stroke` | 边框色 | `"#5f50ffff"` |
+| `opacity` | 透明度 | `0.5` |
+
+### 特殊效果
+
+| 属性 | 含义 | 提取方式 |
+|------|------|----------|
+| `background_blur` | 毛玻璃效果 | CSS `backdrop-filter: blur()` |
+| `shadow` | 阴影效果 | CSS `box-shadow` |
+| `cornerRadius` | 圆角 | CSS `border-radius` |
+
+### 提取步骤
+
+1. 定位目标元素（按钮、卡片等）
+2. 查找 `fill` 属性获取背景色
+3. 查找 `effect` 字段（模糊、阴影等）
+4. 记录文字颜色（通常在 `children` 的 `text` 元素中）
+
+### 示例
+
+设计稿按钮：
+```
+"fill": "#13131c73",
+"effect": {"type": "background_blur", "radius": 17.5}
+```
+
+对应 CSS：
+```scss
+.button {
+  background-color: rgba(19, 19, 28, 0.45);
+  backdrop-filter: blur(17.5px);
+}
+```
+
+**注意**：带有透明度的颜色需要转换为 RGBA 格式。例如 `#13131c73` 中 `73` 是透明度（十六进制），转换为十进制约 0.45。