promptschat
Gives Claude Code access to the prompts.chat library, letting you search, retrieve and improve AI prompt templates, and find and install Agent Skills from its registry.
2 skills2 agents2 commands1 MCP+3+2+2+2+1+1+1+1175k
@gh-fContent
Plugin
skills-design
Generates ready-to-use design artifacts such as blog hero images, business cards, carousels, Instagram posts and landing pages as pixel-exact HTML files. Also includes export tools for PDF and HTML-to-PNG.
Plugin Signal47/100Fair
maintained57
capable62
documented30
adopted13
Claude Code
$ npx -y skills add slogsdon/skills-design --agent claude-code
Codex
$ npx skills add slogsdon/skills-design -a codex
Cursor
$ npx skills add slogsdon/skills-design -a cursor
Gemini CLI
$ npx skills add slogsdon/skills-design -a gemini-cli
GitHub Copilot
$ npx skills add slogsdon/skills-design -a github-copilot
OpenCode
$ npx skills add slogsdon/skills-design -a opencode
Windsurf
$ npx skills add slogsdon/skills-design -a windsurf
Stats
3
Stars
0
Forks
Maintained
Maintenance
HTML
Language
MIT
License
Last commit
Created
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
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/design-instagram-postGenerate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080 (square) and 1080×1920 (story / reel cover) modes. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html./design-landing-pageGenerate a deliverable landing-page HTML file (NOT a screenshot artifact). 1440px design width, mobile-responsive (CSS-only, no JS). Sections: hero (full-viewport) + 3 feature blocks + CTA. Designed to be opened in a browser, iterated on, and deployed as-is. Reads/design-link-in-bioGenerate a minimal single-column standalone HTML page — mobile-first at 375px width — for use as a link-in-bio destination. Contains: name/wordmark, short tagline, list of links (each a styled <a> block), social footer. Self-contained, works offline, deployable as-is to GitHub
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.
Stars on GitHub
Momentum
- stars in total
- 3
File tree
Similar plugins.
@gh-fppt-master
A Claude Code skill for generating editable PPTX presentations and slides from a workflow, with reusable brand, style, layout, and deck workspaces, native charts, speaker notes, and template filling.
1 skill75k
@hugohe3officecli
Gives AI agents control over Word, Excel and PowerPoint files, with skills for building .docx reports, academic papers, Excel dashboards and Morph-style animated slides.
11 skills33k
@iofficeaifrontend-slides
A skill that builds animation-rich HTML presentations from scratch or converts PowerPoint files to web slides. Useful for anyone turning a deck into a web presentation.
1 skill32k
@zarazhangruiQuestions about skills-design.
Generates ready-to-use design artifacts such as blog hero images, business cards, carousels, Instagram posts and landing pages as pixel-exact HTML files. Also includes export tools for PDF and HTML-to-PNG. 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. Free and open source.
- What is skills-design?
- Generates ready-to-use design artifacts such as blog hero images, business cards, carousels, Instagram posts and landing pages as pixel-exact HTML files. Also includes export tools for PDF and HTML-to-PNG.
- 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.
- Is skills-design free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
- Which coding agents can use skills-design's skills?
- skills-design installs in Claude Code, and its skills also install in Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI. Each skill's page has the install command. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it