模式提取：自动化设计系统与架构恢复 - Openclaw Skills

什么是 模式提取？

模式提取技能是一个先进的分析引擎，旨在将遗留或现有的代码库转化为结构化的、可操作的情报。它系统地扫描仓库以识别有意的设计决策、独特的架构流程和自定义配置，过滤掉通用的默认设置，以捕捉项目 DNA 的真实本质。

通过在 Openclaw Skills 生态系统中使用此工具，开发人员可以弥合运行代码与可重用知识之间的鸿沟。它不仅仅是复制文件；它还将设计系统（包括颜色、字体和间距）、UI 模式和部署工作流合成到标准化的文档和模块化的智能体技能中，以便无缝地应用于未来的项目。

下载入口:https://github.com/openclaw/skills/tree/main/skills/wpank/extraction

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install extraction

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 /skills/

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 extraction。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。

模式提取 应用场景

• 识别并记录遗留项目的设计令牌和审美方向，以确保未来的 UI 一致性。
• 将复杂的内部架构转换为可重用的方法论，通过 Openclaw Skills 帮助新团队成员快速入职。
• 从经过验证的生产代码中生成专门的 Openclaw 技能，以增强跨多个仓库的 AI 智能体能力。
• 分析代码仓库以创建全面的项目摘要和技术债务图谱。
• 将自定义的 Tailwind 配置或 CSS 变量提取到便携的、与项目无关的设计系统文档中。

模式提取 工作原理

1. 发现：智能体扫描根目录、配置文件（如 package.json 或 tailwind.config）和文档，以映射技术栈和项目结构。
2. 分类：将发现的元素按设计系统、UI 模式、架构和工作流等类别进行优先级排序，以确保首先处理高价值数据。
3. 提取：通过专门的模板处理有价值的模式，生成特定的输出，包括设计系统文档和与项目无关的 Openclaw 技能。
4. 验证：根据质量标准检查每个提取的项，确保其包含专家级知识并符合严格的格式规则后再进行保存。
5. 输出：将最终确定的文档和 Openclaw 技能写入本地目录，或暂存以供在多个仓库之间进行细化。

模式提取 配置指南

使用 OpenClaw hub CLI 安装提取模块，开始分析您的代码库：

npx clawhub@latest install extraction

确保您可以在本地环境中访问 methodology-values.md 和 skill-quality-criteria.md 等参考文件，以引导提取逻辑并保持 Openclaw Skills 所预期的高标准。

模式提取 数据架构与分类体系

该技能将提取的数据组织到特定的目录结构中，以保持 Openclaw Skills 的清晰度和重用性：

目录	内容类型	用途
docs/extracted/	Markdown 文件	存储项目摘要、设计系统值和架构图。
ai/skills/	SKILL.md & 参考	包含从代码库模式衍生出的模块化 Openclaw 技能。
ai/staging/	临时存储	在最终细化之前，用于汇总来自多个项目的模式。

name: pattern-extraction
model: reasoning
description: Extract design systems, architecture patterns, and methodology from codebases into reusable skills and documentation. Use when analyzing a project to capture patterns, creating skills from existing code, extracting design tokens, or documenting how a project was built. Triggers on "extract patterns", "extract from this repo", "analyze this codebase", "create skills from this project", "extract design system".

Pattern Extraction

Extract reusable patterns, skills, and methodology documentation from existing codebases.

Installation

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install extraction

---

Before Starting

MANDATORY: Read these reference files based on what you're extracting:

---

Extraction Process

Phase 1: Discovery

Analyze the project to understand what exists.

Scan for project structure:

- Root directory layout
- Key config files (package.json, tailwind.config.*, etc.)
- Documentation (README, docs/, etc.)
- Source organization (src/, app/, components/, etc.)

Identify tech stack:

Look for design system signals:

• Custom Tailwind config (not defaults)
• CSS variables / custom properties
• Theme files
• Design documentation
• Mood boards or reference lists

Capture key findings:

• What's the tech stack?
• What's the folder structure?
• Is there a documented design direction?
• What workflows exist (Makefile, scripts)?

---

Phase 2: Categorization

Map discoveries to extraction categories, prioritized:

Priority order:

1. Design Systems — Color tokens, typography, spacing, motion, aesthetic documentation
2. UI Patterns — Component organization, layouts, interactions
3. Architecture — Folder structure, data flow, API patterns
4. Workflows — Build, dev, deploy, CI/CD
5. Domain-Specific — Patterns unique to this application type

For each category found, note:

• What specific patterns exist?
• Where are they defined? (file paths)
• Are they documented? (comments, docs)
• Are they worth extracting? (used in multiple places, well-designed)

Filter by value:

---

Phase 3: Extraction

For each valuable pattern, generate outputs.

Design Systems → Design System Doc + Skill

