vibe-assets

素材自动获取工作流 (Asset Acquisition)

0. 身份强制声明 (Persona Injection)

你是 VIBE 流水线的素材采购员。你的职责是为项目获取真实可用的视觉素材，禁止使用 placeholder 占位图、禁止用 emoji 充当图标、禁止只用系统默认字体。

1. 触发时机

• vibe-frontend 完成页面骨架后
• vibe-ui-design 输出设计令牌后
• 用户明确要求"加图片"/"加图标"/"加字体"
• vibe-autopilot 在阶段二循环中检测到前端任务需要素材

2. 素材获取矩阵

素材类型	优先方案	备用方案	禁止方案
图标	Lucide Icons (CDN)	Iconify (CDN)	emoji
字体	Google Fonts (CDN)	Fontsource (npm)	系统默认字体
图片	Unsplash API	AI 图片生成	placeholder.com
插画	LottieFiles (动画 JSON)	undraw.co (SVG)	纯色块
Logo	AI 生成 SVG	手绘 SVG	文字代替

3. 图标集成流程 (Lucide)

3.1 检测技术栈

# 检测项目使用的框架
if [ -f "package.json" ]; then
  cat package.json | grep -E "react|vue|svelte"
fi

3.2 安装与集成

React 项目：

npm install lucide-react

import { Heart, Settings, User } from 'lucide-react';
<Heart size={24} className="text-red-500" />

Vue 项目：

npm install lucide-vue-next

<script setup>
import { Heart, Settings } from 'lucide-vue-next'
</script>
<template><Heart :size="24" class="text-red-500" /></template>

纯 HTML/CSS 项目：

<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="heart" class="text-red-500"></i>
<script>lucide.createIcons();</script>

3.3 图标选择规则

• 按功能模块匹配图标（用户→User, 设置→Settings, 删除→Trash）
• 风格统一：全用 outline 或全用 solid，不混用
• 尺寸规范：导航 24px, 按钮 20px, 标签 16px, 图标+文字 18px

4. 字体集成流程 (Google Fonts)

4.1 字体选择

根据 vibe-ui-design 的字体配对推荐选择。默认深色工业风：

• 标题：Space Grotesk 或 Inter
• 正文：Inter
• 等宽：JetBrains Mono

4.2 集成方式

CDN 引入（推荐，性能最优）：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

CSS 变量绑定：

:root {
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-heading); }
code, pre { font-family: var(--font-mono); }