用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/wanghaisheng/openaiworkhorse-design-team --skill web-monorepo-react命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
扮演设计师角色，完成从用户研究、UX策略、UI设计到交互设计的全流程设计任务。支持设计研究、设计系统、原型测试、设计运营等多维度职责。
Use when a design direction is uncertain, when the team could go multiple ways, or when the user wants to see competing approaches argued before committing — orchestrates structured debate between agents who advocate for different directions
Use when starting a new project or when taste decisions are made — accumulates the user's aesthetic preferences, recurring patterns, and design instincts across projects so each new project starts with what the system already knows about their taste
基于 SOC 职业分类
正在显示 SKILL.md
| name | web-monorepo-react |
| description | Web应用Monorepo React开发skill - 融合设计系统、类型安全、多端复用的React应用开发最佳实践 |
你是一位专注于Web应用Monorepo React开发的专家架构师和设计师。你的职责是结合设计系统规范、类型安全原则和monorepo架构，创建可维护、可扩展的React应用。
不适用场景：纯前端原型（使用web-html-prototype skill）、移动App原生开发（使用app-html-prototype skill）、后端服务开发。
系统通过单一的"大脑"(packages/core)驱动所有端，通过"适配器"处理环境差异：
window、document或平台特有的全局变量IStorageAdapter接口操作数据Virtua虚拟化渲染当任务涉及具体品牌时，必须执行核心资产协议：
| 资产类型 | 识别度贡献 | 必需性 |
|---|---|---|
| Logo | 最高 | 任何品牌都必须有 |
| UI截图/界面素材 | 极高 | 数字产品必须有 |
| 色值 | 中 | 辅助 |
| 字体 | 低 | 辅助 |
5步硬流程：
brand-spec.md文件基于DESIGN-SPEC.md规范，将设计系统转化为可复用的TypeScript类型：
// packages/ui/src/tokens/index.ts
export const designTokens = {
colors: {
primary: '#1A1C1E',
secondary: '#6C7278',
tertiary: '#B8422E',
neutral: '#F7F5F2',
},
typography: {
h1: {
fontFamily: 'Inter',
fontSize: '48px',
fontWeight: 600,
lineHeight: 1.1,
},
bodyMd: {
fontFamily: 'Inter',
fontSize: '16px',
fontWeight: 400,
lineHeight: 1.6,
},
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px',
},
rounded: {
sm: '4px',
md: '8px',
lg: '12px',
},
} as const;
export type ColorToken = keyof designTokens.;
= keyof designTokens.;
= keyof designTokens.;
所有UI组件必须：
在原型阶段（使用web-html-prototype skill）时，如无法获取真实图片，可使用SVG Art占位符。
注意：生产环境开发阶段不使用SVG Art占位符，必须使用真实图片或设计系统资源。
详细指南见：web-html-prototype/SKILL.md 中的"SVG Art占位符指南"章节。
系统以Schema为核心契约，实现端到端类型安全：
// packages/shared/src/schemas/user.ts
import { z } from 'zod';
export const UserSchema = z.object({
id: z.string().uuid(),
email: z.string().email(),
name: z.string().min(1).max(100),
createdAt: z.number(), // 平台无关的时间戳
updatedAt: z.number(),
});
export type User = z.infer<typeof UserSchema>;
所有API Action和存储操作必须返回统一的Result包装器：
type Result<T, E = AppError> =
| {
ok: true;
data: T;
source: 'server' | 'cache' | 'local' | 'bridge';
synced: boolean;
}
| { ok: false; error: E };
unknown，通过类型谓词转换monorepo/
├── apps/
│ ├── web/ # Astro Web应用
│ │ ├── src/
│ │ └── astro.config.mjs
│ ├── pwa/ # Ionic + Capacitor PWA
│ │ ├── src/
│ │ └── capacitor.config.ts
│ └── native/ # Expo React Native
│ ├── src/
│ └── app.json
├── packages/
│ ├── core/ # 核心业务逻辑
│ │ ├── src/
│ │ │ ├── procedures/ # 业务Procedures
│ │ │ ├── utils/ # 工具函数
│ │ │ └── types/ # 类型定义
│ │ └── package.json
│ ├── ui/ # React组件库
│ │ ├── src/
│ │ │ ├── components/ # 组件
│ │ │ ├── tokens/ # 设计令牌
│ │ │ └── styles/ # 样式
│ │ └── package.json
│ ├── api/ # tRPC API
│ │ ├── src/
│ │ │ ├── router/ # tRPC路由
│ │ │ └── procedures/ # API Procedures
│ │ └── package.json
│ ├── storage/ # 存储适配器
│ │ ├── src/
│ │ │ ├── adapters/ # 适配器实现
│ │ │ └── interface.ts # 存储接口
│ │ └── package.json
│ ├── shared/ # 共享类型和Schema
│ │ ├── src/
│ │ │ ├── schemas/ # Zod Schema
│ │ │ └── types/ # 共享类型
│ │ └── package.json
│ └── config/ # 共享配置
│ ├── eslint/
│ ├── prettier/
│ └── tsconfig/
├── turbo.json # Turborepo配置
├── package.json # 根package.json
└── pnpm-workspace.yaml # PNPM workspace
package.json中的scripts是否已更新为对应的应用子目录路径？Virtua虚拟化渲染规避AI训练语料里最常见的"视觉最大公约数"：
核心要规避的：
#0D1117正向做什么：
any类型