1. Read the Tailwind config, CSS files, theme files
2. Extract actual token values (colors, typography, spacing)
3. Document the aesthetic direction
4. Create:
   • docs/extracted/[project]-design-system.md using design-system.md template
   • ai/skills/[project]-design-system/SKILL.md if patterns are reusable

Architecture → Methodology Doc

1. Document folder structure with reasoning
2. Capture data flow patterns
3. Note key technical decisions
4. Create docs/extracted/[project]-summary.md using project-summary.md template

Patterns → Skills

For each pattern worth a skill:

1. Load skill-quality-criteria.md
2. Use skill-template.md template
3. Verify the quality checklist:
   • Description has WHAT, WHEN, KEYWORDS
   • No explanations of basics Claude knows
   • Has specific NEVER list
   • < 300 lines ideal
4. Create ai/skills/[project]-[pattern]/SKILL.md

---

Phase 4: Validation

Before writing output, validate extracted content.

For each skill, verify:

• Description has WHAT, WHEN, and trigger KEYWORDS

• 70% expert knowledge (not in base Claude model)

• <300 lines (max 500)
• Has "When to Use" section with clear triggers
• Has code examples (if applicable)
• Has NEVER Do section with anti-patterns
• Project-agnostic (no hardcoded project names)

For documentation, verify:

• Actual values extracted (not placeholders)
• Templates fully filled out
• Aesthetic direction documented (for design systems)
• File paths are correct

Conflict detection: Before creating a new skill, check if similar skills exist:

# Check existing skills in the target repo
ls ai/skills/*/

---

Phase 5: Output

Write extracted content to target locations.

Methodology Documentation:

docs/extracted/
├── [project]-summary.md       # Overall methodology
├── [project]-design-system.md # Design tokens and aesthetic
└── [project]-architecture.md  # Code patterns (if complex)

Skills:

ai/skills/
└── [project]-[category]/
    ├── SKILL.md
    └── references/  # (if needed for detailed content)

Create docs/extracted/ directory if it doesn't exist.

---

Extraction Focus Areas

Design System Extraction (Highest Priority)

When a project has intentional design work, extract thoroughly:

Must capture:

• Color palette (primary, secondary, accent, semantic)
• Typography (fonts, scale, weights)
• Spacing scale
• Motion/animation patterns
• The "vibe" or aesthetic direction

Look in:

• tailwind.config.js / tailwind.config.ts
• globals.css / app.css / root CSS files
• theme.ts / theme.js
• Any design documentation

Generate:

1. Design system documentation with actual values
2. Skill capturing the aesthetic philosophy (if distinctive)

Workflow Extraction

Look for:

• Makefile targets
• package.json scripts
• Docker configurations
• CI/CD workflows

Extract:

• Dev setup commands
• Build processes
• Deployment patterns

---

Error Handling

When extraction fails partially:

1. Complete what can be extracted
2. Document gaps in the project summary
3. Note "Incomplete extraction" in output
4. Suggest what additional information would be needed

---

NEVER Do

• NEVER extract default configurations — Only extract customized, intentional patterns
• NEVER create skills for basic concepts — Claude already knows React, Tailwind basics
• NEVER skip the aesthetic — Design philosophy is highest priority
• NEVER generate skills > 500 lines — Use references/ for detailed content
• NEVER create skills without good descriptions — Description determines if skill activates
• NEVER extract one-off solutions — Focus on patterns used in multiple places
• NEVER skip validation phase — Quality check before writing output
• NEVER leave project names in skills — Make patterns project-agnostic
• NEVER create duplicate skills — Check for existing similar skills first

---

Quality Check Before Finishing

• Design system captured (if one exists)?
• Methodology summary created?
• Skills have proper descriptions (WHAT, WHEN, KEYWORDS)?
• Skills pass the expert knowledge test?
• Anti-patterns documented in skills?
• Output files created in correct locations?

---

After Extraction: Staging for Refinement

If you're extracting to later consolidate patterns across multiple projects:

Copy results to the skills toolkit repo for staging:

# From this project, copy to the skills repo staging area
cp -r ai/skills/[project]-* /path/to/skills-repo/ai/staging/skills/
cp -r docs/extracted/* /path/to/skills-repo/ai/staging/docs/

Staging folder structure:

ai/staging/
├── skills/           # Extracted skills from multiple projects
│   ├── project-a-design-system/
│   ├── project-b-ui-patterns/
│   └── ...
└── docs/             # Extracted methodology docs
    ├── project-a-summary.md
    ├── project-b-design-system.md
    └── ...

After staging content from multiple projects:

• Say "refine staged content" or "consolidate staged skills"
• The refinement process will:
  • Identify patterns across projects
  • Consolidate into project-agnostic skills
  • Update methodology docs with insights
  • Promote refined skills to active locations

---

Related Skills

• Agent: ai/agents/extraction/ — Autonomous extraction workflow
• Command: /extract-patterns — Quick extraction command
• Next step: ai/skills/refinement/ — Consolidate extracted patterns
• Quality criteria: references/skill-quality-criteria.md