# Business Card

> >

- **Type:** Skill
- **Install:** `agentstack add skill-nasrulhazim-agent-skills-business-card`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [nasrulhazim](https://agentstack.voostack.com/s/nasrulhazim)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [nasrulhazim](https://github.com/nasrulhazim)
- **Source:** https://github.com/nasrulhazim/agent-skills/tree/main/skills/business-card

## Install

```sh
agentstack add skill-nasrulhazim-agent-skills-business-card
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Business Card Designer

A professional SVG business card design system following a four-phase workflow: interview,
concept exploration, selection/refinement, and production export. All output is pure SVG
with interactive HTML preview galleries featuring front/back flip animation.

## Entry Points

| Trigger | Action |
|---|---|
| `/card design` | Full flow — interview then generate |
| `/card quick` | Minimal interview, smart defaults, 6 concepts |
| `/card back` | Design or redesign back of card only |
| `/card export` | Production SVGs from existing chosen design |
| "design business card", "buat kad bisnes" | Full flow |
| "create name card", "reka kad perniagaan" | Full flow |
| "I need a business card" | Full flow |
| "design kad nama" | Full flow |

---

## Design Options Menu

When interviewing the user, present these options. User can mix and match freely.

### Layout Styles

| Style | Description | Best For |
|---|---|---|
| **Minimal** | Clean whitespace, left-aligned text, no decorative elements | Tech, startups, freelancers |
| **Corporate** | Centered layout, logo prominent, structured hierarchy | Finance, consulting, enterprise |
| **Creative** | Asymmetric layout, bold color blocks, unique composition | Design agencies, artists, media |
| **Elegant** | Thin borders, refined typography, generous margins | Luxury, fashion, law firms |
| **Bold** | Large name, strong contrast, dark backgrounds | Personal brands, speakers, coaches |
| **Tech** | Monospace hints, code-bracket accents, GitHub prominence | Developers, engineers, DevOps |

### Color Schemes

| Scheme | Description | Characteristics |
|---|---|---|
| **Monochrome** | Single color + black/white | Professional, versatile, print-friendly |
| **Brand Colors** | Derived from project/brand palette | Consistent with existing identity |
| **Gradient** | Linear or radial gradient accents | Modern, tech-forward, dynamic |
| **Dark Mode** | Dark background, light text | Bold, distinctive, premium feel |
| **Light/Clean** | White background, subtle accents | Classic, safe, works everywhere |
| **Accent Pop** | Neutral base with one vibrant accent color | Eye-catching yet professional |

### Typography Emphasis

| Emphasis | Description | Effect |
|---|---|---|
| **Name-focused** | Name large (28-36px), other details smaller | Personal brand prominence |
| **Title-focused** | Role/title prominent, name secondary | Position/authority emphasis |
| **Balanced** | Equal visual weight across elements | Traditional, formal presentation |

### Card Orientation

| Orientation | Dimensions | ViewBox | Best For |
|---|---|---|---|
| **Horizontal** | 3.5" x 2" (standard) | `0 0 1050 600` | Most uses, traditional |
| **Vertical** | 2" x 3.5" (portrait) | `0 0 600 1050` | Creative, distinctive, modern |

### Back Design Options

| Back Style | Description | Best For |
|---|---|---|
| **Blank** | Empty white/colored back | Cost-effective printing |
| **Solid Color** | Single brand color fill | Clean, bold statement |
| **Pattern** | Geometric or organic SVG pattern fill | Distinctive, memorable |
| **Logo Centered** | Logo mark centered on colored background | Brand reinforcement |
| **Information** | Secondary contact details, tagline, or QR code | Maximizing card real estate |

### Special Elements

| Element | Description |
|---|---|
| **QR Code** | Placeholder rect for vCard URL (120x120px, actual QR needs external tool) |
| **Social Icons** | Row of social media icon placeholders (LinkedIn, X, GitHub, Instagram) |
| **Logo Placement** | Top-left, top-right, bottom-left, bottom-right, or centered |
| **Decorative Lines** | Horizontal dividers, accent bars, corner accents |
| **Accent Shapes** | Geometric elements (circles, triangles, diagonal cuts) |

---

## Phase 0: Contact & Brand Interview

### 0.1 Core Questions

Ask conversationally in one message. Extract what you can from context (CLAUDE.md, project files)
and only ask what is missing:

1. **Full name** and any credentials/suffix (e.g. "Dr.", "PhD", "CPA")
2. **Title / Role** (e.g. "Senior Software Engineer", "Founder & CEO")
3. **Company / Organization name**
4. **Phone number(s)** (mobile, office)
5. **Email address**
6. **Website URL**
7. **Physical address** (optional — street, city, state, zip)
8. **Social media handles** (optional — LinkedIn, X/Twitter, GitHub, Instagram)
9. **Logo file path** (if exists in project — SVG preferred)
10. **Tagline** (optional — company slogan or personal motto)
11. **Brand colors** (specific hex values, "use project colors", or "you decide")
12. **Layout style** — present the 6 options, or "you decide"
13. **Card orientation** — horizontal or vertical
14. **Back design** — present the 5 options, or "no back" / "you decide"
15. **What to avoid** — styles, colors, cliches to skip

### 0.2 Smart Defaults

If user doesn't specify all options, apply smart defaults based on industry/context:

| Industry | Default Layout | Default Scheme | Default Orientation | Default Back |
|---|---|---|---|---|
| Tech / Startup | minimal | dark mode | horizontal | solid color |
| Corporate / Finance | corporate | monochrome | horizontal | logo centered |
| Creative / Design | creative | gradient | vertical | pattern |
| Luxury / Fashion | elegant | monochrome | horizontal | solid color |
| Freelancer / Personal | bold | accent pop | horizontal | information |
| General | minimal | brand colors | horizontal | solid color |

### 0.3 Confirm Selections

Before generating, summarize the user's choices:

```
Name:        Nasrul Hazim
Title:       Senior Software Engineer
Company:     CleaniqueCoders Sdn Bhd
Phone:       +60 12-345 6789
Email:       nasrul@cleaniquecoders.com
Website:     cleaniquecoders.com
Layout:      Minimal
Scheme:      Dark Mode
Orientation: Horizontal (3.5" x 2")
Back:        Logo Centered
Colors:      #1e293b (slate-800), #3b82f6 (blue-500)
```

Get confirmation before proceeding to Phase 1.

---

## Phase 1: Concept Exploration

### 1.1 Generate 12 SVG Front Concepts

Create **12 front design concepts** as individual SVG files.

**Naming:** `card-{01-12}-{description}.svg`
- Example: `card-01-minimal-left.svg`, `card-05-bold-dark.svg`

**SVG Requirements:**
- Horizontal viewBox: `0 0 1050 600` (3.5" x 2" at 300dpi ratio)
- Vertical viewBox: `0 0 600 1050`
- All text as `` elements with `font-family="system-ui, -apple-system, 'Segoe UI', sans-serif"`
- Self-contained — no external fonts, no raster images
- Include background `` for preview (production versions strip it)
- Safe zone: 30px inset from all edges (0.1" print margin)
- Use the user's brand colors consistently

**Text sizing guidelines (horizontal card):**
- Name: `font-size="32"` to `font-size="36"`, `font-weight="700"`
- Title/Role: `font-size="16"` to `font-size="20"`, `font-weight="400"` or `"500"`
- Contact details: `font-size="13"` to `font-size="14"`, `font-weight="400"`
- Social handles: `font-size="11"` to `font-size="13"`, `font-weight="400"`
- Company name: `font-size="14"` to `font-size="18"`, `font-weight="600"`

**Diversity rules across 12 concepts:**
- Cards 1-3: Direct interpretation of user's brief (safe/expected)
- Cards 4-6: Different layout arrangement of same information
- Cards 7-9: Stylistic twist (different color treatment, typography weight)
- Cards 10-12: Experimental/creative direction

### 1.2 Generate Back Designs (if requested)

Create **4 back design concepts** if user wants a back design:

**Naming:** `card-back-{01-04}-{description}.svg`
- Example: `card-back-01-solid-blue.svg`, `card-back-03-pattern-dots.svg`

Back designs must use the same viewBox as the front (horizontal or vertical).

### 1.3 Build Preview Gallery

Create `preview-gallery.html` — a grid gallery of all concepts.

Read `references/card-gallery-template.md` for the HTML template.

**Gallery requirements:**
- Dark background default
- 3-column responsive grid (cards are 7:4 landscape rectangles)
- Each cell shows the SVG at realistic proportions with subtle shadow
- Click to select with brand-color border highlight
- Dark/light mode toggle
- "Show Backs" toggle if back designs exist
- Card numbers and descriptions visible

### 1.4 Build Individual Showcase

Create `showcase.html` — individual card showcase with flip animation.

Read `references/card-showcase-template.md` for the HTML template.

**Showcase requirements:**
- Card displayed at realistic scale (350px wide) with subtle shadow
- CSS 3D flip animation (click or spacebar to flip between front/back)
- Navigation arrows for browsing all concepts
- Download SVG button
- Background toggle (brand color, dark, light)
- Thumbnail strip at bottom

### 1.5 Present Phase 1 Output

Tell the user:
- "Open `preview-gallery.html` to see all 12 front designs in a grid"
- "Open `showcase.html` to browse each card individually (click to flip)"
- "Tell me which card number you prefer, or describe what you like"

---

## Phase 2: Selection & Refinement

### 2.1 Gather Feedback

User picks a concept direction. Clarify:
- Which card number?
- Any changes to layout, colors, or typography?
- Adjust spacing or element positions?
- Keep same back design or change?

### 2.2 Generate 4 Refined Variations

Based on selected concept, create **4 polished variations**:

| File | Description |
|---|---|
| `final-01-{name}.svg` | Primary refined version |
| `final-02-{name}.svg` | Typography variation (different weight/size balance) |
| `final-03-{name}.svg` | Layout variation (repositioned elements) |
| `final-04-{name}.svg` | Color/style variation (different accent or treatment) |

Plus back design refinement if applicable: `final-back-{name}.svg`

### 2.3 Build Refinement Preview

Update `preview-gallery.html` to show the 4 refined versions with:
- Large preview (prominent, centered)
- Side-by-side comparison of all 4
- Front/back pair view
- Dark and light background comparison

### 2.4 Present Phase 2 Output

Ask: "Which version is the winner? Any final tweaks before I prepare print-ready files?"

---

## Phase 3: Production Export

### 3.1 Create Production SVG Set

From the chosen final card, generate:

| File | Spec |
|---|---|
| `production/card-front.svg` | Front design, NO bg rect, production-ready |
| `production/card-back.svg` | Back design (if exists), NO bg rect |
| `production/card-front-dark.svg` | Front for dark contexts (inverted if needed) |
| `production/card-front-light.svg` | Front for light contexts |
| `production/card-print-front.svg` | Print-ready: bleed area + crop marks |
| `production/card-print-back.svg` | Print-ready back: bleed area + crop marks |

**Production rules:**
- NO background `` in non-print versions
- Print versions include:
  - 0.125" bleed extension (37.5px at 300dpi each side)
  - ViewBox expanded to `0 0 1125 675` for horizontal (with bleed)
  - Thin crop marks at corners (0.5px stroke)
  - Content within trim area via ``
- Unique gradient/pattern IDs per file
- Optimized text elements

### 3.2 Build Final Preview Page

Create `card-preview.html` with mockup sections:

1. **Front & back side-by-side** — on dark and light backgrounds
2. **Realistic card mockup** — card with perspective shadow, slight rotation
3. **Size comparison** — card at 100%, 75%, 50% scale
4. **Print specifications** — dimensions, bleed, safe zone, color info
5. **Brand color palette** — swatches with hex codes used in the design

### 3.3 Export Assets Summary

Present a table of all generated files:

```
production/
  card-front.svg
  card-back.svg
  card-front-dark.svg
  card-front-light.svg
  card-print-front.svg        # 1125x675 with bleed + crop marks
  card-print-back.svg         # 1125x675 with bleed + crop marks
preview-gallery.html
showcase.html
card-preview.html
```

---

## Business Card Design Principles

### Typography Hierarchy

Information should follow this visual weight order:
1. **Name** — largest, boldest element (28-36px)
2. **Title / Role** — second level (16-20px)
3. **Company name** — third level if separate from title (14-18px)
4. **Contact details** — phone, email, website (12-14px)
5. **Social handles** — smallest, least prominent (11-13px)
6. **Address** — if included, smallest tier (10-12px)

### Safe Zone

Keep all critical content **30px inset** from all edges (trim line). This represents
approximately 0.1" margin at 300dpi — the standard print safety margin. Text too close
to the edge risks being cut off during trimming.

### Layout Balance

- **Left-aligned** — most readable, natural eye flow, works for most styles
- **Right-aligned** — elegant, works for creative/fashion cards
- **Centered** — formal, traditional, works for corporate cards
- **Split layout** — divide card into zones (left info / right logo, or top/bottom)

### White Space

**Overcrowding is the most common business card mistake.** A card with 6 clean lines of
information is more effective than one cramming 12 items. If the user provides too much
information, suggest moving secondary details to the back or dropping optional fields.

### Logo Integration

- Logo should be sized proportionally — typically 60-100px wide
- Common positions: top-left (corporate), bottom-right (minimal), centered-top (formal)
- If no logo exists, use the company name as the brand mark with distinctive typography
- SVG logos should be embedded inline, not as external references

### QR Code Guidelines

- Size: 120x120px minimum for reliable scanning
- Position: bottom-right corner or centered on back
- In SVG output, render as a placeholder rect with "QR" label
- Actual QR code generation requires external tools (recommend `qrencode` CLI)
- Content: usually a vCard URL or LinkedIn profile

---

## Efficiency Rules

1. **Bulk color changes via `sed`** — when changing colors across multiple SVGs, use
   `sed -i ''` in a loop, never rewrite files individually
2. **Template-driven** — use reference HTML templates, don't write from scratch
3. **Confirm before generating** — validate all contact details before producing 12 concepts
4. **Preview-first** — always provide HTML preview, don't just list SVG files
5. **QR placeholder only** — use a visual placeholder rect; actual QR generation needs
   external tools like `qrencode`

---

## Reference Files

| File | Purpose |
|---|---|
| `references/card-gallery-template.md` | HTML template for Phase 1 grid gallery (landscape card proportions) |
| `references/card-showcase-template.md` | HTML template for individual card showcase with flip animation |
| `references/card-design-patterns.md` | SVG code patterns for card layouts, typography, decorative elements |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [nasrulhazim](https://github.com/nasrulhazim)
- **Source:** [nasrulhazim/agent-skills](https://github.com/nasrulhazim/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-nasrulhazim-agent-skills-business-card
- Seller: https://agentstack.voostack.com/s/nasrulhazim
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.