Token导航 LogoToken导航

Agent Skill · 前端设计

design-patterns(设计模式)

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

design-patterns 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为只读;许可证信息还不明确,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 9,124。

总安装 235周安装 10GitHub Stars 2下载 82核验 2026-05-01

安装说明

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

安装方式

通过对话安装

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

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

命令行安装

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

skills.shnpx skills
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-software-design --skill design-patterns

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

用于辅助软件架构设计与模式应用参考。适合梳理 Observer、Factory 等模式适用场景。需结合具体语言特性实现解耦方案。design-patterns 属于前端设计类 Skill,可作为该场景下的辅助能力补充。避免为用模式而增加不必要的抽象层。安装后建议用 UML 图验证类关系合理性。

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

上手步骤

4 步
  1. 1

    确认自己的宿主工具

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

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/pluginagentmarketplace/custom-plugin-software-…;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

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

  4. 4

    按最小权限试用

    它标注为只读,先用只读任务试一次,确认行为符合预期再扩大使用范围。

常见问题

6 条

design-patterns 怎么安装?

在终端执行 npx skills add https://github.com/pluginagentmarketplace/custom-plugin-software-design --s…。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

design-patterns 支持哪些 AI 工具?

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

design-patterns 需要什么权限?

权限级别是只读。该 Skill 主要提供规则、说明或参考内容,本身偏只读;真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

design-patterns 是免费的吗?

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

design-patterns 用的人多吗?

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

design-patterns 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

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

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 第三方扫描已通过,常见的高风险行为没有命中。
  • 标注为只读权限,试用阶段不容易误改本地文件。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。
  • 只想先试试效果、不希望它改动本地文件的人。

不太适合

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

前端设计类 Skill 对比

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

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
design-patterns

设计模式 · 本页

2352只读未明确通过

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

SKILL.md 原文

Design Patterns Skill

Atomic skill for design pattern identification and implementation

Skill Definition

skill_id: design-patterns
responsibility: Single - Pattern identification, implementation, teaching
atomic: true
idempotent: true

Parameter Schema

interface SkillParams {
  // Required
  action: 'identify' | 'implement' | 'detect_antipattern' | 'teach';

  // Conditional
  problem_description?: string;    // Required for 'identify'
  pattern_name?: string;           // Required for 'implement', 'teach'
  code?: string;                   // Required for 'detect_antipattern'
  language?: string;               // Required for 'implement'

  // Optional
  category?: 'creational' | 'structural' | 'behavioral';
  include_uml?: boolean;
}

interface SkillResult {
  patterns?: PatternMatch[];       // For identify
  implementation?: string;         // For implement
  antipatterns?: AntipatternReport[]; // For detect
  explanation?: PatternExplanation;   // For teach
}

Validation Rules

input_validation:
  action:
    required: true
    enum: [identify, implement, detect_antipattern, teach]

  problem_description:
    required_when: action == 'identify'
    min_length: 20

  pattern_name:
    required_when: action in ['implement', 'teach']
    valid_patterns: [singleton, factory, builder, adapter, decorator, observer, strategy, command, ...]

  language:
    required_when: action == 'implement'
    allowed: [typescript, javascript, python, java, csharp, go, ruby, kotlin]

Retry Logic

retry_config:
  max_attempts: 3
  backoff:
    type: exponential
    initial_delay_ms: 1000
    max_delay_ms: 8000
    multiplier: 2

  retryable_errors:
    - TIMEOUT
    - RATE_LIMIT

  non_retryable_errors:
    - INVALID_PATTERN
    - UNSUPPORTED_LANGUAGE

Logging & Observability

logging:
  level: INFO
  events:
    - pattern_identification_started
    - pattern_matched
    - implementation_generated
    - antipattern_detected
    - teaching_session_started

metrics:
  - name: pattern_match_confidence
    type: gauge
  - name: patterns_identified_count
    type: counter
  - name: implementation_generation_time_ms
    type: histogram

tracing:
  span_name: design_patterns_skill
  attributes:
    - action
    - pattern_name
    - language

Pattern Catalog

Creational Patterns

singleton:
  intent: Ensure single instance with global access
  indicators:
    - Global state requirement
    - Resource pooling
    - Configuration management
  implementation_variants:
    - eager
    - lazy
    - thread_safe

factory_method:
  intent: Delegate object creation to subclasses
  indicators:
    - Multiple product types
    - Creation logic varies by context
  implementation_variants:
    - simple_factory
    - factory_method
    - abstract_factory

