design: refresh marketplace icon (navy shield + teal accent)#18
Conversation
…eck) Replaces the wireframe shield with a solid navy fill, a teal accent border, a 25%-opacity inner ribbon for depth, and a thick teal check with round caps. The shape stays brand-coherent with the existing galleryBanner.color (#04101a) and matches concept B from .claude/design_system/vscode-icon.html. Why B over A/C/D - A (solid teal shield) reads "security check" but loses the duotone brand palette and looks like every other security tool. - C (// pc monogram) is the most distinctive but cold-start users have to know "pc = pipeline-check" before the icon tells them anything — bad bet for a still-young extension. - D (pipeline stages with scan node) is the most literal but the three-node detail blurs at the 36×36 search-result thumbnail size. - B keeps the duotone, reads instantly as a security tool, and stays legible at every size the marketplace renders. Implementation - media/icon-source.svg: new file. The source of truth, easy to edit by hand if the design needs to evolve. - scripts/gen_icon.py: rewritten. Renders at 4× supersample (512×512) and downsamples with Lanczos for smooth edges that PIL's default antialiasing can't produce. Quadratic-Bezier sampling for the shield curves; explicit round-cap ellipses on the check endpoints to match SVG's stroke-linecap="round". - icon.png: regenerated. 7.9 KB. - .vscodeignore: excludes media/icon-source.svg and .claude/** so the source SVG and design references don't ship in the .vsix. Activity-bar icon (media/pipeline-check.svg, the inverted-Y pipeline glyph) deliberately stays as-is — different surface, different communication need. The marketplace icon says "this checks something"; the activity-bar icon says "this is about pipelines". Other design surfaces audited and found OK as-is: galleryBanner.color (navy, matches), status bar codicon ($(shield), matches), Findings tree severity icons (standard codicons, intentional VS Code convention), viewsWelcome state (polished in ux-polish PR). Also: .gitignore gains .claude/ (the user-added design references stay local; they're not shipped or git-tracked). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Summary
Replaces the wireframe marketplace icon with concept B from .claude/design_system/vscode-icon.html — a solid navy shield with a teal accent border, a subtle inner ribbon for depth, and a bold teal check.
Why concept B (over A / C / D)
// pcmonogram) — most distinctive, leans into the developer-tool aesthetic, but cold-start users have to knowpc = pipeline-checkbefore the icon tells them anything. Bad bet for a still-young extension.What changed
media/icon-source.svg(new) — the source of truth, easy to hand-edit if the design evolves.scripts/gen_icon.py— rewritten. Renders at 4× supersample (512×512) and downsamples with Lanczos for smooth edges PIL's default antialiasing can't produce. Quadratic-Bezier sampling for the shield curves; explicit round-cap ellipses for the check endpoints to match SVG'sstroke-linecap="round".icon.png— regenerated..vscodeignore— excludesmedia/icon-source.svgand.claude/**so the source SVG and design references don't ship in the.vsix..gitignore— gains.claude/(user-added; the design references stay local).Activity-bar icon deliberately not touched
media/pipeline-check.svg(the inverted-Y pipeline glyph) stays as-is. Different surface, different communication: the marketplace icon needs to sell "this checks something" against dozens of CI/lint extensions, the activity-bar icon needs to silhouette the panel's domain ("pipelines") in monochrome at 24×24.Test plan
python scripts/gen_icon.pyproduces the expected iconnpx vsce lsconfirmsicon.pngships andmedia/icon-source.svg+.claude/**don'tnpm run lint,npm run compile,npm test,npm run smoke— all green.vsix).Shipping
The marketplace listing's icon only updates when a new
.vsixis uploaded — there's no separate "refresh icon" API. So this lands onmain, then either:v0.2.1icon-only patch release if you want the listing to look polished now.Recommend the second: the listing's bare-bones look (no screenshots, retired badges till PR #17 merges, generic icon) is the highest-leverage marketplace-conversion improvement. Even a one-line bump release ships the new icon to every user who lands on the listing.
🤖 Generated with Claude Code