Vince Whiteboard

Vince Whiteboard

A local whiteboard image skill: curated colour palette styles plus Vince’s preferred defaults and a strict SVG to PNG verification workflow for making polished whiteboard-style visuals.

This skill does not create online docs, does not upload anything, and does not depend on a remote whiteboard service. The normal deliverable is:

• source SVG
• rendered PNG
• optional short note naming the style and output paths

When To Use

• The user wants a whiteboard, infographic, diagram, poster, visual explainer, teaching graphic, or concept map as a local image.
• The user asks for a PNG board or says they only need a local rendered image.
• The user names one of the bundled styles, or asks for a specific visual vibe.

Step 0: Prerequisites

Run scripts/preflight.sh, or check manually:

• Node 20 or newer.
• Network access for first-time npx use.
• sharp-cli, used through npx -y sharp-cli, for SVG to PNG rendering.

No external account, browser login, or document token is required.

Workflow

1. Understand the board. Identify the content, purpose, audience, target platform, and preferred aspect ratio. If the content or output size is unclear, ask one short question.
2. Ask or infer the vibe. Ask for a visual style if needed. If the user has no preference, pick a fitting style from CATALOG.md, prioritizing Vince’s preferred styles below.
3. Pick a style. Use CATALOG.md to match vibe and formality to one of the 24 styles. Tell the user which style you chose and why, in one line.
4. Build the SVG. Read RULES.md and the chosen templates/<slug>/design.md. Compose the board in SVG using simple shapes and text. Layout is your job; the template only provides palette and mood.
5. Render and inspect. Use scripts/render_png.sh, open the PNG, and fix visible issues: text overflow, cramped padding, accidental overlap, clipping, low contrast, or unreadable scale. Iterate until the PNG is correct.
6. Deliver. Return the PNG path and SVG path. If helpful, embed the PNG in the response with a Markdown image tag using its absolute path. Offer style switching only when it would be useful.

Vince Style Preferences

When the user does not name a style, prefer these styles before the general catalogue:

1. Checker Bloom — friendly, hand-painted, clear, good for口播插图 and concept explainers.
2. Lime Slab — electric, modern SaaS, good for AI tool and workflow diagrams.
3. Grove Block — confident green, brand-forward, good for practical operational diagrams.
4. Specimen Bold — graphic and loud, good for single strong claims or title-card inserts.
5. Violet Marker — highlighter-like and friendly, good for casual teaching boards.
6. Cut Bloom — softer and calmer, good when the board should not overpower the speaker.
7. Avocado Press — clean duotone, good for concise comparison and process diagrams.

Avoid defaulting to Raw Grid or Mint Brut for Vince unless explicitly requested; they have already felt too hard or too candy-like for his current口播 inserts.

Files

• RULES.md: local SVG composition and PNG verification rules. Always read this.
• CATALOG.md: styles with vibe and formality. Use it to choose.
• templates/<slug>/design.md: one style file per palette.
• assets/styles/: reference previews for each style.
• scripts/preflight.sh: dependency check.
• scripts/render_png.sh: render an SVG file to PNG locally.