Token导航 LogoToken导航

Agent Skill · 研究检索

tech-design(技术设计)

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

tech-design 是研究检索类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为调用外部服务;许可证信息还不明确,第三方扫描有提醒项,按安装量在研究检索类的 73,675 个 Skill 里排第 71,089。

总安装 196周安装 8GitHub Stars 公开资料未说明下载 63核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:tech-design(技术设计)
来源仓库:https://github.com/anian0/pick-skills
仓库路径:skills/tech-design
安装命令:
npx skills add https://github.com/anian0/pick-skills --skill tech-design
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/anian0/pick-skills --skill tech-design

这个 Skill 是做什么的

研究检索类 Skill 主要解决「找资料、核对事实、把来源整理清楚」的问题,通常会让助手先检索再总结。

用于辅助界面设计和视觉规范优化。tech-design 属于研究检索类 Skill,可作为该场景下的辅助能力补充。适合整理页面结构和改进组件层级。适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。需结合现有品牌系统和用户任务使用。

涉及真实页面改动时应通过预览检查表现。不应只堆砌装饰元素而忽略功能性。

来源仓库内路径:skills/tech-design

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/anian0/pick-skills --skill tech-design;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要调用外部服务,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

tech-design 怎么安装?

在终端执行 npx skills add https://github.com/anian0/pick-skills --skill tech-design。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

tech-design 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

tech-design 需要什么权限?

权限级别是调用外部服务。该 Skill 可能调用第三方服务、云服务或外部模型 API,使用前需要确认账号、额度、数据发送范围和服务条款。

tech-design 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

tech-design 用的人多吗?

公开数据是累计安装 196 次,近一周安装 8 次,下载 63 次。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

tech-design 安全吗?

第三方扫描有提醒项,说明存在需要人工确认的行为。安装前请打开源码看清它读了什么、联网到哪里。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方扫描存在提醒项或未通过项,需要人工逐条确认。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理研究检索类任务、又不想每次都手写提示词的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 需要厂商级技术支持和 SLA 的生产系统。

研究检索类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
find-skills

寻找技能 · Codex、Claude

31,199,81316,486操作浏览器MIT有提醒
self-improving-agent

自我改进 Agent · OpenClaw

16,464,0023,396接触敏感数据MIT-0通过
soultrace

灵魂追踪 · Codex、Claude

7,588,94412需要联网未明确有提醒
self-improving

自我完善 · OpenClaw

6,829,2841,046需要联网MIT-0通过
microsoft-foundry

微软代工厂 · Codex、Claude

6,614,144764调用外部服务未明确有提醒
tech-design

技术设计 · 本页

196—调用外部服务未明确有提醒

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

技术方案设计

基于需求文档产出完整技术方案。核心原则:文档先行;前后端并行;测试聚焦单元与必要集成。

版本号约定

1.X 为占位符,详见 requirements-workshop/SKILL.md。真实路径必须替换为具体数字(如 workplace/1/references/)。

前后端联合设计原则

技术方案必须同时覆盖:

  • 后端:架构、数据模型、API、服务、权限
  • 前端:页面结构、路由、组件、状态管理、API 接入、关键交互
  • 测试:后端单元/集成测试、前端单元/组件测试

需求文档"页面/界面清单"必须在技术方案中逐项有对应前端设计。遗漏前端是审核必拒项。

工作流程(精简为 6 步)

  1. 读取需求文档(含功能清单 + 页面清单)
  2. 区分新/旧功能 → 准备技术文档(新功能:参考文档;旧功能:技术栈说明)→ 存入 workplace/1.X/references/
  3. 设计架构 + 数据模型 + API
  4. 设计前端(路由/页面/组件/状态/API 接入)
  5. 制定测试策略(单元为主,必要集成)
  6. 产出技术方案 → 自检 → 用户确认 → 进入 implementation-planning

第一步:读取需求文档

从 workplace/1.X/requirements/ 读取最近的需求文档。

  • 若不存在:提示用户先做 requirements-workshop 或提供文档路径
  • 若有多个:列出最近 3 个让用户选择

提取功能清单与页面清单。


