/design-ui-components
Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER
$ npx -y skills add slogsdon/skills-design --skill design-ui-components --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/design-ui-components
Context preview
The summary Claude sees to decide when to auto-load this skill.
Generate components.html — a brand-agnostic component library that pulls from a project's DESIGN.md tokens. Includes buttons, cards, badges, eyebrows, hairlines, code blocks, callouts, hero blocks, stat callouts, list items, avatar frames, pull quotes, footer blocks. Use AFTER
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.
Repo: slogsdon/skills-design
Other skills on skills-design.
- /design-blog-hero
Generate 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
Open skill - /design-business-card
Generate 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
Open skill - /design-carousel-slide
Generate 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
Open skill - /design-instagram-post
Generate 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.
Open skill - /design-landing-page
Generate 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
Open skill - /design-link-in-bio
Generate 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
Open skill