173 lines
8.7 KiB
JavaScript
173 lines
8.7 KiB
JavaScript
/**
|
||
* 画个标 · 技能库：展示类（presentation）
|
||
* 注册：HGB_Skills.register([...])
|
||
*/
|
||
(function () {
|
||
'use strict';
|
||
const U = HGB_Skills.utils;
|
||
|
||
HGB_Skills.register([
|
||
{
|
||
id: 'showcase-bg',
|
||
name: '展示背景推荐',
|
||
category: 'presentation',
|
||
emoji: '🖼️',
|
||
scene: '为方案推荐专业展示背景（深/浅两系）',
|
||
summary: '借鉴 12 种专业展示背景风格，按方案配色明暗推荐匹配的展示底色，用于预览大图与导出场景。',
|
||
params: [
|
||
{ name: 'plan', type: 'object', required: true, desc: '方案对象（含 bg）' }
|
||
],
|
||
source: 'GitHub: op7418/logo-generator-skill（12 背景风格）',
|
||
run: function (args) {
|
||
const plan = args.plan || {};
|
||
const bg = plan.bg || '#FFFFFF';
|
||
const dark = U.lum(bg) < 0.5;
|
||
const styles = dark
|
||
? ['The Void 纯黑', 'Frosted Horizon 钛灰', 'Studio Spotlight 编辑级打光']
|
||
: ['Editorial Paper 米白', 'Morning Aura 暖象牙', 'Swiss Flat 纯色块'];
|
||
return { currentBg: bg, tone: dark ? '暗色系' : '亮色系', recommend: styles };
|
||
},
|
||
test: function () {
|
||
return { dark: this.run({ plan: { bg: '#0F172A' } }).recommend[0], light: this.run({ plan: { bg: '#FFFFFF' } }).recommend[0] };
|
||
}
|
||
},
|
||
{
|
||
id: 'mockup-scene',
|
||
name: '应用场景推荐',
|
||
category: 'presentation',
|
||
emoji: '📱',
|
||
scene: '为 LOGO 推荐常见品牌应用场景',
|
||
summary: '按行业与品牌气质推荐最值得展示的品牌应用场景（名片/门头/App 图标/包装/工作服等），用于提案与宣传素材。',
|
||
params: [
|
||
{ name: 'industry', type: 'string', required: false, desc: '行业 id' }
|
||
],
|
||
source: '自研（品牌 VI 应用场景规范）',
|
||
run: function (args) {
|
||
const ind = HGB_Industries.find(x => x.id === args.industry) || HGB_Industries[0];
|
||
const sceneMap = {
|
||
edu: ['校徽/学生证', '招生海报', '教学楼门头', '文具周边'],
|
||
food: ['门头招牌', '外卖包装', '餐巾纸/杯具', '菜单封面'],
|
||
health: ['诊所门头', '处方笺/病历', '药袋包装', '健康宣传栏'],
|
||
tech: ['App 图标', '官网 Logo', '工牌/名片', '演示 PPT 封面'],
|
||
sport: ['队服胸前', '场馆横幅', '奖杯/证书', '赛事海报'],
|
||
finance: ['名片', '合同封面', '营业厅门头', '年报封面']
|
||
};
|
||
const scenes = sceneMap[ind.id] || ['名片', '官网首页', '包装袋', '门头招牌'];
|
||
return { industry: ind.name, scenes };
|
||
},
|
||
test: function () {
|
||
return { tech: this.run({ industry: 'tech' }).scenes, food: this.run({ industry: 'food' }).scenes };
|
||
}
|
||
},
|
||
{
|
||
id: 'vi-checklist',
|
||
name: 'VI 规范清单',
|
||
category: 'presentation',
|
||
emoji: '📋',
|
||
scene: '品牌基础 VI 交付物检查清单',
|
||
summary: '输出品牌 VI 基础系统清单（主标/反白/单色版本、标准色、标准字、应用规范），对照勾选交付完整度。',
|
||
params: [
|
||
{ name: 'industry', type: 'string', required: false, desc: '行业 id' }
|
||
],
|
||
source: '自研（VI 基础系统规范）',
|
||
run: function (args) {
|
||
const ind = HGB_Industries.find(x => x.id === args.industry) || HGB_Industries[0];
|
||
const items = [
|
||
{ name: '主标（彩色版）', done: true, note: '已生成方案即为主标' },
|
||
{ name: '反白版（深底）', done: false, note: '用展示背景推荐生成深色底预览' },
|
||
{ name: '单色版（黑/白）', done: false, note: '导出时选择单色方案' },
|
||
{ name: '标准色值', done: true, note: '见方案主色 HEX' },
|
||
{ name: '标准字', done: true, note: '主标字体现已选' },
|
||
{ name: '安全边距/最小尺寸', done: false, note: '按小尺寸可读性技能确认' },
|
||
{ name: '应用示例（名片/门头/App）', done: false, note: '按应用场景推荐技能出图' }
|
||
];
|
||
const done = items.filter(i => i.done).length;
|
||
return { industry: ind.name, items, done, total: items.length, progress: Math.round(done / items.length * 100) + '%' };
|
||
},
|
||
test: function () {
|
||
const r = this.run({});
|
||
return { total: r.total, progress: r.progress };
|
||
}
|
||
},
|
||
{
|
||
id: 'launch-kit',
|
||
name: '上线素材包',
|
||
category: 'presentation',
|
||
emoji: '🚀',
|
||
scene: '品牌上线所需的完整素材清单与生成指引',
|
||
summary: '汇总 LOGO 多格式导出、头像规格、展示背景、应用场景为一体，给出上线素材包的一站式生成顺序。',
|
||
params: [
|
||
{ name: 'industry', type: 'string', required: false, desc: '行业 id' }
|
||
],
|
||
source: '自研（素材包组装流程）',
|
||
run: function (args) {
|
||
const ind = HGB_Industries.find(x => x.id === args.industry) || HGB_Industries[0];
|
||
const kit = [
|
||
{ item: 'LOGO 主标（SVG + 1024 PNG）', tool: '多格式导出' },
|
||
{ item: '头像（微信 300/QQ 640/抖音 400）', tool: '头像平台规格' },
|
||
{ item: 'App 图标 1024（无圆角）', tool: '导出尺寸规范' },
|
||
{ item: 'Favicon 32/180', tool: 'Favicon 全套' },
|
||
{ item: '展示图（深/浅背景各一）', tool: '展示背景推荐' },
|
||
{ item: '应用场景图（名片/门头）', tool: '应用场景推荐' }
|
||
];
|
||
return { industry: ind.name, kit, order: '按清单顺序：先导出 LOGO → 头像 → 图标 → 展示/场景' };
|
||
},
|
||
test: function () {
|
||
return { items: this.run({ industry: 'food' }).kit.length };
|
||
}
|
||
},
|
||
{
|
||
id: 'brand-story',
|
||
name: '品牌设计说明',
|
||
category: 'presentation',
|
||
emoji: '📖',
|
||
scene: '为方案生成品牌设计说明/提案文案（VI 提案、设计交付说明）',
|
||
summary: '基于品牌名、行业与方案的主色/布局，生成「设计理念 + 色彩寓意 + 版式逻辑 + 应用价值」四段式品牌故事文案，可直接用于提案与交付说明。',
|
||
params: [
|
||
{ name: 'brand', type: 'string', required: true, desc: '品牌名' },
|
||
{ name: 'industry', type: 'string', required: false, desc: '行业 id' },
|
||
{ name: 'color', type: 'string', required: false, desc: '主色 HEX' },
|
||
{ name: 'layoutId', type: 'string', required: false, desc: '布局 id（badge/seal/duo/stacked/centered/horizontal，可选）' }
|
||
],
|
||
source: '自研（品牌故事四段式文案框架）',
|
||
run: function (args) {
|
||
const brand = String(args.brand || '');
|
||
const ind = HGB_Industries.find(x => x.id === args.industry) || HGB_Industries[0];
|
||
const color = String(args.color || '').replace('#', '');
|
||
const c = /^[0-9a-fA-F]{6}$/.test(color) ? '#' + color : '';
|
||
const layoutId = String(args.layoutId || '');
|
||
const indName = ind.name;
|
||
const toneOf = (hex) => {
|
||
const l = U.lum(hex);
|
||
if (l < 0.15) return '深邃的深色系';
|
||
if (l < 0.5) return '沉稳的深色系';
|
||
return '明快的亮色系';
|
||
};
|
||
const layoutMap = {
|
||
badge: '徽章式圆形构图，传递经典与可信赖感',
|
||
seal: '印章式构图，象征权威与传统',
|
||
duo: '双图标并列，表达协同与多元',
|
||
stacked: '上下结构，突出主次层级',
|
||
centered: '居中构图，稳重凝练',
|
||
horizontal: '横向排布，便于延展应用'
|
||
};
|
||
const story = {
|
||
concept: '「' + brand + '」以' + indName + '为根基，通过简洁的图形语言传递品牌气质，追求极简、充足负空间与高辨识度。',
|
||
colorMeaning: c ? toneOf(c) + '（' + c + '）作为主色，传递品牌核心气质，配合留白确保多场景清晰呈现。' : '主色延续品牌既有视觉体系，保证识别一致性。',
|
||
layoutLogic: layoutMap[layoutId] ? layoutMap[layoutId] + '，让图形与品牌名主次分明。' : '构图遵循居中与留白原则，保证小尺寸（64px）仍清晰可辨。',
|
||
value: '整套标识可延展至名片、门头、App 图标与社交媒体头像，兼顾数字与印刷场景。'
|
||
};
|
||
return {
|
||
brand, industry: indName, primary: c || '（自动）',
|
||
story,
|
||
full: story.concept + story.colorMeaning + story.layoutLogic + story.value
|
||
};
|
||
},
|
||
test: function () {
|
||
const r = this.run({ brand: '远渡教育', industry: 'edu', color: '#1B4F72', layoutId: 'badge' });
|
||
return { sections: Object.keys(r.story).length, full: r.full.length > 20 };
|
||
}
|
||
}
|
||
]);
|
||
})();
|