493 lines
16 KiB
TypeScript
493 lines
16 KiB
TypeScript
import type { DetailUiGlobalStyle } from "@/lib/detail-ui-protocol";
|
|
import type { DetailUiDesignSkillSummary } from "@/lib/detail-ui-design-skill";
|
|
import type { UiScreenDocument, UiScreenLayer } from "@/lib/ui-screen/schema";
|
|
|
|
export const DETAIL_BRAND_STYLE_BOARD_VERSION = "detail-brand-style-board/v1";
|
|
|
|
type DetailStyleBoardBrief = {
|
|
productName?: string;
|
|
brandTone?: string;
|
|
coreNeed?: string;
|
|
usageScenario?: string;
|
|
coreSellingPoint?: string;
|
|
};
|
|
|
|
type PaletteSwatch = {
|
|
id: string;
|
|
name: string;
|
|
role: string;
|
|
hex: string;
|
|
};
|
|
|
|
function normalizeText(value: unknown, fallback = "") {
|
|
return String(value || "").replace(/\s+/g, " ").trim() || fallback;
|
|
}
|
|
function extractHexColors(value: unknown) {
|
|
const matched = normalizeText(value).match(/#[0-9a-fA-F]{6}\b/g) || [];
|
|
return Array.from(new Set(matched.map((item) => item.toLowerCase()))).slice(0, 6);
|
|
}
|
|
|
|
function hashText(value: string) {
|
|
let hash = 0;
|
|
for (let index = 0; index < value.length; index += 1) {
|
|
hash = (hash * 31 + value.charCodeAt(index)) >>> 0;
|
|
}
|
|
return hash;
|
|
}
|
|
|
|
function chooseBasePalette(params: {
|
|
language: "zh" | "en";
|
|
brief?: DetailStyleBoardBrief;
|
|
globalStyle?: DetailUiGlobalStyle;
|
|
}): PaletteSwatch[] {
|
|
const extracted = extractHexColors(params.globalStyle?.palette);
|
|
if (extracted.length >= 3) {
|
|
const fallbacks = ["#f8fafc", "#0f172a", "#0071e3", "#14b8a6", "#f59e0b"];
|
|
const colors = [...extracted, ...fallbacks].slice(0, 5);
|
|
return [
|
|
{ id: "primary", name: "Primary", role: "主行动/重点卖点", hex: colors[0]! },
|
|
{ id: "ink", name: "Ink", role: "标题/强文字", hex: colors[1]! },
|
|
{ id: "surface", name: "Surface", role: "面板/留白", hex: colors[2]! },
|
|
{ id: "accent", name: "Accent", role: "证据/对比", hex: colors[3]! },
|
|
{ id: "warm", name: "Warm", role: "价格/提醒", hex: colors[4]! },
|
|
];
|
|
}
|
|
|
|
const tone = normalizeText(params.brief?.brandTone).toLowerCase();
|
|
const seed = `${params.brief?.productName || ""} ${params.brief?.coreSellingPoint || ""} ${tone}`;
|
|
const presetIndex = hashText(seed) % 5;
|
|
const reliable = /专业|可靠|信任|稳|medical|pro|trust|reliable|clinical/.test(tone);
|
|
const premium = /高级|高端|轻奢|premium|luxury|minimal|质感/.test(tone);
|
|
const friendly = /亲和|温暖|活泼|friendly|warm|soft|生活/.test(tone);
|
|
const tech = /科技|智能|未来|tech|smart|digital|ai/.test(tone);
|
|
|
|
if (premium) {
|
|
return [
|
|
{ id: "primary", name: "Obsidian", role: "主标题/高级底色", hex: "#111827" },
|
|
{ id: "ink", name: "Graphite", role: "正文文字", hex: "#1f2937" },
|
|
{ id: "surface", name: "Porcelain", role: "大面积背景", hex: "#f8fafc" },
|
|
{ id: "accent", name: "Champagne", role: "重点证明/质感线", hex: "#d6a756" },
|
|
{ id: "support", name: "Mist Blue", role: "辅助信息", hex: "#dbeafe" },
|
|
];
|
|
}
|
|
|
|
if (friendly) {
|
|
return [
|
|
{ id: "primary", name: "Coral", role: "主 CTA/亲和重点", hex: "#e85d75" },
|
|
{ id: "ink", name: "Cocoa Ink", role: "标题文字", hex: "#312e2b" },
|
|
{ id: "surface", name: "Milk", role: "干净背景", hex: "#fff7ed" },
|
|
{ id: "accent", name: "Fresh Mint", role: "舒适/安心", hex: "#2dd4bf" },
|
|
{ id: "support", name: "Sky", role: "辅助信息", hex: "#dbeafe" },
|
|
];
|
|
}
|
|
|
|
if (tech) {
|
|
return [
|
|
{ id: "primary", name: "Electric Blue", role: "主行动/科技重点", hex: "#2563eb" },
|
|
{ id: "ink", name: "Deep Navy", role: "标题文字", hex: "#0f172a" },
|
|
{ id: "surface", name: "Ice", role: "背景/面板", hex: "#eff6ff" },
|
|
{ id: "accent", name: "Signal Green", role: "性能/通过", hex: "#22c55e" },
|
|
{ id: "support", name: "Violet", role: "辅助强调", hex: "#8b5cf6" },
|
|
];
|
|
}
|
|
|
|
if (reliable || presetIndex <= 2) {
|
|
return [
|
|
{ id: "primary", name: "Apple Blue", role: "主 CTA/核心卖点", hex: "#0071e3" },
|
|
{ id: "ink", name: "Slate Ink", role: "标题/正文", hex: "#0f172a" },
|
|
{ id: "surface", name: "Cloud", role: "大面积留白", hex: "#f5f5f7" },
|
|
{ id: "accent", name: "Teal Proof", role: "证据/安心", hex: "#14b8a6" },
|
|
{ id: "support", name: "Amber", role: "提醒/价格", hex: "#f59e0b" },
|
|
];
|
|
}
|
|
|
|
return [
|
|
{ id: "primary", name: "Blue", role: "主 CTA/核心卖点", hex: "#2563eb" },
|
|
{ id: "ink", name: "Ink", role: "标题/正文", hex: "#111827" },
|
|
{ id: "surface", name: "Surface", role: "背景/卡片", hex: "#f8fafc" },
|
|
{ id: "accent", name: "Emerald", role: "证明/通过", hex: "#10b981" },
|
|
{ id: "support", name: "Rose", role: "提醒/差异", hex: "#f43f5e" },
|
|
];
|
|
}
|
|
|
|
function hexToRgb(hex: string) {
|
|
const value = hex.replace("#", "");
|
|
return {
|
|
r: Number.parseInt(value.slice(0, 2), 16),
|
|
g: Number.parseInt(value.slice(2, 4), 16),
|
|
b: Number.parseInt(value.slice(4, 6), 16),
|
|
};
|
|
}
|
|
|
|
function contrastText(hex: string) {
|
|
const { r, g, b } = hexToRgb(hex);
|
|
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
return luminance > 0.62 ? "#0f172a" : "#ffffff";
|
|
}
|
|
|
|
function textLayer(params: {
|
|
id: string;
|
|
text: string;
|
|
fontSize: number;
|
|
fontWeight?: number | string;
|
|
color?: string;
|
|
lineHeight?: number;
|
|
textAlign?: "left" | "center" | "right";
|
|
}): UiScreenLayer {
|
|
return {
|
|
id: params.id,
|
|
kind: "text",
|
|
text: params.text,
|
|
style: {
|
|
fontSize: params.fontSize,
|
|
fontWeight: params.fontWeight || 500,
|
|
lineHeight: params.lineHeight || 1.25,
|
|
color: params.color || "#0f172a",
|
|
textAlign: params.textAlign,
|
|
letterSpacing: 0,
|
|
},
|
|
};
|
|
}
|
|
|
|
function badgeLayer(params: {
|
|
id: string;
|
|
label: string;
|
|
tone?: "primary" | "secondary" | "neutral" | "success";
|
|
}): UiScreenLayer {
|
|
return {
|
|
id: params.id,
|
|
kind: "badge",
|
|
label: params.label,
|
|
tone: params.tone || "neutral",
|
|
style: {
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
paddingX: 12,
|
|
paddingY: 7,
|
|
},
|
|
};
|
|
}
|
|
|
|
function colorSwatchLayer(swatch: PaletteSwatch): UiScreenLayer {
|
|
const textColor = contrastText(swatch.hex);
|
|
return {
|
|
id: `swatch-${swatch.id}`,
|
|
kind: "card",
|
|
name: swatch.name,
|
|
style: {
|
|
background: swatch.hex,
|
|
color: textColor,
|
|
borderRadius: 10,
|
|
padding: 16,
|
|
gap: 8,
|
|
boxShadow: "0 10px 26px rgba(15,23,42,0.08)",
|
|
},
|
|
children: [
|
|
textLayer({
|
|
id: `swatch-${swatch.id}-name`,
|
|
text: swatch.name,
|
|
fontSize: 18,
|
|
fontWeight: 700,
|
|
color: textColor,
|
|
}),
|
|
textLayer({
|
|
id: `swatch-${swatch.id}-hex`,
|
|
text: swatch.hex.toUpperCase(),
|
|
fontSize: 15,
|
|
fontWeight: 650,
|
|
color: textColor,
|
|
}),
|
|
textLayer({
|
|
id: `swatch-${swatch.id}-role`,
|
|
text: swatch.role,
|
|
fontSize: 13,
|
|
fontWeight: 500,
|
|
color: textColor,
|
|
lineHeight: 1.35,
|
|
}),
|
|
],
|
|
};
|
|
}
|
|
|
|
function sectionFrame(params: {
|
|
id: string;
|
|
bounds: { x: number; y: number; width: number; height: number };
|
|
children: UiScreenLayer[];
|
|
gap?: number;
|
|
background?: string;
|
|
}): UiScreenLayer {
|
|
return {
|
|
id: params.id,
|
|
kind: "stack",
|
|
bounds: params.bounds,
|
|
direction: "column",
|
|
align: "stretch",
|
|
justify: "start",
|
|
style: {
|
|
background: params.background || "rgba(255,255,255,0.82)",
|
|
borderColor: "rgba(15,23,42,0.08)",
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
padding: 22,
|
|
gap: params.gap || 14,
|
|
boxShadow: "0 12px 30px rgba(15,23,42,0.08)",
|
|
},
|
|
children: params.children,
|
|
};
|
|
}
|
|
|
|
export function buildDetailBrandStyleBoard(params: {
|
|
language: "zh" | "en";
|
|
prompt: string;
|
|
brief?: DetailStyleBoardBrief;
|
|
globalStyle?: DetailUiGlobalStyle;
|
|
designSkill?: DetailUiDesignSkillSummary;
|
|
}): UiScreenDocument {
|
|
const isZh = params.language === "zh";
|
|
const palette = chooseBasePalette({
|
|
language: params.language,
|
|
brief: params.brief,
|
|
globalStyle: params.globalStyle,
|
|
});
|
|
const primary = palette[0]?.hex || "#0071e3";
|
|
const ink = palette[1]?.hex || "#0f172a";
|
|
const surface = palette[2]?.hex || "#f5f5f7";
|
|
const accent = palette[3]?.hex || "#14b8a6";
|
|
const productName = normalizeText(params.brief?.productName, isZh ? "详情页品牌" : "Detail Brand");
|
|
const coreNeed = normalizeText(params.brief?.coreNeed, isZh ? "核心购买理由" : "Core buying reason");
|
|
const brandTone = normalizeText(params.brief?.brandTone, isZh ? "克制、专业、可上线" : "restrained, professional, production-ready");
|
|
const fontFamily =
|
|
normalizeText(params.globalStyle?.typography?.fontFamily) ||
|
|
"Noto Sans SC, PingFang SC, Microsoft YaHei, Inter, Arial, sans-serif";
|
|
const checklist = params.designSkill?.reviewChecklist?.length
|
|
? params.designSkill.reviewChecklist.slice(0, 4)
|
|
: isZh
|
|
? ["主体完整不被遮挡", "UI 覆盖小于45%", "三层字体层级统一", "不生成假文字/假按钮"]
|
|
: ["Subject unobstructed", "UI coverage under 45%", "Three consistent type levels", "No fake image text/UI"];
|
|
|
|
return {
|
|
version: "ui-screen/v1",
|
|
id: `detail-brand-style-board-${Date.now()}`,
|
|
title: isZh ? "品牌 UI 配色板" : "Brand UI Style Board",
|
|
width: 790,
|
|
height: 1080,
|
|
tokens: {
|
|
colors: {
|
|
primary,
|
|
ink,
|
|
surface,
|
|
accent,
|
|
},
|
|
typography: {
|
|
title: { fontFamily, fontSize: 54, fontWeight: 700, lineHeight: 1.08 },
|
|
subtitle: { fontFamily, fontSize: 28, fontWeight: 600, lineHeight: 1.2 },
|
|
body: { fontFamily, fontSize: 18, fontWeight: 500, lineHeight: 1.42 },
|
|
},
|
|
radii: {
|
|
panel: 12,
|
|
card: 10,
|
|
pill: 999,
|
|
},
|
|
shadows: {
|
|
soft: "0 12px 30px rgba(15,23,42,0.08)",
|
|
},
|
|
},
|
|
layers: [
|
|
{
|
|
id: "board-background",
|
|
kind: "frame",
|
|
bounds: { x: 0, y: 0, width: 790, height: 1080 },
|
|
style: {
|
|
background: `linear-gradient(180deg, ${surface} 0%, #ffffff 52%, rgba(248,250,252,0.96) 100%)`,
|
|
},
|
|
},
|
|
{
|
|
id: "board-header",
|
|
kind: "stack",
|
|
bounds: { x: 48, y: 44, width: 694, height: 154 },
|
|
direction: "column",
|
|
align: "start",
|
|
justify: "start",
|
|
style: { gap: 12, fontFamily },
|
|
children: [
|
|
badgeLayer({
|
|
id: "board-badge",
|
|
label: isZh ? "品牌 UI 基准 / 先锁定再生成" : "Brand UI Baseline / Lock Before Generate",
|
|
tone: "primary",
|
|
}),
|
|
textLayer({
|
|
id: "board-title",
|
|
text: isZh ? `${productName} 视觉系统` : `${productName} Visual System`,
|
|
fontSize: 50,
|
|
fontWeight: 700,
|
|
lineHeight: 1.08,
|
|
color: ink,
|
|
}),
|
|
textLayer({
|
|
id: "board-subtitle",
|
|
text: isZh ? `${brandTone}；围绕「${coreNeed}」建立统一详情页语言。` : `${brandTone}; build one detail-page language around "${coreNeed}".`,
|
|
fontSize: 21,
|
|
fontWeight: 500,
|
|
lineHeight: 1.34,
|
|
color: "#475569",
|
|
}),
|
|
],
|
|
},
|
|
{
|
|
id: "palette-section",
|
|
kind: "grid",
|
|
bounds: { x: 48, y: 234, width: 694, height: 208 },
|
|
columns: 5,
|
|
style: { gap: 12 },
|
|
children: palette.map(colorSwatchLayer),
|
|
},
|
|
sectionFrame({
|
|
id: "type-section",
|
|
bounds: { x: 48, y: 480, width: 694, height: 202 },
|
|
children: [
|
|
textLayer({
|
|
id: "type-section-title",
|
|
text: isZh ? "字体层级" : "Typography",
|
|
fontSize: 22,
|
|
fontWeight: 700,
|
|
color: ink,
|
|
}),
|
|
textLayer({
|
|
id: "type-hero",
|
|
text: isZh ? "主标题：一眼说清为什么值得买" : "Hero: Say why it is worth buying",
|
|
fontSize: 40,
|
|
fontWeight: 700,
|
|
lineHeight: 1.08,
|
|
color: ink,
|
|
}),
|
|
textLayer({
|
|
id: "type-subtitle",
|
|
text: isZh ? "副标题：一句结果句，承接核心需求" : "Subtitle: one result sentence tied to the need",
|
|
fontSize: 25,
|
|
fontWeight: 600,
|
|
color: "#334155",
|
|
}),
|
|
textLayer({
|
|
id: "type-body",
|
|
text: isZh ? "正文控制在 2-4 行，解释场景、证据和转化理由，不堆满信息。" : "Body stays within 2-4 lines: scene, proof, and conversion reason without clutter.",
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
lineHeight: 1.42,
|
|
color: "#64748b",
|
|
}),
|
|
],
|
|
}),
|
|
sectionFrame({
|
|
id: "component-section",
|
|
bounds: { x: 48, y: 714, width: 694, height: 142 },
|
|
children: [
|
|
textLayer({
|
|
id: "component-title",
|
|
text: isZh ? "组件基调" : "Component Tone",
|
|
fontSize: 22,
|
|
fontWeight: 700,
|
|
color: ink,
|
|
}),
|
|
{
|
|
id: "component-row",
|
|
kind: "grid",
|
|
columns: 3,
|
|
style: { gap: 12 },
|
|
children: [
|
|
{
|
|
id: "component-cta",
|
|
kind: "button",
|
|
label: isZh ? "主行动按钮" : "Primary CTA",
|
|
tone: "primary",
|
|
style: {
|
|
background: primary,
|
|
color: contrastText(primary),
|
|
borderRadius: 999,
|
|
paddingX: 18,
|
|
paddingY: 12,
|
|
fontSize: 15,
|
|
fontWeight: 700,
|
|
},
|
|
},
|
|
{
|
|
id: "component-proof",
|
|
kind: "badge",
|
|
label: isZh ? "证据标签" : "Proof Badge",
|
|
tone: "success",
|
|
style: {
|
|
background: accent,
|
|
color: contrastText(accent),
|
|
borderRadius: 999,
|
|
paddingX: 14,
|
|
paddingY: 9,
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
},
|
|
},
|
|
{
|
|
id: "component-panel",
|
|
kind: "card",
|
|
style: {
|
|
background: "#ffffff",
|
|
borderColor: "rgba(15,23,42,0.10)",
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
padding: 14,
|
|
boxShadow: "0 10px 24px rgba(15,23,42,0.08)",
|
|
},
|
|
children: [
|
|
textLayer({
|
|
id: "component-panel-label",
|
|
text: isZh ? "轻面板 / 不挡主体" : "Light panel / keep subject clear",
|
|
fontSize: 14,
|
|
fontWeight: 650,
|
|
color: ink,
|
|
}),
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}),
|
|
sectionFrame({
|
|
id: "rules-section",
|
|
bounds: { x: 48, y: 888, width: 694, height: 140 },
|
|
background: "rgba(15,23,42,0.92)",
|
|
children: [
|
|
textLayer({
|
|
id: "rules-title",
|
|
text: isZh ? "后续详情页必须遵守" : "Rules For The Following Screens",
|
|
fontSize: 21,
|
|
fontWeight: 700,
|
|
color: "#f8fafc",
|
|
}),
|
|
{
|
|
id: "rules-grid",
|
|
kind: "grid",
|
|
columns: 2,
|
|
style: { gap: 10 },
|
|
children: checklist.map((item, index) =>
|
|
textLayer({
|
|
id: `rule-${index + 1}`,
|
|
text: `0${index + 1}. ${item}`,
|
|
fontSize: 15,
|
|
fontWeight: 550,
|
|
lineHeight: 1.34,
|
|
color: "#e2e8f0",
|
|
})
|
|
),
|
|
},
|
|
],
|
|
}),
|
|
],
|
|
metadata: {
|
|
source: "detail-brand-style-board",
|
|
detailBrandStyleBoardVersion: DETAIL_BRAND_STYLE_BOARD_VERSION,
|
|
prompt: normalizeText(params.prompt).slice(0, 800),
|
|
globalStyle: params.globalStyle || null,
|
|
designSkill: params.designSkill || null,
|
|
palette,
|
|
},
|
|
};
|
|
}
|