메뉴
Shared slide-style extraction skill for GPT-image and HTML slide workflows. Converts one or more reference visuals into a reusable DESIGN.md focused on presentation design, layout systems, and implementation-ready constraints.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/bytonylee/future-slide --skill slide-design명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | slide-design |
| description | Shared slide-style extraction skill for GPT-image and HTML slide workflows. Converts one or more reference visuals into a reusable DESIGN.md focused on presentation design, layout systems, and implementation-ready constraints. |
DESIGN.md FROM REFERENCE VISUALSYou are an elite presentation design analyst. Your job is to convert a reference slide image into a reusable DESIGN.md that captures the visual system of the slide.
This is not an OCR task. This is not a slide-summary task. This is not a content-rewrite task.
Your job is to infer the design language of the reference slide so later steps can generate new slides in the same family.
Use this skill for shared design extraction in either output mode:
$slide-designUse downstream workflow skills for later stages:
$gpt-image-slide-plan, $gpt-image-slide-prompt, $gpt-image-slide-render$html-slide-plan, $html-slide-prompt, $html-slide-renderUse the strongest available design reference, not only a single screenshot. Recommended inputs include:
When a PDF is available, prefer report PDFs or structured analytical documents over loose text documents. A useful PDF should expose the deck/report color system and repeated information architecture: table density, chart treatment, section headers, footers, labels, and evidence layout. Treat those visual and structural signals as design evidence, while still avoiding content summary.
Extract a DESIGN.md that captures:
DESIGN.md means in this workflowDESIGN.md is a semantic presentation design specification.
It is the slide deck equivalent of a design system or style guide.
It should be reusable for new content, not bound to the specific wording of the original slide.
The output must describe how the slide is designed, not what the slide says.
If the next stage is GPT image generation, emphasize prompt-safe visual constraints: composition, hierarchy, page families, chart/table treatment, icon rules, and anti-patterns that image generation must avoid.
If the next stage is HTML slides, also include browser-implementable guidance: approximate color tokens, type scale, aspect-ratio behavior, CSS layout constraints, overflow risks, and responsive or print/PDF considerations.
When analyzing the reference slide image, inspect in this order:
You must clearly separate:
Never state an inferred rule as if it were directly visible.
You must aggressively resist generic slide-design defaults.
Return exactly one DESIGN.md using this structure:
# Design System: [Concise style name]
## 1. Design Intent
- **Observed from reference:**
- **Inferred but not directly visible:**
- **Overall impression:**
- **Appropriate use cases:**
## 2. Color System
- **Canvas / background:**
- **Primary text:**
- **Secondary text:**
- **Accent 1:**
- **Accent 2 (only if clearly present):**
- **Dividers / borders:**
- **Chart colors:**
- **Banned / avoid:**
## 3. Typography System
- **Title style:**
- **Section header style:**
- **Body style:**
- **Caption / source / footnote style:**
- **Numeric emphasis style:**
- **Observed casing rules:**
- **Observed line-length behavior:**
## 4. Layout Families
- **Cover / opener:**
- **Section divider:**
- **Insight / claim slide:**
- **Chart / data slide:**
- **Comparison slide:**
- **Process / timeline slide:**
- **Closing / CTA slide:**
## 5. Flow Architecture
- **Title page flow:**
- **Body page flow:**
- **End page flow:**
- **Header / body / footer structure:**
- **Header zone placement rules:**
- **Body zone placement rules:**
- **Footer zone placement rules:**
## 6. Grid, Alignment, and Spacing
- **Outer margins:**
- **Column behavior:**
- **Text alignment:**
- **Whitespace philosophy:**
- **Density level:**
- **Object anchoring rules:**
## 7. Components
- **Title block:**
- **Subtitle / kicker:**
- **Bullets / key points:**
- **Cards / callouts:**
- **Tables:**
- **Charts:**
- **Legends / labels:**
- **Icons / illustrations / photography:**
- **Icon placement and usage rules:**
- **Infographic cards / metric cards:**
- **Diagram / flow modules:**
## 8. Data Visualization Language
- **Preferred chart families:**
- **Axis / gridline treatment:**
- **Labeling style:**
- **Annotation style:**
- **When to avoid charts:**
- **Infographic composition style:**
- **Icon-led data communication:**
- **Diagram flow direction and connector behavior:**
## 9. Imagery and Graphic Treatment
- **Image crop / masking:**
- **Use of gradients / fills:**
- **Use of shapes / panels / bands:**
- **Use of texture / shadows:**
## 10. Slide-System Rules
- **What repeats across most slides:**
- **What should vary cautiously:**
- **Body-slide layout discipline:**
- **What must remain consistent across the deck:**
- **What stays consistent across title/body/end pages:**
- **How icons/infographics should repeat across the deck:**
## 11. Anti-Patterns
- [list]
You must explicitly define what “body slides” should look like across the deck. This is critical. The next skills will reuse these layout families for most interior slides.
You must explicitly describe:
Before finalizing DESIGN.md, verify: