Token导航 LogoToken导航TokenDH.com
研究检索只读github未标认证来源可访问许可证需确认审计通过

patch-design贴片设计

Agent Skill

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

总安装

220

周安装

9

GitHub Stars

61

下载量

71
CodexClaudeCursorGemini CLI

安装说明

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

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

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

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

命令行安装

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

skills.shnpx skills
npx skills add https://github.com/melodic-software/claude-code-plugins --skill patch-design

简介

用于辅助界面设计、视觉规范和交互体验优化。

  • 适合整理页面结构或生成 UI 方案。适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。
  • 使用时需结合品牌系统和用户任务。patch-design 属于研究检索类 Skill,可作为该场景下的辅助能力补充。
  • 涉及真实页面改动时应通过预览检查文本溢出。
  • 建议核对设计系统与实际渲染效果的匹配程度。

SKILL.md

Patch Design Skill

Create minimal, surgical patch plans for targeted fixes.

When to Use

  • Fixing specific issues from review
  • Creating focused bug fixes
  • Addressing blockers without scope creep
  • Making targeted improvements

Core Principle

"This is a PATCH - keep the scope minimal. Only fix what's described in the issue and nothing more."

Design Workflow

Step 1: Understand the Specific Issue

Parse the issue clearly:

  • What is broken? (specific behavior)
  • How should it work? (expected behavior)
  • What evidence exists? (screenshots, errors)

Do NOT expand scope beyond the reported issue.

Step 2: Analyze Current State

Review the relevant code:

# Find relevant files
git diff --stat
grep -r "related_function" src/

# Read the specific code
cat src/component/file.ts

Step 3: Determine Minimum Fix

Ask: "What is the smallest change that fixes this?"

ApproachLinesRisk
Surgical fix1-10Low
Targeted fix10-50Medium
Refactor50+High

Always prefer surgical fixes for patches.

Step 4: Create Patch Plan

Document the precise fix:

# Patch: [Concise title]

## Issue Summary
**Problem**: [What's broken]
**Solution**: [Minimal fix]

## Files to Modify
- `path/to/file.ts`: [Specific change]

## Implementation Steps

### Step 1: [Specific action]
[Exact code change]

### Step 2: [Specific action]
[Exact code change]

## Validation
- [Command to verify fix]
- [How to confirm success]

## Patch Scope
- Lines of code: ~X
- Risk level: low
- Testing: [minimal/standard]

Step 5: Define Validation

Every patch needs verification:

## Validation

1. Run specific test: `npm test path/to/test`
2. Manual verification: [steps]
3. Visual check: [if applicable]

Patch Plan Template

# Patch: [Brief description]

## Metadata
- Issue: [Source of this patch request]
- Severity: [blocker/tech_debt]

## Issue Summary
**Original Spec**: [Link if available]
**Problem**: [Brief description of what's wrong]
**Solution**: [Brief description of the fix]

## Files to Modify
[Only files that need changes - be specific]

- `src/component/Button.tsx`: Fix disabled state

## Implementation Steps

IMPORTANT: Execute every step in order.

### Step 1: [Specific change]

<!-- markdownlint-disable MD033 -->

// Before <button onClick={handleClick}>

// After <button onClick={handleClick} disabled={isLoading}>


### Step 2: [Next change if needed]

[Details]

## Validation

Execute to confirm patch is complete:

- `npm test src/component/Button.test.tsx`
- Manual: Click button, verify disabled during load

## Patch Scope

- **Lines changed**: ~5
- **Risk level**: low
- **Testing**: Run component tests

## Anti-Patterns to Avoid

### Scope Creep

BAD: Expanding scope

While fixing the button, I noticed the form could use refactoring, so I'll also update the validation logic, improve the error messages, and add loading states to all other buttons too.


### Vague Changes

BAD: Vague plan

Implementation

  • Fix the button issue
  • Make it work correctly
  • Test to confirm

### No Validation

BAD: No verification

Implementation

  1. Change the code
  2. Done

## Best Practices

1. **One issue, one patch**: Don't bundle fixes
2. **Minimal scope**: Only change what's needed
3. **Specific steps**: Exact code changes
4. **Clear validation**: How to verify success
5. **Risk assessment**: Lines changed, testing needed

## Integration with Review

Patches typically come from review issues:

/review → Identifies blocker ↓ /patch → Creates surgical fix plan ↓ /implement → Executes patch ↓ /review → Verifies fix (re-review)


## Memory References

- @issue-severity-classification.md - What triggers patches
- @review-vs-test.md - Review identifies patch needs
- @one-agent-one-purpose.md - Patches are focused by nature

## Version History

- **v1.0.0** (2025-12-26): Initial release

---

## Last Updated

**Date:** 2025-12-26 **Model:** claude-opus-4-5-20251101

适合场景

01

用户想查找某类 Agent Skill 时

02

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

03

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

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

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

能力 4

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

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

平台分布

Codex

38.36%
按下载量换算27

Claude

27.87%
按下载量换算20

Cursor

20.29%
按下载量换算14

Gemini CLI

10.44%
按下载量换算7

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

只读

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

安装前确认

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

来源信息

继续浏览同类 Skills