企业官网建设流程全解析

大模型辅助的 UI 文案生成：让每一个按钮都说"人话"

一、"点击确定代表您同意我们的服务条款和隐私政策以及数据收集协议"

你一定见过这种按钮文案。它的问题不是"写错了"，而是"写得太正确了"——正确到用户根本不想读。

UI 文案（UX Writing）是设计中最容易被忽视的环节。设计师会把大量精力花在间距、色彩、动效上，但按钮上的文字往往是最后一分钟随手写的。而事实是：一段好的按钮文案，比一个精美的渐变背景更能提升转化率。

大语言模型（LLM）在这个领域的表现出人意料地好——因为它不需要理解设计，它只需要理解语言。这篇文章，我会讲如何用 AI 为你的 UI 组件生成"说人话"的文案，从单个按钮到完整页面的文案生成管线。

二、UI 文案的生成约束：不是"写得好"，而是"写得对"

UI 文案的五种核心类型

品牌语调的量化

不同品牌需要不同的文案语调。我定义了一个"语调三元组"来量化：

语调 = (亲和度, 专业度, 简洁度) - 亲和度 0-10：0=冷漠, 10=像朋友聊天 - 专业度 0-10：0=通俗, 10=学术/法律腔 - 简洁度 0-10：0=啰嗦, 10=电报

不同场景的推荐语调：

三、AI 文案生成引擎的实现

