Telegram Mini App 界面优化建议

背景

当前项目是一个 Telegram Mini App，用于展示艺人资料、图片、价格、地区和联系方式。后端已经加入会员制度和联系方式解锁逻辑：

• 普通会员每天可查看 5 个联系方式
• 大会员每天可查看 10 个联系方式
• 默认资料接口不直接暴露 Telegram @xxx
• 用户点击“查看联系方式”后，通过 Telegram Mini App initData 校验并按额度返回联系方式

因此，界面优化的重点不是做营销页，而是让用户在 Telegram 内更快浏览资料、更清楚地区分普通资料和需解锁联系方式。

是否适合使用 taste-skill

taste-skill 可以使用，但需要选对方式。

该仓库中默认的 design-taste-frontend 更偏向落地页、作品集、品牌页和重设计，不适合原样套在这个产品型 Mini App 上。当前项目更适合使用同仓库里的 redesign-existing-projects 思路：

1. 扫描现有 React 和 CSS 结构
2. 诊断当前界面的信息密度、层级、交互状态和移动端问题
3. 在不破坏功能的前提下做局部优化
4. 跑构建验证

推荐设计方向

这个 App 应该走“安静、信息清晰、移动端优先”的产品界面，而不是大面积 hero、装饰卡片或复杂动效。

推荐方向：

• 首页列表优先展示关键筛选信息：地区、价格、图片数量、是否有联系方式
• 详情页把“个人图片”和“描述图片”分区展示
• 联系方式默认隐藏，但要明确告诉用户当前是否可解锁
• 会员额度状态应放在解锁动作附近，而不是做成很重的弹窗
• 移动端底部操作区可以固定“查看联系方式”或“已解锁联系方式”

具体优化点

1. 资料卡片

列表卡片建议展示：

• 艺人名称
• 地区标签
• 价格摘要
• 主图
• 图片数量
• 是否有联系方式

不要在卡片上暴露 Telegram @xxx。如果有联系方式，只显示“可查看联系方式”。

2. 详情页图片分组

详情页建议分成两个图片区：

• 个人图片：偏真人、生活照、头像类图片
• 描述图片：带大量文字、价格表、服务说明、截图类图片

这样可以避免文字图和真人图混在一起，用户浏览效率更高。

3. 联系方式解锁

联系方式区域建议显示三种状态：

• 未解锁：显示“查看联系方式”按钮
• 已解锁：显示真实 Telegram 联系方式
• 额度用完：显示“今日查看次数已用完”

后端已经按用户和日期做额度记录，同一个艺人当天重复查看不应重复扣次数。

4. 会员额度展示

建议在接口返回中展示：

• 今日已查看数量
• 今日总额度
• 剩余额度
• 当前会员等级

前端可以显示为：

今日已查看 2/5 个联系方式

大会员则显示：

今日已查看 2/10 个联系方式

5. 移动端体验

Telegram Mini App 的主要使用场景是手机，因此需要优先检查：

• 按钮是否足够大
• 标签是否换行正常
• 图片网格是否稳定
• 详情页返回是否明显
• 加载、失败、空数据状态是否清楚

技术实现建议

前端保持当前 React + CSS 结构即可，不建议为了界面优化引入大型 UI 框架。

推荐操作：

1. 优先改 webapp/src/App.tsx
2. 样式集中改 webapp/src/styles.css
3. 不改业务接口字段，除非确实需要会员额度展示
4. 每次改完跑：

npm run build

后端如果需要补充会员额度状态，则可以在 /api/me 和 reveal contact 接口里返回更多 quota 字段。

验证清单

上线前建议检查：

• 普通 artist API 不返回真实 telegram
• raw_text 中的 @xxx 已脱敏
• 点击查看联系方式必须带 Telegram Mini App initData
• 普通会员第 6 次查看会被拦截
• 大会员第 11 次查看会被拦截
• 同一艺人当天重复查看不重复扣次数
• npm run build 通过
• Go 后端测试通过

结论

可以使用 taste-skill 体系优化界面，但当前项目应以 redesign-existing-projects 的审计式优化为主。目标是提高资料浏览效率、隐藏联系方式泄露点、强化会员解锁体验，而不是把 App 改成营销页风格。