第二步:准备参考文档

2.1 区分功能类型

分类定义文档要求
新功能项目无类似实现,引入新技术/模块必须有参考文档
旧功能扩展基于现有代码扩展必须有技术栈说明
旧功能复用直接调用现有功能无需额外文档

判断方法:搜索现有代码 → 检查技术栈 → 与用户确认。

2.2 输出技术文档需求清单(用户确认后再继续)

## 技术文档需求清单

### 新功能(需要参考文档)
| 功能 | 文档类型 | 来源建议 | 状态 |

### 旧功能扩展(需要技术栈说明)
| 功能 | 涉及模块 | 文档要求 | 状态 |

### 文档存放位置:workplace/1.X/references/
- 参考文档:`{技术名}-reference.md`
- 技术栈说明:`{模块名}-techstack.md`
- 前端 UI 库参考:`{库名}-frontend-reference.md`

2.3 收集 / 整理文档

新功能参考文档模板(核心字段):基本信息(链接/版本/引入方式)、核心概念、API 参考(用途/参数/返回/示例)、最佳实践、注意事项、与本项目关联。 收集方式:Context7 MCP / WebFetch/WebSearch / 用户提供 / 现有代码探索。

旧功能技术栈说明模板:模块定位、代码结构、数据模型、API 接口、依赖关系、扩展点、注意事项。

2.4 验证清单

检查项要求
目录存在workplace/1.X/references/ 已创建
新功能文档每个新功能都有参考文档
旧功能文档每个旧功能扩展都有技术栈说明

通过后宣布:> 技术文档准备完成,开始技术方案设计。


第三步:架构 + 数据模型 + API

3.1 架构设计

章节内容
系统架构图模块划分、层次、依赖(Mermaid graph)
技术选型各模块技术栈与理由
部署架构部署方式、网络拓扑(如适用)
数据流向数据在模块间流转

3.2 数据模型

每个实体描述字段(名/类型/必填/默认/说明)、约束、索引、迁移计划(若有)。

### {实体名}
| 字段 | 类型 | 必填 | 默认 | 说明 |
| id | UUID | 是 | 自动 | 主键 |

3.3 API 设计

接口清单 + 每个接口的:路径与方法、描述、认证、请求参数表、请求示例、响应字段表、响应示例、错误码。


第四步:前端设计(强制)

针对需求文档"页面/界面清单",逐项给出前端实现设计。任何遗漏都会让需求功能在实施阶段消失。

4.1 设计内容

章节内容
路由结构所有路由及层级(含权限/守卫)
页面设计每页布局、组件、数据来源、状态机
组件清单复用组件、第三方组件库选型
状态管理方案选型(Pinia/Redux/Zustand)+ store 划分
API 接入调用哪些后端接口、错误处理、loading/重试
关键交互表单校验、上传下载、分页等

4.2 页面设计模板

### 页面:{页面名}(路由:{path})
- **对应需求功能**:[功能编号/名称]
- **布局**:[结构示意]
- **关键组件**:[列表]
- **数据来源**:[API/本地状态]
- **状态机**:初始 / 加载中 / 空 / 错误 / 成功
- **交互细节**:[校验、跳转、二次确认]
- **权限**:[未登录/无权限处理]

4.3 覆盖核查表(必做)

列一张表:左列=需求文档"页面清单"每一行,右列=本方案"页面设计"对应章节锚点。任意缺失即返工。


第五步:测试策略(聚焦单元,必要集成)

5.1 测试目录规范(强制)

workplace/1.X/test/
├── backend/
│   ├── unit/         # 后端单元测试(核心)
│   └── integration/  # 后端集成测试(仅关键 API/数据库交互)
├── frontend/
│   ├── unit/         # 前端单元测试(工具函数/composables/store)
│   └── component/    # 前端组件测试(关键组件)
├── fixtures/         # 共享测试数据
└── README.md         # 运行命令矩阵 + 覆盖率目标

