Skill

debuginn-promo

Create or edit iPhone screenshot promo images into a square composition with a white background, the uploaded screenshot or graphic on the left, and a main title plus subtitle on the right. Use when the user wants App Store style marketing cards, square social covers, screenshot reframing, or wants an iPhone screenshot turned into a clean title-and-subtitle layout.

From debuginn-promo

Install

Run in your terminal

npx claudepluginhub debuginn/skills

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

assets/sketch.svg

examples/IMG_0310_new.PNG

examples/preview-img-0310-embedded.svg

examples/preview-img-0310-final.png

examples/preview-img-0310.html

examples/preview-img-0310.svg

examples/web-tool-preview.png

references/layout-spec.md

web/index.html

Skill Content

iPhone Screenshot Square Layout

Use this skill when the user wants a reusable workflow for turning an iPhone screenshot into a square cover image.

Target Layout

Canvas: 1:1 square
Background: pure white
Left side: uploaded screenshot, mockup, or graphic
Right side: one strong title and one smaller subtitle
Overall feel: clean, product-first, minimal, Apple-style

Default proportions:

Outer padding: 72px
Left visual area: about 52%
Right text area: about 48%
Gap between visual and text: 40px

Workflow

Confirm or infer the main title and subtitle.
Keep the original screenshot readable. Do not stretch it.
Place the screenshot on the left inside a clean block.
Place the title and subtitle on the right with strong hierarchy.
Keep the background white unless the user explicitly wants another style.
Export or describe the result as a square marketing image.

Style Rules

Prefer black or near-black title text.
Keep subtitle neutral gray.
Avoid decorative shapes unless the user asks for them.
Keep alignment simple and balanced.
If the screenshot itself is busy, keep the typography even simpler.
If no font is specified, use a modern sans serif with a premium feel.

Prompt Template

When generating or editing, use a prompt close to this:

Edit the uploaded iPhone screenshot into a square promotional image.
Use a pure white background.
Place the uploaded screenshot or graphic on the left side, large and clean, without distortion.
Place text on the right side:
Main title: "{TITLE}"
Subtitle: "{SUBTITLE}"
Use a minimal premium layout, strong title hierarchy, generous whitespace, and an Apple-style marketing composition.
Output should be a 1:1 square image.

Missing Inputs

If the user does not provide all text, make a reasonable draft:

Title: short and bold, usually 4-10 Chinese characters or 2-6 English words
Subtitle: one sentence that explains the value

If the user asks for a preview first, provide a quick wireframe before generating the final prompt or asset.

Resources

Layout notes: see references/layout-spec.md
Sketch preview: see assets/sketch.svg
Interactive web tool: see web/index.html

Web Tool Usage

Use the web tool when the user wants quick customization and visual feedback.

Start a local server in the skill root: python3 -m http.server 8123
Open: http://127.0.0.1:8123/plugins/debuginn-promo/skills/debuginn-promo/web/index.html
Customize:
- upload screenshot
- edit title/subtitle
- change background color
- switch title gradient scheme
Export:
- click 导出 PNG

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars1

Parent Repo Forks0

Last CommitApr 3, 2026

Actions

View Source View Plugin View on GitHub View README

debuginn-promo

From debuginn-promo

Target Layout

Canvas: 1:1 square

Background: pure white

Left side: uploaded screenshot, mockup, or graphic

Right side: one strong title and one smaller subtitle

Overall feel: clean, product-first, minimal, Apple-style

Default proportions:

Outer padding: 72px

Left visual area: about 52%

Right text area: about 48%

Gap between visual and text: 40px

Workflow

Confirm or infer the main title and subtitle.

Keep the original screenshot readable. Do not stretch it.

Place the screenshot on the left inside a clean block.

Place the title and subtitle on the right with strong hierarchy.

Keep the background white unless the user explicitly wants another style.

Export or describe the result as a square marketing image.

Prompt Template

When generating or editing, use a prompt close to this:

Edit the uploaded iPhone screenshot into a square promotional image. Use a pure white background. Place the uploaded screenshot or graphic on the left side, large and clean, without distortion. Place text on the right side: Main title: "{TITLE}" Subtitle: "{SUBTITLE}" Use a minimal premium layout, strong title hierarchy, generous whitespace, and an Apple-style marketing composition. Output should be a 1:1 square image.

Web Tool Usage

Use the web tool when the user wants quick customization and visual feedback.

Start a local server in the skill root: python3 -m http.server 8123

Open: http://127.0.0.1:8123/plugins/debuginn-promo/skills/debuginn-promo/web/index.html

Customize:

upload screenshot
edit title/subtitle
change background color
switch title gradient scheme

Export:

click 导出 PNG