Content
Plugin
skills-design
Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.
Plugin Signal57/100Fair
maintained87
capable62
documented30
adopted13
Install
$ npx -y skills add slogsdon/skills-design --agent claude-code
Stats
3
Stars
0
Forks
Maintained
Maintenance
HTML
Language
MIT
License
1mo ago
Last commit
4mo ago
Created
Repo: slogsdon/skills-design
In this plugin
- design-blog-hero
- design-business-card
- design-carousel-slide
- design-instagram-post
- design-landing-page
- design-link-in-bio
- design-linkedin-post
- design-newsletter-header
- design-plan
- design-quote-card
- design-system
- design-twitter-card
- design-ui-components
- design-youtube-channel-art
- design-youtube-thumbnail
- figure-audit
- pdf-html
- pdf-paginated
- screenshot-html
What's inside
Skill(19 skills)
/design-blog-heroGenerate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero (1440×600) for the article header. Both canvases share the same content + brand tokens; only the proportions differ. Reads/design-business-cardGenerate a printable business card — pixel-exact 1050×600 front canvas + 1050×600 back canvas in a single HTML file. Standard 3.5×2 inch card at 300dpi. Front carries name + title + contact details; back is wordmark-dominant (or brand device) with minimal text. The design/design-carousel-slideGenerate a LinkedIn / Instagram multi-slide carousel — single HTML file with N square 1080×1080 .canvas divs, each representing one slide. Default N=5 (cover + 3 content + closing CTA). Cover and closing always use the brand's most distinctive treatments; middle slides are
README
shane.logsdon.io — writing and projects on agentic workflows, web standards, and payments engineering.
skills-design
Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total.
Install via the slogsdon-claude-code-config marketplace.
Skills
- design-plan — Design planning and briefing
- design-system — Design system tokens and components
- design-ui-components — UI component design
- figure-audit — Decides whether an article should get a figure at all (additive / performative / none)
- design-blog-hero — Blog hero image generator
- design-business-card — Business card design
- design-carousel-slide — Carousel slide generator
- design-instagram-post — Instagram post design
- design-landing-page — Landing page design
- design-link-in-bio — Link-in-bio page design
- design-linkedin-post — LinkedIn post design
- design-newsletter-header — Newsletter header design
- design-quote-card — Quote card design
- design-twitter-card — Twitter card design
- design-youtube-channel-art — YouTube channel art design
- design-youtube-thumbnail — YouTube thumbnail design
- pdf-html — HTML to PDF export
- pdf-paginated — Paginated PDF generation
- screenshot-html — Export HTML artifacts as PNG screenshots
Seven streaming and speaking generators (OBS, Twitch, stream overlay, podcast cover, talk slide, speaker bio card) were removed in 0.2.0 — see CHANGELOG.md.
License
MIT — see LICENSE.
File tree
FAQ
skills-design is a Claude Code plugin with 19 hand-picked skills for content work, indexed on Flowy. Install it with the command on its page. It includes design-blog-hero, design-business-card, design-carousel-slide. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is skills-design?
- Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.
- How do I install skills-design?
- Run these in Claude Code: npx -y skills add slogsdon/skills-design --agent claude-code. Then prompt normally.
- Does skills-design auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is skills-design free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it