---
title: "design"
description: "Produce wireframes, prototypes, frontend layouts, technical diagrams, evidence-led charts, HTML reports, interactive explainers, and generated or edited images."
canonical: https://agentpluginsdirectory.com/plugins/design
last-updated: 2026-09-23
---

# design
Produce wireframes, prototypes, frontend layouts, technical diagrams, evidence-led charts, HTML reports, interactive explainers, and generated or edited images.
- Slug: design
- Publisher: opspresso
- Repository: https://github.com/opspresso/agent-plugins
- Manifest: plugins/design/plugin.json
- Version: 1.0.0
- License: MIT
- Category (editorial): design-frontend
- Skills: 8 (diagram-design, frontend-design, html-explainer, html-prototype, html-report, html-wireframe, image-generation, tufte-charts)
- MCP servers: 0
- Stars: 0
- Repository created: 2026-08-09
- Repository last pushed: 2026-09-23
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/design
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## Skills

- diagram-design: 시스템 구조·처리 흐름·상태 전이·시퀀스·데이터 모델·조직도·의존 관계를 정적 다이어그램으로 설계하고 HTML·인라인 SVG로 만든다. 정량 데이터 차트는 tufte-charts, 조작하며 원리를 배우는 설명 페이지는 html-explainer를 쓴다.
- frontend-design: 웹 페이지·랜딩 페이지·React·Vue 컴포넌트를 설계하고 제품에 사용할 UI 코드로 구현한다. 기존 디자인 시스템을 반영해 반응형 화면과 접근성을 다룬다. 구조 비교용 와이어프레임은 html-wireframe, 시나리오 검증용 목업은 html-prototype을 쓴다.
- html-explainer: 개념·작동 원리를 단계 버튼·슬라이더·토글로 조작하며 배우는 인터랙티브 HTML 설명 페이지를 만든다. 일반적인 짧은 설명에는 쓰지 않으며, 정적 구조도는 diagram-design, 실제 제품 흐름을 시험하는 목업은 html-prototype을 쓴다.
- html-prototype: 제품의 시각 방향을 검토할 목업이나 입력·상태 전환·사용 흐름을 시험할 프로토타입을 자체 완결 HTML로 만든다. 구조 대안 비교는 html-wireframe, 제품에 통합할 UI 코드는 frontend-design을 쓴다.
- html-report: 데이터·메모·조사 결과를 브라우저에서 읽고 인쇄할 HTML 보고서로 구성한다. 산문·표·차트·출처를 외부 의존성 없는 파일 하나에 담는다. 형식 미지정 보고서 파일이나 DOCX·PPTX·PDF·HWPX 요청은 document-authoring을 쓴다.
- html-wireframe: 화면 구조·정보 위계·내비게이션을 정하거나 레이아웃 대안을 비교할 때 저충실도 HTML 와이어프레임을 만든다. 회색조 화면으로 정보 배치와 작업 순서를 검토한다. 시각 목업과 동작하는 흐름은 html-prototype, 제품 UI 구현은 frontend-design을 쓴다.
- image-generation: 사진·일러스트·콘셉트 아트를 생성하거나 기존 이미지의 내용·스타일을 편집한다. GenerateImage·EditImage가 있는 런에서 사용한다. 구조도는 diagram-design, 정량 차트는 tufte-charts를 쓴다.
- tufte-charts: 정량 데이터의 비교·추세·분포·상관관계를 차트로 설계하고 HTML·SVG·React 코드로 만든다. 서비스 의존성·조직도·처리 흐름은 diagram-design, 전체 HTML 보고서 구성은 html-report를 쓴다.

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.