mcpField
A
app-copy

app-copy

github.com/tushaarmehtaa设计与 UI1251 次安装2 周前更新
代码仓库

关于 app-copy

app-copy 是一项用于审核应用界面文案或从应用描述生成完整微文案的技能,并按屏幕和交互类型整理输出,涵盖语气、常见界面状态与检查规则。

主要功能

  1. 01审核并评分现有界面文案
  2. 02按屏幕生成微文案
  3. 03覆盖八类界面文案
  4. 04按产品语境校准语气
  5. 05检查清晰度与按钮标签

适用场景

  1. 01检查现有应用中的硬编码文本
  2. 02为新应用起草界面文案
  3. 03改进空状态、错误提示和按钮

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/tushaarmehtaa/tushar-skills --skill app-copy

安装后在 Claude Code 中输入/app-copy确认已加载。

详细介绍

审核现有 UI 文案,或一次性为应用生成所有微文案。输出一份按屏幕和交互类型整理的文案文档。

阶段 1:确定模式

审核模式——代码库已存在。扫描硬编码字符串、占位文本和通用消息。评分并改写。

生成模式——用户描述应用。从头开始编写完整的文案文档。

**扫描方法:**阅读页面组件,查找:

  • JSX/TSX 中的字符串(<p>、<h1>、按钮文本、placeholder 属性)
  • Toast/通知消息(搜索 toast(、notify(、alert()
  • 错误边界和 catch 块
  • 空状态组件(搜索 "empty"、"no results"、"nothing here"、"get started")
  • 加载文本(搜索 "loading"、"please wait"、骨架屏组件)
  • 表单验证消息
  • 模态框/对话框文案

开始撰写前,先收集:

  • 应用的用途是什么?(用一句话说明)
  • 品牌语气是什么?(随意/专业/活泼/简洁)
  • 主要用户是谁?

如果代码库中已有答案,就不要询问。

阶段 2:8 类文案

在审核模式下,每类按 1–10 分评分。在生成模式下,将其作为检查清单。

空状态(15%)——用户尚未进行任何操作时看到的内容。这是大多数应用最容易忽视的地方。空状态必须:说明此处会显示什么,展示如何创建内容,并让人感到亲切而非空荡荡。“还没有项目”只能得 1/10。

错误消息(15%)——说明出了什么问题、原因是什么,以及接下来该怎么做。包含三个部分:(1)发生了什么,(2)原因,(3)现在该怎么办。绝不责怪用户。绝不含糊。“出了点问题”只能得 1/10。

按钮标签(15%)——每个按钮都必须能补完“我想要___”这句话。“提交”无法通过测试。“保存草稿”“发送邀请”“创建项目”则可以。

引导流程(15%)——首次使用体验。包含欢迎消息、设置步骤和首次操作提示。必须缩短用户获得价值的时间。不要解释功能——引导用户完成首次操作。

加载与进度(10%)——说明等待期间发生的情况。骨架屏 > 旋转加载图标 > “正在加载……”。对于耗时较长的操作,显示进度和当前正在进行的操作。“正在处理你的数据”胜过单纯显示旋转图标。

成功消息(10%)——确认操作已成功。要具体:“发票已发送至 [email protected]”,而不是“成功!”。适当时提供下一步操作。

工具提示与帮助文本(10%)——提供上下文引导,回答用户此刻心里正在想的问题。控制在 15 个词以内。如果需要更多内容,就链接到文档。

确认对话框(10%)——对于破坏性操作,必须清楚说明后果。说明将会发生什么、哪些操作无法撤销,并让主要操作按钮与动作动词一致。“删除 3 个项目”,而不是“确定吗?[确定] [取消]”。

阶段 3:校准语气

撰写文案前,先确定语气:

随意(Slack、Notion)——使用缩写、全小写,适当加入幽默。“一切就绪!” / “这里还没有内容——创建你的第一个项目吧”

专业(银行、医疗、企业)——规范大小写,不使用幽默,措辞准确。“您的转账已发起。” / “未找到记录。请使用上方的搜索筛选条件。”

活泼(Duolingo、Mailchimp)——突出个性,可以使用表情符号,采用鲜明的角色语气。“击掌!你做到了!” / “你的收件箱有点冷清。发送你的第一封营销邮件吧!”

简洁(Linear、Vercel)——尽可能少用词,不说废话,风格直白。“没有问题” / “已部署” / “已保存”

**除非产品显然需要其他语气,否则默认使用随意语气。**大多数独立开发或氛围编程产品都适合轻松随意的风格。

阶段 4:空状态规则

空状态是任何应用中最容易被忽视的文案,也是新用户最先看到的内容。

结构:

[Illustration or icon — optional but effective]
[Headline — what will appear here]
[Subtext — how to create the first one]
[CTA button — the action to take]

优秀示例:

No projects yet
Create your first project to get started.
[+ New Project]

No messages
When someone messages you, it'll show up here.

Your dashboard is empty
Connect your first data source to see metrics.
[Connect Data Source]

糟糕示例:

No data                    ← says nothing
Nothing to show            ← no guidance
0 results found            ← database language, not human language
No items match your search ← ok but add "Try different keywords"

阶段 5:错误消息规则

每条错误消息都有三个作用:说明发生了什么、解释原因、说明该怎么做。

公式:[发生了什么]。[原因/上下文]。[下一步该怎么做]。

Couldn't save your changes. The server didn't respond. Try again in a few seconds.

That email is already registered. Sign in instead?

File too large. Max size is 10MB. Try compressing the image first.

Payment failed. Your card was declined. Update your payment method to continue.

不要写:

  • “出了点问题”(出了什么问题?)
  • “输入无效”(哪个输入?哪里有问题?)
  • “错误 500”(对用户毫无意义)
  • “请稍后重试”(稍后是多久?)
  • “发生了意外错误”(所有错误都出乎意料)
  • 在严重错误前加“哎呀!”(付款失败可不是闹着玩的)

阶段 6:按钮和 CTA 规则

每个按钮都要能补全句子“我想要 ___”。

按钮文案要描述它执行的操作,而不是它的类型:

"Save changes"        ← what it does
"Submit"              ← what it is (bad)

"Send invitation"     ← specific action
"Confirm"             ← vague (bad)

"Delete account"      ← clear stakes
"OK"                  ← unclear stakes (bad)

"Start free trial"    ← value clear
"Get Started"         ← started with what? (bad)

破坏性按钮必须明确写出操作:“删除项目”“移除成员”“取消订阅”。不要只写“删除”或“移除”,却不说明对象。

阶段 7:输出格式

审核输出:
APP COPY AUDIT — [product]
════════════════════════════════════
Empty States         [X/10]  [one-line note]
Error Messages       [X/10]  [one-line note]
Button Labels        [X/10]  [one-line note]
Onboarding           [X/10]  [one-line note]
Loading & Progress   [X/10]  [one-line note]
Success Messages     [X/10]  [one-line note]
Tooltips & Help      [X/10]  [one-line note]
Confirmations        [X/10]  [one-line note]
────────────────────────────────────
Overall              [X/80]
════════════════════════════════════

REWRITES (worst 3 categories):

[Category] — [file:line]
  Before: "[original text]"
  After:  "[rewritten text]"
生成输出:

按屏幕/组件组织。每条内容:

[Screen Name]
  empty state:   "[copy]"
  error:         "[copy]"
  success:       "[copy]"
  buttons:       "[label1]" / "[label2]"
  placeholder:   "[copy]"

生成后,主动提出将文案直接写入代码库——找到相关组件并原地替换字符串。

验证

[ ] Every empty state explains what will appear and how to create it
[ ] Every error message has: what happened + why + what to do next
[ ] Every button passes the "I want to ___" test
[ ] No "Submit", "OK", "Confirm", "Click here", "Learn more" without context
[ ] No "Something went wrong" or "An error occurred" anywhere
[ ] No "Loading..." as the only loading indicator
[ ] Success messages are specific — name the thing that was created/sent/saved
[ ] Destructive buttons name the object being destroyed
[ ] Voice is consistent across all copy (same tone, same casing, same punctuation)
[ ] No lorem ipsum, placeholder text, or TODOs left in the codebase

评论

支持 Markdown