/** * AI UI 文案生成引擎 */ interface CopyContext { /** 组件类型 */ componentType: 'button' | 'toast' | 'error' | 'empty' | 'placeholder'; /** 业务场景描述 */ scenario: string; /** 品牌语调 */ brandTone: { warmth: number; // 亲和度 0-10 professionalism: number; // 专业度 0-10 conciseness: number; // 简洁度 0-10 }; /** 目标用户画像 */ audience?: string; /** 操作的结果（用户点击后会发生什么） */ actionResult?: string; } interface CopyCandidate { text: string; score: number; // 综合评分 breakdown: { lengthScore: number; toneScore: number; clarityScore: number; }; } class UXCopyGenerator { /** 字数限制配置 */ private readonly LENGTH_LIMITS = { button: { max: 6, ideal: 4 }, toast: { max: 20, ideal: 12 }, error: { max: 40, ideal: 20 }, empty: { max: 30, ideal: 15 }, placeholder: { max: 15, ideal: 8 }, }; /** * 基于 Prompt 工程生成候选文案 * * 调用的实际是 LLM API，这里展示的是 Prompt 构建逻辑 */ buildPrompt(context: CopyContext): string { const limits = this.LENGTH_LIMITS[context.componentType]; return `你是一个专业的 UI/UX 文案设计师。 请为以下场景生成 5 个候选文案： **组件类型**：${context.componentType} **业务场景**：${context.scenario} **用户操作后发生什么**：${context.actionResult || '无特殊说明'} **目标用户**：${context.audience || '普通用户'} **文案约束**： - 字数不超过 ${limits.max} 字，理想是 ${limits.ideal} 字 - 亲和度要求：${context.brandTone.warmth}/10（${this.describeWarmth(context.brandTone.warmth)}） - 专业度要求：${context.brandTone.professionalism}/10（${this.describeProfessionalism(context.brandTone.professionalism)}） - 简洁度要求：${context.brandTone.conciseness}/10（${this.describeConciseness(context.brandTone.conciseness)}） **排版要求**： ${this.getFormatRequirements(context.componentType)} 请直接输出 5 个候选文案，每行一个，不要编号。`; } /** 打分引擎：评估候选文案 */ scoreCandidate(text: string, context: CopyContext): CopyCandidate { const limits = this.LENGTH_LIMITS[context.componentType]; // 评分维度一：长度评分 const length = text.length; let lengthScore = 0; if (length <= context.brandTone.conciseness * 0.8 + 1) { lengthScore = 1.0; } else if (length <= limits.ideal) { lengthScore = 0.8; } else if (length <= limits.max) { lengthScore = 0.5; } else { lengthScore = 0.1; // 超长，严重扣分 } // 评分维度二：清晰度评分 let clarityScore = 0.5; // 有动词 → 加分 if (this.hasActionVerb(text)) clarityScore += 0.2; // 有明确结果 → 加分 if (text.includes('成功') || text.includes('完成') || text.includes('已') || text.includes('请')) { clarityScore += 0.15; } // 没有模糊词 → 加分 if (!text.includes('可能') && !text.includes('大概') && !text.includes('或许')) { clarityScore += 0.15; } // 评分维度三：语调匹配度 const toneScore = this.calculateToneMatch(text, context.brandTone); // 加权综合评分 const total = lengthScore * 0.25 + clarityScore * 0.4 + toneScore * 0.35; return { text, score: total, breakdown: { lengthScore, toneScore, clarityScore }, }; } /** * 语调匹配度计算 * * 基于关键词和句式特征估算文本的语调 */ private calculateToneMatch(text: string, target: CopyContext['brandTone']): number { let estimatedWarmth = 5; let estimatedProfessionalism = 5; // 温暖度估计 if (/[!！~～]/.test(text)) estimatedWarmth += 1; if (text.includes('吧') || text.includes('哦') || text.includes('呢')) estimatedWarmth += 1; if (text.includes('您')) estimatedWarmth += 1; if (text.includes('请')) estimatedProfessionalism += 1; // 专业度估计 if (text.includes('确认') || text.includes('提交')) estimatedProfessionalism += 1; if (text.includes('审核') || text.includes('验证')) estimatedProfessionalism += 1; // 计算匹配度 const warmthDiff = Math.abs(target.warmth - estimatedWarmth) / 10; const profDiff = Math.abs(target.professionalism - estimatedProfessionalism) / 10; return 1 - (warmthDiff + profDiff) / 2; } private hasActionVerb(text: string): boolean { const verbs = ['查看', '提交', '保存', '删除', '搜索', '分享', '下载', '上传', '开始', '取消', '确认', '发送', '添加', '编辑']; return verbs.some(v => text.includes(v)); } private describeWarmth(score: number): string { if (score >= 8) return '非常亲切，像朋友间的对话'; if (score >= 6) return '温和友好，保持适度的亲近感'; if (score >= 4) return '中性，不冷不热'; return '专业克制，避免情感表达'; } private describeProfessionalism(score: number): string { if (score >= 8) return '高度专业，使用行业术语'; if (score >= 6) return '半正式，兼顾专业和可读'; return '通俗易懂，避免专业术语'; } private describeConciseness(score: number): string { if (score >= 8) return '极度精简，能省则省'; if (score >= 6) return '适中，说清楚但不啰嗦'; return '详细说明，允许一定冗余'; } private getFormatRequirements(type: string): string { const formats: Record<string, string> = { button: '动词开头（如"查看报告"），不使用"确定"这种泛化词', toast: '陈述句，说清当前状态（如"保存成功"），不使用疑问句', error: '先说"哪里错了"，再说"怎么办"（如"邮箱格式不正确，请输入有效的邮箱地址"）', empty: '先安抚，再引导（如"还没有收藏内容，去发现好文章吧"）', placeholder: '给出一个具体的示例值（如"例如：张三"），不说"请输入"', }; return formats[type] || ''; } /** * 批量生成 + 自动筛选 * * 调用 LLM 生成 5 个候选 → 逐一打分 → 返回 Top 3 */ async generateAndSelect(context: CopyContext): Promise<CopyCandidate[]> { // 实际项目中使用 LLM API const candidates = await this.callLLM(this.buildPrompt(context)); return candidates .map(text => this.scoreCandidate(text, context)) .sort((a, b) => b.score - a.score) .slice(0, 3); // 返回 Top 3 } private async callLLM(prompt: string): Promise<string[]> { // 实际调用 OpenAI / Claude / 本地模型 // 这里返回模拟数据 return [ '查看详情', '了解更多', '点击查看', '前往查看', '打开详情', ]; } }

四、边界：AI 文案的三个"不能"

1. 不能替代法律合规审核：涉及用户协议、隐私政策、金融交易确认等具有法律效力的文案，AI 生成的内容需要法务团队最终审核。一个字的偏差可能导致法律纠纷。

2. 不能理解品牌的历史包袱：一个品牌可能刻意避免某些词汇（比如"优惠"听起来像打折），AI 不知道这些。品牌语调词典需要人工维护。

3. 不能判断"场景敏感度"：在医疗、金融、法律产品中，一句"轻松搞定"可能让用户觉得你在不尊重严肃的事情。场景敏感度需要人工判断。

五、总结

好的 UI 文案不是"写得漂亮"，而是"写得准确"。它需要同时满足四个约束：字数合适、语调一致、动词明确、场景匹配。大语言模型的优势在于它可以同时考虑所有约束来生成候选文案，而传统做法通常只能一条一条人工调整。把 AI 定位为"文案初稿生成器"，人在最后把关——这是目前 UI 文案生产的最佳实践。

作者：李慕杰（Leo / 8limujie）
一个终于不用再写"点击确定"这种废话的前端匠人