From Prototyping
Provides standard placeholders for images, avatars, logos, and charts in prototypes, slides, and landing pages. Avoids complex SVG or AI-generated stock images.
How this skill is triggered — by the user, by Claude, or both
Slash command
/prototyping:placeholdersWhen to use
В прототипе/слайдах/лендинге нужно изображение которого нет, или иконка/график. Перед animations / interactive-prototype если макеты пустые.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Не пытайся рисовать сложный SVG руками или генерировать AI-stock. Используй унифицированные плейсхолдеры. Они быстрее, чище читаются и не отвлекают от структуры.
Не пытайся рисовать сложный SVG руками или генерировать AI-stock. Используй унифицированные плейсхолдеры. Они быстрее, чище читаются и не отвлекают от структуры.
.ph-img {
background:
linear-gradient(135deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd) 0 0/16px 16px,
linear-gradient(135deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd) 8px 8px/16px 16px,
#f5f5f5;
display: flex; align-items: center; justify-content: center;
color: #999; font: 12px/1 monospace;
border-radius: 8px;
aspect-ratio: 16 / 9;
}
<div class="ph-img" style="aspect-ratio: 4/3">
[Скриншот dashboard · 1200×900]
</div>
Подпиши что должно быть, не молчи.
Цветные круги с инициалами — никаких avatar-as-a-service:
function Avatar({ name, size = 40 }) {
const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57', '#A29BFE', '#FD79A8'];
const idx = name.charCodeAt(0) % colors.length;
const initials = name.split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();
return (
<div style={{
width: size, height: size, borderRadius: '50%',
background: colors[idx], color: '#fff', display: 'flex',
alignItems: 'center', justifyContent: 'center',
fontWeight: 600, fontSize: size * 0.4,
}}>{initials}</div>
);
}
<Avatar name="Your Name" size={48} /> // → "JD"
Не вставляй настоящие лого Stripe/Apple — делай плейсхолдер:
<div style="
padding: 8px 16px; border: 1px dashed #999; border-radius: 4px;
font: 600 12px/1 monospace; color: #666;
">[ACME LOGO]</div>
Для «trusted by» секций:
<div style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; opacity: 0.6;">
<div class="logo-ph">[ClientCorp1]</div>
<div class="logo-ph">[ClientCorp5]</div>
<div class="logo-ph">[ClientCorp3]</div>
<div class="logo-ph">[ClientCorp4]</div>
<div class="logo-ph">[ClientCorp2]</div>
</div>
Не рисуй сложные графики — простой SVG-каркас:
function ChartPlaceholder({ kind = 'line', label = 'Chart' }) {
if (kind === 'line') return (
<svg viewBox="0 0 200 80" style={{ width: '100%' }}>
<polyline points="0,60 25,55 50,50 75,40 100,35 125,30 150,20 175,15 200,5"
stroke="#3b82f6" strokeWidth="2" fill="none" />
<text x="10" y="75" fontSize="10" fill="#999">{label}</text>
</svg>
);
if (kind === 'bars') return (
<svg viewBox="0 0 200 80">
{[40, 60, 30, 70, 50, 80, 45, 65].map((h, i) => (
<rect key={i} x={i * 25 + 5} y={80 - h} width={20} height={h} fill="#3b82f6" />
))}
</svg>
);
if (kind === 'donut') return (
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#e5e7eb" strokeWidth="12" fill="none" />
<circle cx="50" cy="50" r="40" stroke="#3b82f6" strokeWidth="12" fill="none"
strokeDasharray="180 251" transform="rotate(-90 50 50)" />
</svg>
);
}
Не генерируй кастомные SVG — используй lucide-react стиль через Babel-friendly inline:
function Icon({ name, size = 20 }) {
const icons = {
check: <path d="M20 6L9 17l-5-5" />,
arrow: <path d="M5 12h14m-7-7l7 7-7 7" />,
user: <><circle cx="12" cy="8" r="4" /><path d="M4 21v-2a4 4 0 014-4h8a4 4 0 014 4v2" /></>,
plus: <path d="M12 5v14m-7-7h14" />,
x: <path d="M18 6L6 18M6 6l12 12" />,
};
return (
<svg width={size} height={size} viewBox="0 0 24 24"
fill="none" stroke="currentColor" strokeWidth="2"
strokeLinecap="round" strokeLinejoin="round">
{icons[name]}
</svg>
);
}
10 базовых иконок покрывают 80% UI. Если нужна редкая (вроде «database», «git-branch») — копируй из lucide.dev и вставляй в этот же объект.
Если юзер скинул свой скриншот / логотип / hero-image — клади в uploads/ и используй напрямую:
<img src="uploads/hero_main.png" alt="Hero" style="width: 100%; border-radius: 12px">
Не превращай в плейсхолдер!
npx claudepluginhub jhamidun/claude-code-config-pack --plugin prototypingBuilds a throwaway prototype to answer a design question about UI appearance or state/logic behavior. Guides you through two branches: interactive terminal app for logic validation, or multiple UI variations for visual exploration.