design

v1.0.0

Produce wireframes, prototypes, frontend layouts, technical diagrams, evidence-led charts, HTML reports, interactive explainers, and generated or edited images.

Agent Plugins8 Skills

By opspressoLicense: MIT0 GitHub starsUpdated 2 weeks ago

Directory evidence

Runtimes: Agent Plugins
Parsed components: 8 skill or MCP entries
Source updated: Sep 8, 2026
Manifest status: Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Get the plugin

$ git clone https://github.com/opspresso/agent-plugins

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/design/.

This listing currently publishes only the generic Agent Plugins format. Automatic install commands for other clients are not generated yet.

Plugin files

plugins/design/

├── plugin.json
├── skills/diagram-design/SKILL.md
├── skills/frontend-design/SKILL.md
├── skills/html-explainer/SKILL.md
├── skills/html-prototype/SKILL.md
├── skills/html-report/SKILL.md
├── skills/html-wireframe/SKILL.md
├── skills/image-generation/SKILL.md
└── skills/tufte-charts/SKILL.md

Included Skills8

diagram-designskills/diagram-design/SKILL.md

시스템 구조·처리 흐름·상태 전이·시퀀스·데이터 모델·조직도·의존 관계를 정적 다이어그램으로 설계하고 HTML·인라인 SVG로 만든다. 정량 데이터 차트는 tufte-charts, 조작하며 원리를 배우는 설명 페이지는 html-explainer를 쓴다.

frontend-designskills/frontend-design/SKILL.md

웹 페이지·랜딩 페이지·React·Vue 컴포넌트를 설계하고 제품에 사용할 UI 코드로 구현한다. 기존 디자인 시스템을 반영해 반응형 화면과 접근성을 다룬다. 구조 비교용 와이어프레임은 html-wireframe, 시나리오 검증용 목업은 html-prototype을 쓴다.

html-explainerskills/html-explainer/SKILL.md

개념·작동 원리를 단계 버튼·슬라이더·토글로 조작하며 배우는 인터랙티브 HTML 설명 페이지를 만든다. 일반적인 짧은 설명에는 쓰지 않으며, 정적 구조도는 diagram-design, 실제 제품 흐름을 시험하는 목업은 html-prototype을 쓴다.

html-prototypeskills/html-prototype/SKILL.md

제품의 시각 방향을 검토할 목업이나 입력·상태 전환·사용 흐름을 시험할 프로토타입을 자체 완결 HTML로 만든다. 구조 대안 비교는 html-wireframe, 제품에 통합할 UI 코드는 frontend-design을 쓴다.

html-reportskills/html-report/SKILL.md

데이터·메모·조사 결과를 브라우저에서 읽고 인쇄할 HTML 보고서로 구성한다. 산문·표·차트·출처를 외부 의존성 없는 파일 하나에 담는다. 형식 미지정 보고서 파일이나 DOCX·PPTX·PDF·HWPX 요청은 document-authoring을 쓴다.

html-wireframeskills/html-wireframe/SKILL.md

화면 구조·정보 위계·내비게이션을 정하거나 레이아웃 대안을 비교할 때 저충실도 HTML 와이어프레임을 만든다. 회색조 화면으로 정보 배치와 작업 순서를 검토한다. 시각 목업과 동작하는 흐름은 html-prototype, 제품 UI 구현은 frontend-design을 쓴다.

image-generationskills/image-generation/SKILL.md

사진·일러스트·콘셉트 아트를 생성하거나 기존 이미지의 내용·스타일을 편집한다. GenerateImage·EditImage가 있는 런에서 사용한다. 구조도는 diagram-design, 정량 차트는 tufte-charts를 쓴다.

tufte-chartsskills/tufte-charts/SKILL.md

정량 데이터의 비교·추세·분포·상관관계를 차트로 설계하고 HTML·SVG·React 코드로 만든다. 서비스 의존성·조직도·처리 흐름은 diagram-design, 전체 HTML 보고서 구성은 html-report를 쓴다.

Plugin manifests1

plugins/design/plugin.json

{
  "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
  "name": "design",
  "version": "1.0.0",
  "description": "Produce wireframes, prototypes, frontend layouts, technical diagrams, evidence-led charts, HTML reports, interactive explainers, and generated or edited images.",
  "author": {
    "name": "opspresso"
  },
  "repository": "https://github.com/opspresso/agent-plugins",
  "license": "MIT",
  "keywords": [
    "design",
    "frontend",
    "wireframe",
    "prototype",
    "diagrams",
    "svg",
    "charts",
    "images",
    "ui",
    "explainer"
  ]
}