builder:
  intent: Construct complex objects step by step
  indicators:
    - Many constructor parameters
    - Optional parameters
    - Immutable objects with variations

Structural Patterns

adapter:
  intent: Make incompatible interfaces compatible
  indicators:
    - Legacy system integration
    - Third-party library wrapping
  implementation_variants:
    - class_adapter
    - object_adapter

decorator:
  intent: Add behavior dynamically
  indicators:
    - Feature combinations
    - Subclass explosion risk
  implementation_variants:
    - inheritance_based
    - composition_based

facade:
  intent: Simplified interface to complex subsystem
  indicators:
    - Multiple subsystem interactions
    - Complex initialization sequences

Behavioral Patterns

observer:
  intent: One-to-many dependency notification
  indicators:
    - Event systems
    - State change propagation
  implementation_variants:
    - push_model
    - pull_model
    - reactive_streams

strategy:
  intent: Encapsulate interchangeable algorithms
  indicators:
    - Multiple algorithm variants
    - Runtime algorithm selection
  implementation_variants:
    - interface_based
    - function_based

command:
  intent: Encapsulate requests as objects
  indicators:
    - Undo/redo requirements
    - Request queuing
    - Macro recording

Usage Examples

Pattern Identification

// Input
{
  action: "identify",
  problem_description: "I need to create different types of documents (PDF, Word, HTML) and the creation logic is complex for each type"
}

// Output
{
  patterns: [
    {
      name: "Factory Method",
      fit_score: 0.92,
      rationale: "Multiple product types with varying creation logic",
      category: "creational"
    },
    {
      name: "Abstract Factory",
      fit_score: 0.78,
      rationale: "Could work if document families are needed",
      category: "creational"
    }
  ]
}

Pattern Implementation

// Input
{
  action: "implement",
  pattern_name: "observer",
  language: "typescript"
}

// Output
{
  implementation: `
    interface Observer<T> {
      update(data: T): void;
    }

    class Subject<T> {
      private observers: Observer<T>[] = [];

      subscribe(observer: Observer<T>): void {
        this.observers.push(observer);
      }

      unsubscribe(observer: Observer<T>): void {
        this.observers = this.observers.filter(o => o !== observer);
      }

      notify(data: T): void {
        this.observers.forEach(o => o.update(data));
      }
    }
  `
}

Unit Test Template

describe('DesignPatternsSkill', () => {
  describe('identify', () => {
    it('should recommend Factory for object creation scenarios', async () => {
      const result = await skill.execute({
        action: 'identify',
        problem_description: 'Need to create different payment processors based on payment type'
      });

      expect(result.patterns[0].name).toBe('Factory Method');
      expect(result.patterns[0].fit_score).toBeGreaterThan(0.8);
    });
  });

  describe('implement', () => {
    it('should generate valid TypeScript for Observer pattern', async () => {
      const result = await skill.execute({
        action: 'implement',
        pattern_name: 'observer',
        language: 'typescript'
      });

      expect(result.implementation).toContain('interface Observer');
      expect(result.implementation).toContain('subscribe');
      expect(result.implementation).toContain('notify');
    });
  });

  describe('detect_antipattern', () => {
    it('should detect God Object antipattern', async () => {
      const code = `class AppManager { /* 50 methods */ }`;

      const result = await skill.execute({
        action: 'detect_antipattern',
        code
      });

      expect(result.antipatterns).toContainEqual(
        expect.objectContaining({ name: 'God Object' })
      );
    });
  });
});

Error Handling

errors:
  INVALID_PATTERN:
    code: 400
    message: "Unknown pattern name"
    recovery: "Check pattern catalog for valid names"

  UNSUPPORTED_LANGUAGE:
    code: 400
    message: "Language not supported for implementation"
    recovery: "Use supported language or request teaching mode"

  INSUFFICIENT_CONTEXT:
    code: 400
    message: "Problem description too vague"
    recovery: "Provide more specific requirements"

Integration

requires:
  - code_generator
  - pattern_matcher

emits:
  - pattern_identified
  - pattern_implemented
  - antipattern_detected

consumed_by:
  - 02-design-patterns (bonded agent)
  - 01-design-principles (for pattern suggestions)
  - 04-refactoring (for antipattern fixes)

平台分布

Codex

34.65%
按下载量换算28

Claude

29.11%
按下载量换算24

Cursor

19.5%
按下载量换算16

Gemini CLI

9.9%
按下载量换算8

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

只读

该 Skill 主要提供规则、说明或参考内容,本身偏只读;真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

安装前确认

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

继续浏览同类 Skills