研究检索需要联网clawhub未标认证来源可访问clear审计通过

technical-spec-design（技术规格设计）

Agent Skill

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

总安装

5,502

周安装

227

GitHub Stars

下载量

1,798

OpenClaw

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

MIT-0

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

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

请帮我安装这个 Agent Skill：technical-spec-design（技术规格设计）
来源仓库：https://github.com/wjszxli/technical-spec-design
安装命令：
openclaw skills install technical-spec-design
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

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

ClawHubOpenClaw

openclaw skills install technical-spec-design

简介

将产品需求转化为包含布局、交互与视觉规范的详细技术规格文档。

适用于 UI/UX 设计与前端开发衔接场景。
输出包含组件层级与响应式规则的实施方案。
安装命令：openclaw skills install technical-spec-design；需明确用户流程与品牌指南。
注意：设计方案应通过实际预览验证文本溢出与对齐问题。

SKILL.md

name: technical-spec-design
description: >

Installation

OpenClaw Setup (Recommended)

OpenClaw is the primary platform for this skill. It uses workspace-based prompt injection with automatic skill loading.

Via ClawdHub (recommended):

clawdhub install technical-spec-design

Manual:

git clone https://github.com/wjszxli/technical-spec-design ~/.openclaw/skills/technical-spec-design

Technical Specification Design Skill

1. Input Contract

Accepts the following input types:

Complete PRD document
Brief requirements description (may be incomplete)
Existing technical specification (for optimization/review)

2. Available Resources

Core Templates

Resource	Purpose	Usage Scenario
`spec_template.md`	Main spec template	Starting new technical specs
`component_template.md`	Component design	Designing individual components
`requirements_analysis_template.md`	Requirements analysis	Breaking down requirements

Examples

Resource	Purpose
`examples/sample_input.md`	Sample PRD input
`examples/sample_output.md`	Complete spec example

Scripts

Script	Purpose	Usage
`scripts/generate_spec.py`	Generate spec from template	`python scripts/generate_spec.py --interactive -o my_spec.md`
`scripts/validate.py`	Validate skill structure	`python scripts/validate.py`

3. Output Contract

Output must be Markdown and strictly include the following structure (may be trimmed by mode):

Standard Structure

Requirements Clarification (if needed)
Requirements Analysis (the trifecta)
Technical Specification Design
Component/Module Design
Technology Selection Comparison (if applicable)
Risk and Boundary Analysis
Pending Questions

4. Mode System (Auto-selected)

Mode A: Requirements Clarification Mode

Trigger conditions:

Insufficient input information
Key uncertainties exist

Output:

Only output "Requirements Clarification Questions"
Do not proceed with any design work

Mode B: Lightweight Specification Mode

Trigger conditions:

Simple features
Implementation path is relatively clear

Output:

Simplified requirements analysis
Core specification design
Brief component breakdown

Mode C: Full Technical Specification Mode (Default)

Trigger conditions:

Medium to large requirements
Involves architecture/component design/technology selection

Output complete structure

5. Execution Flow (Must Follow Strictly)

Step 1: Requirements Completeness Check

Check for missing information:

User goals
Requirements context
Inputs and outputs
Constraints
Edge cases

If missing: → Enter Mode A, output only clarification questions

Step 2: Requirements Analysis (The Trifecta)

1. Feature Breakdown

Format: Product requirement → Page/Module → Change points

2. Use Case Analysis

Describe complete user paths (cross-page)

3. Page Operation Specification

Format: Action + Condition + Object + Behavior

Step 3: Technical Specification Design

Include:

Architecture breakdown (frontend/backend/services)
Data flow design
State management
Core processes (pseudocode acceptable)

Step 4: Component/Module Design

Requirements:

Must drill down to component/module level
Clear responsibility boundaries
Describe dependencies

Step 5: Technology Selection Comparison (If Multiple Options)

Must use table format:

Step 6: Risk and Boundary Analysis

Must include:

Edge cases
Performance concerns
Scalability
Exception handling

Step 7: Output Pending Questions

List all issues still requiring product/business confirmation

6. Output Constraints (Mandatory)

Prohibited

❌ Output runnable code (JS / TS / Java / SQL, etc.)
❌ Skip requirements analysis and write specs directly
❌ Make assumptions based on "common cases"
❌ Use vague language (e.g., "maybe", "typically")

Required

✅ Use structured expression
✅ Use pseudocode for process descriptions
✅ All changes must map to components/modules
✅ Explicit boundaries and exceptions

7. Technology Research Guidelines

When multiple approaches exist, must use comparison tables—plain text descriptions are not allowed.

8. Red Flags (Must Stop)

If any of these thoughts occur, must stop and return to the process:

"Just write a rough spec first"
"Handle it the common way"
"Design while coding"
"This requirement is simple, no analysis needed"

9. Quick Checklist

Before output, must confirm:

[ ] Requirements clarified
[ ] Trifecta complete
[ ] Component design included
[ ] Pseudocode used
[ ] Edge cases analyzed
[ ] Pending questions documented

10. Examples (Few-shot)

Example 1: Ambiguous Requirements (Mode A)

Input: "Build a comment feature"

Output:

Do comments support replies?
Is pagination needed?
Is liking/upvoting needed?
Is moderation required?

Example 2: Simple Requirements (Mode B)

Input: "Show success message after form submission"

Output:

Brief feature breakdown
State transitions
Toast/notification component design

Example 3: Complex Requirements (Mode C)

Input: "Design an admin system with multi-role permissions"

Output: Complete technical specification structure (including technology comparison)

Core Principles (Summary)

The essence of technical specifications: eliminate uncertainty before coding.

适合场景

OpenClaw 用户查找和安装 Skill 时

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

96.7%

按下载量换算1,739

安全审计

VirusTotal

未展示

ClawScan

通过

Static analysis

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/wjszxli/technical-spec-design

SKILL.md 来源

clawhub.ai

/wjszxli/technical-spec-design

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

technical-skill-finder（技术技能查找器）

technical-skill-finder 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

technical-spec-template（技术规格模板）

technical-spec-template 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。