约束:

  • 业务源码内不得存放测试文件(不在 src 旁放 *.test.ts/test_*.py),测试与源码分离便于版本归档
  • 跨模块复用的 mock/fixture 集中放在 test/fixtures/
  • 以单元测试为主;集成测试仅覆盖关键路径(如核心 API + 数据库写入);不做端到端测试
  • test/README.md 列出运行命令:单测、集成、覆盖率

5.2 测试策略内容

章节内容
测试范围哪些功能需要测试(前后端均需列出)
测试类型单元测试(主)+ 关键集成测试
测试数据fixtures 准备方式
覆盖率目标后端/前端分别的目标
运行命令各类测试命令(写入 test/README.md)

5.3 测试分类

类型覆盖目录工具建议
后端单元业务逻辑、工具函数test/backend/unit/pytest / Jest / JUnit
后端集成关键 API + 数据库test/backend/integration/pytest / Supertest
前端单元工具函数、composables、storetest/frontend/unit/Vitest / Jest
前端组件关键 UI 组件渲染与交互test/frontend/component/Vitest + Vue Test Utils / RTL
本套 skill 不做端到端测试。如确有强需求,由用户单独提出后另行规划,不在本方案默认范围内。

第六步:产出技术方案文档

6.1 命名与存储

命名:YYYY-MM-DD-{需求名称}-技术方案.md 存储:workplace/1.X/tech-design/

6.2 模板

# {需求名称} 技术方案

> 需求文档:[路径]
> 技术参考:workplace/1.X/references/

## 一、架构设计
### 1.1 系统架构图(含前后端分层)
### 1.2 技术选型
### 1.3 部署架构(如适用)

## 二、数据模型
### 2.1 实体定义
### 2.2 关系图
### 2.3 索引设计

## 三、API 设计
### 3.1 接口清单
### 3.2 接口详情

## 四、前端设计
### 4.1 路由结构
### 4.2 页面设计
### 4.3 组件清单
### 4.4 状态管理
### 4.5 API 接入与错误处理
### 4.6 覆盖核查表(需求页面清单 → 本章节锚点)
| 需求页面 | 路由 | 对应章节 |

## 五、测试策略
### 5.1 测试目录(workplace/1.X/test/,单元为主+必要集成,不做 E2E)
### 5.2 测试范围(前后端分别列出)
### 5.3 测试类型与工具
### 5.4 覆盖率目标
### 5.5 运行命令

## 六、风险评估
### 6.1 技术风险
### 6.2 兼容风险
### 6.3 资源风险

## 七、附录
### 7.1 参考文档清单
### 7.2 术语表

6.3 自检(一次 subagent 审查)

读取 references/tech-design-reviewer-prompt.md,传入文档路径派发 subagent。

状态处理
通过进入用户确认
发现问题修复后无需重审

6.4 用户确认

技术方案已完成。请确认: - 架构与数据模型是否合理? - API 是否满足需求? - 前端设计是否覆盖需求页面清单的每一项? - 测试策略是否可行(单元+必要集成,不含 E2E)?

确认后:> 下一步使用 implementation-planning 拆分可执行模块清单。


工作原则

  • 文档先行:参考文档准备完成前不得开始设计
  • 基于需求:方案必须完全覆盖需求功能清单
  • 测试聚焦:以单元测试为主,仅在关键路径补充集成测试,不做 E2E
  • 前后端均覆盖:前端设计章节缺失或漏页 = 审核必拒
  • 风险意识:每个设计决策都考虑潜在风险

特殊情况

  • 需求过大:建议拆分子方案,先做哪个?
  • 技术选型分歧:列对比表给出 2-3 方案,让用户选
  • 文档无法获取:用户提供 / 探索现有代码 / 推迟该功能
  • 现有代码复杂:聚焦核心接口与数据模型,忽略实现细节;分层探索(接口 → 数据 → 业务)

平台分布

Codex

36.92%
按下载量换算23

Claude

29.01%
按下载量换算18

Cursor

17.73%
按下载量换算11

Gemini CLI

8.8%
按下载量换算6

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

可疑

权限和风险

调用外部服务

该 Skill 可能调用第三方服务、云服务或外部模型 API,使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在提醒或未通过项,安装前请自行复核。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills