← ClaudeAtlas

design-business-cardlisted

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 system's most reduced artifact — tests whether the brand can speak with almost no text. Print bleed instructions in footer comment. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "business card", "calling card", "name card", "/business-card".
slogsdon/skills-design · ★ 2 · Web & Frontend · score 73
Install: claude install-skill slogsdon/skills-design
# Skill: business-card Produces a single self-contained HTML file containing **two pixel-exact 1050×600 canvases** — the front and back of a standard 3.5×2 inch business card at 300dpi. Print-ready dimensions; bleed and crop notes documented at the end of the file. This skill is the most extreme reduction test in the platform-skills set. A business card has ~6 square inches of total real estate; the brand must speak with nearly no text. If the brand can't hold its identity at this scale, the design system has a problem worth surfacing. ## When to use - User needs printed business cards (or digital equivalents — Apple Wallet, Linktree alternative) - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, name, title/role - **Required:** primary contact (email OR URL — pick the one most likely to lead to a conversation) - **Optional:** secondary contact (the other of email/URL) - **Optional:** location (city · timezone) - **Optional:** secondary handle (e.g. GitHub for engineering brands) ## Output `./design/<brand-slug>/artifacts/business-card-YYYY-MM-DD-<slug>.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design/<brand-slug>/tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Name — as it should appear on the card 2. Title / role — short, sentence-case (no periods on titles — they're labels not sentences) 3. Primary contact — pick ONE: email OR URL (the one you most want to receive) 4. Optional secondary contact — the