品牌套件生成器可产出两个交付物:一份自包含的 HTML 视觉风格指南,以及一份 markdown 主题参考文件,用于记录所有设计决策。
用途:当用户要求生成品牌套件或风格指南时使用。
主要能力:HTML 文件内嵌 CSS、通过 CDN 加载 Google Fonts、不含 JavaScript 依赖(仅一个小的 IntersectionObserver 脚本用于导航高亮)。包含固定左侧 240px 侧边栏导航、主内容区、封面区和 13 个编号章节:Logo 与字标、色彩系统、字体排印、字号层级、间距、边框与表面、按钮、卡片、徽章、导航、语气与文案、Do's & Don'ts、动效。
使用方式:先收集品牌上下文(品牌名、风格方向/情绪、主强调色 hex、字体搭配;可选提供现有品牌 HTML、Logo、文案等)。流程为:收集品牌上下文、选择风格方向预设(Bold Creator、Dark Tech、Premium Modern)并自定义、构建 HTML 品牌套件、构建配套 markdown 主题文件、在浏览器中打开审阅。文件默认放入项目的 themes/ 目录:brand-kit.html 与 [style-name].md。
限制:不得凭空编造品牌资产,Logo、字标、标语和文案必须来自用户提供的文件或品牌自己的网站;若找不到必需资产,应说明并询问,而不是用占位符替代。每个色板需展示颜色块、名称、CSS 令牌名、hex 值和使用说明;每个交互组件需并排展示默认、悬停、焦点、禁用、加载状态;Do's & Don'ts 至少 7 对并包含实际视觉渲染。资料中未提供具体价格、平台支持范围等信息。