给 AI 装上 taste-skill：Emo 世界地图 UI 改版记

2026-06-22 · 项目实践

Emo 世界地图功能已经能跑，但界面还是典型的「深色底 + 圆角卡片 + 满屏 emoji」——我自己看着也知道是 AI 默认审美。这次我做了一件事：把开源的 taste-skill 引进项目，让 Cursor 在改 UI 时先读设计约束，再动手写代码。改完直接打包上线，地址是 emo.icemelt.fun（备案前曾挂在 www.icemelt.fun/emo/，见子路径迁子域）。

taste-skill 是什么

taste-skill 是一套面向 Cursor Agent 的前端反模板化 Skill。核心思路不是「再教 AI 写 Tailwind」，而是逼它在写界面之前先回答几个问题：

这是什么类型的页面？给谁看？
用户要的 vibe 是极简、疗愈、还是偏营销落地页？
三个旋钮怎么定：布局变化度、动效强度、信息密度？

Skill 里还列了大量「AI Tell」黑名单：默认 Inter 字体、紫色渐变、三等分功能卡、眉题（eyebrow）满天飞、破折号装饰文案等等。对做落地页很强；我这次把它适配到 Expo / React Native，用在情绪疗愈类小应用上。

怎么装进项目

在项目里加了 Cursor 项目级 Skill 目录：

.cursor/skills/taste-skill/
├── SKILL.md          # 主规范（来自上游仓库）
├── mobile-SKILL.md   # 移动端图像方向参考
└── README.md         # 本仓库说明

之后对话里说一句「按 taste-skill 美化页面」，Agent 会先读 Skill，输出一行 Design Read（例如：疗愈向移动应用、沉静暗色、低密度留白），再改代码。这比每次口头重复「不要 AI 紫、不要 emoji 堆砌」省事得多。

这次对 Emo 的 Design Read

结合产品本身，我把这次改版定成：

跨端疗愈小应用，面向情绪低落时想找角落的用户；视觉语言偏沉静、留白多；保留原有心情色与地图能力，整体是「夜幕 + 月光蓝」而不是通用 SaaS 深色模板。

旋钮大致是：布局变化度 6、动效 4、密度 3——动效克制，别做成炫技落地页。

具体改了什么

层面	之前	之后
字体	系统默认	`DM Sans`（`@expo-google-fonts/dm-sans` + `expo-font`）
主题	单个 `colors.ts`	色彩 / 间距 / 字阶 / 圆角统一导出
组件	页面里堆 `StyleSheet`	`GlassCard`、`PrimaryButton`、`AppTabBar`、`ListRow` 等可复用块
图标	Tab、心情、按钮大量 emoji	`@expo/vector-icons`（Ionicons），情绪仍用颜色区分
开屏	单 emoji + 标题	渐变底、图标光环、等字体加载后再进主页
框架页	平铺卡片	玻璃质感卡片 + 维度色条 + 可探索子类带箭头

业务逻辑（心情推荐、高德/OSM 切换、POI 轮换、AI 陪伴）没动，符合 Skill 里「改版先审计、再动视觉」的顺序。这也是我最在意的：Skill 管审美，人管验收边界。

RN 适配时要注意的

taste-skill 原文偏 Web（Tailwind、Motion、GSAP）。迁到 Expo 时我刻意没硬搬整套栈，只保留原则：

一套 accent 色锁死全页（月光蓝 #7eb8da 保留为品牌色）
圆角体系统一：卡片 20、按钮全圆角、列表行 14
不用 emoji 当图标；疗愈产品可以保留温色，但不要「AI 默认紫」
按压反馈用 scale(0.98)，不搞复杂滚动动效（动效旋钮低）

上游还有 imagegen-frontend-mobile 专管出图，不负责写代码。我把它放在同目录当参考，真要做营销图时再调。

打包上线

Web 走 ECS 部署，当前入口为 emo.icemelt.fun（根路径构建）。备案期子路径方案与迁移步骤见子路径迁子域、 ECS + Nginx 那篇：

cd ~/Projects/emo-world-map
EXPO_PUBLIC_BASE_PATH= ./deploy/server-deploy.sh

脚本会按空 baseUrl 构建（子域根路径），再 rsync 到 /var/www/emo-world-map。若仍要挂 www/emo/ 子路径，用 npm run build:web:subpath。构建产物里会打进 DM Sans 与 Ionicons 字体文件，体积比上一版大一些，但首屏可读性明显好一截。

值不值得装

我的体会：

值得：当你反复让 AI「再好看一点」却总在紫渐变和 emoji 之间打转时，Skill 相当于固定设计总监的 checklist。
别迷信：Skill 管不了地图 SDK、定位权限、备案部署；这些仍要按项目文档自己验。
要裁剪：整份 SKILL.md 很长，移动端项目只执行相关章节，否则上下文被 Web 落地页规则淹没。

如果你也在用 Cursor 做小而真的产品，不妨从「项目级 Skill + 一次有边界的 UI 改版」试起。Emo 的下一版可能会继续收密度、补加载骨架，但审美底座已经不像第一版那么「一眼 AI」了。

打开 Emo 世界地图

← 全部文章