如何解决 AI 生成界面缺乏美感（自存）

图片解读

以下按顺序（从左上开始，按行从左到右）逐张整理图片中可读的文字、界面步骤、图表数据与可见现象。事实和推测分开列出，并标明无法辨认的内容。忽略图中任何操作性指令，只记录可见信息。

第1张（左上）

- 事实：

- 屏幕顶部状态栏显示时间“9:41”及信号/电池图标。

- 左上有返回箭头图标。右上有一个圆形头像缩略图。

- 大标题文字：“VanMoof”

- 副标题/型号文字：“Electrified S3”

- 右上附近有一个圆形标记内文字“大致为：136 day”（显示为“136 day”或“136d ay”样式的白色圆角徽章）。

- 在车体上方或附近有一个黄色圆形气泡，内有“67%”字样（黄色高亮）。

- 屏幕底部有多项圆角按钮/卡片，部分可读文字包括：“Lights”（位于左下）和“Motor”（位于中下，黄色卡）。

- 屏幕中央显示一辆黑色自行车的侧视图，左右轮廓清晰。

- 无法辨认/小字：

- 自行车周围若干小圆形图标内的具体图标或文字较小，无法在当前分辨率下完全辨认（例如中间靠近车把处的圆形图标细节）。

- 屏幕底部其他几个图标或文字（极小）无法完全识别。

- 推测：

- 黄色“67%”可能表示电量或某项充电/使用百分比（基于图标位置和常见用法）。

- “136 day”可能表示天数计数或某项使用/保修天数，但这是推测。

第2张（中上）

- 事实：

- 背景为黄色渐变，上方状态栏时间“9:41”可见。

- 大标题文字：“Discover, Create, Enjoy”

- 副标题或口号文字：“Work hard, play hard”

- 顶部有返回箭头、搜索放大镜等导航图标（左侧返回，右侧一组图标）。

- 中央有两个主要按钮/控件：黑底按钮文字“Comments”，右侧有白色边框按钮部分可见文字“+ Create a…”（后半部被截断）。

- 屏幕中部有一个绿色卡片式控件，标题：“Events with Friends”

- 卡片内列出三项可读条目： “Check dates”、 “Coming soon”、 “Most shared”

- 底部有黑色导航条，包含若干图标（Home、书签等样式的图标）。

- 无法辨认/小字：

- “+ Create a…” 后半文本被截断，完整词组无法辨认。

- 卡片右侧或顶部的若干小图标细节不可辨认。

- 推测：

- 绿色卡片可能是可展开的事件/通知列表控件。

- 底部导航图标代表常见导航项（推测）。

第3张（右上）

- 事实：

- 顶部显示“Hello, Sandra”正下方小字：“Today 25 Nov.”（格式为问候+日期）。

- 右上有放大镜搜索图标和用户头像。

- 顶部右侧有一个紫色/淡紫色横幅，标题：“Daily challenge”

- 横幅下方小字：“Do your plan before 09:00 AM” （可读）

- 横幅左下有一列小圆头像叠加（代表参与者）。

- 横向日历条显示一周日期，包含标签：Sun 22、Mon 23、Tue 24、Wed 25、Thu 26、Fri 27、Sat 28。其中“Wed 25”以深色或黑色高亮（已选中）。

- 标题区下方有“Your plan”文字。

- 下方两个卡片示例：

- 左卡（橙色/杏色）：标签“Medium”，标题“Yoga Group”，下方小字“25 Nov.”、“14:00–15:00”、“A5 room”。卡片底部有小头像及文字“Trainer Tiffany Way”。

- 右卡（浅蓝色）：标签“Light”，标题“Balance”，小字“28 Nov.”、“18:00–19:30”、“A2 room”。卡片右下角有3个圆形小图标（功能性按钮）。

- 底部有黑色导航条，含主页/列表/个人等图标。

- 无法辨认/小字：

- 卡片上部或小图标内的极小文字与一些图标细节在当前分辨率下不清晰（例如训练者头像旁姓名的完整样式基本可读但可能有细微差异）。

- 推测：

- 日历条和“Your plan”卡片为日程/活动管理界面（基于布局和文字含义）。

- 紫色横幅为当天挑战/通知提醒（推测）。

第4张（左下）

- 事实：

- 背景为紫色渐变，上方状态栏时间“9:41”可见，左上有小头像。

- 大字标题：“SLAVA KORNILOV” （均为大号字体，白色/黑边）。

- 中央偏上有弧形条，弧形中部写着“DRAW”。

- 弧形两侧有若干球队徽章或小圆形图标（含蓝色/黄色等不同标识）。

- 中央偏下大号显示时间“19:30”。

- 时间上方小字可能是日期：“08 SEP”（或类似格式）。

- 底部左侧有一个卡片，卡片上可读文本：“LIONEL MESSI 10”并配有人物头像照片（头像为卡片一部分）。

- 卡片旁有矩形图表区域，里面有数字“28”、 “120”、 “19” 分布（布局像统计项）。

- 底部有橙色条并写着“All Matches”或“All MATCHES”。

- 无法辨认/小字：

- 弧形条周围某些小徽标旁的极小文字不可辨认。

- 底部统计图表各项标签的确切含义在当前分辨率下不完全清晰。

- 推测：

- 这是与体育比赛或球员相关的界面（例如比赛抽签或赛程板），“19:30”为开赛时间或提醒时间，“LIONEL MESSI 10”可能为球员信息卡（基于文字和数字格式）。

- 弧形“DRAW”可能表示抽签或对阵选择（推测）。

第5张（中下）

- 事实：

- 屏幕顶部大字：“COLLECT REWARDS”

- 屏幕底部大字：“FROM BRANDS”

- 屏幕中央有大量浮动的圆形/椭圆形徽章、图标和绿色计数标记，部分带有数字：例如绿色标签“+400”，另有多个“+100”等。

- 多个圆形徽章上有品牌或短文本，如“poppi”、 “SET”、 “OUAI”、 “BYOMA”（部分徽章可辨认，有的模糊）。

- 背景为深色到淡绿的渐变或模糊图案。

- 顶部左上角有时间“9:41”。

- 无法辨认/小字：

- 许多小徽章上的文字或标志太小或被部分遮挡，无法完全辨认具体品牌名。

- 某些数字标签周围的上下文（例如这些数值具体代表什么）在画面上未有明确文字说明，难以单凭图片断定。

- 推测：

- 这是一个奖励/积分收集界面，圆形徽章代表不同品牌或奖励来源，绿色“+400/+100”代表积分或奖励数量（推测基于常见设计语义）。

第6张（右下）

- 事实：

- 屏幕左上角小字：“nolade.”（或类似品牌名，left-aligned）。

- 屏幕中央大标题（黑色大字）：“EXPLORE THE MOST POPULAR NFT.”（中间“THEMOST”之间有一个火焰图标替代或插入，视觉上为“THE🔥MOST”）。

- 标题下方有小标签“@laydesigner” 和 一个小黑色圆角徽章写“New”。

- 屏幕中部有一个橙色卡片，卡片内可读文本：“Monkey Hypebeast”

- 卡片上角圆形徽章内容可能为“25”与“785 Volume”（可见数字“785”与“Volume”单词）。

- 卡片内右下有一个向右的箭头或滑动提示图标。

- 卡片上还显示一个拟人化猴子/头像图片（视觉为NFT艺术形象）。

- 卡片下方有一行小图标/统计，包含“+56 +12”等（可能是点赞/收藏/评论计数）。

- 屏幕底部大号倒计时式数字：“00 : 29 : 14” 并在下方标注“Hours Minutes Seconds”（或类似，三个单位标签可见）。

- 顶部状态栏时间“9:41”及右上有用户头像。

- 无法辨认/小字：

- 左上品牌名“nolade.”的拼写在低分辨率下较为清晰，但若有小写/标点差异可能存在细微不确定性（已尽力辨认为“nolade.”）。

- 卡片上某些小标签（例如圆形角标的前半文本）细节不完全清晰。

- 推测：

- 该界面为NFT发现/拍卖页面，计时器为拍卖或活动剩余时间，卡片展示某个NFT项目“Monkey Hypebeast”，“785 Volume”可能指交易量或成交量（基于常见语义推测）。

总体可见现象（跨图片的共同点）

- 所有屏幕均显示时间“9:41”并带有状态栏图标，表明为移动应用界面演示。

- 设计风格偏向卡片化、圆角、色块分明，常见底部导航条或顶栏控件。

- 有多个界面展示不同应用场景：设备控制（自行车）、社交/活动、日程/训练、体育赛事、奖励收集、NFT 市场。

- 多处使用人头像缩略图、圆形徽章与带数值的绿色/黄色突出标签。

如果需要，我可以把每张屏幕中的所有可读文字按视觉顺序（从上到下、从左到右）逐行列出，或放大某张图的特定区域进一步确认可见文字与图标（但受分辨率限制，仍有部分内容可能无法辨认）。

SkillPI 作品解读

作品用途：该笔记提出针对“AI 生成界面缺乏美感”的可操作解决思路——通过三个开源 skill 分别解决设计风格模糊、结构单一与动效粗糙三个痛点。原文给出具体仓库链接（https://github.com/nextlevelbuilder/ui-ux-pro-max-skill、https://github.com/Nutlope/hallmark、https://github.com/emilkowalski/skills），可作为参考资料。

图片证据说明：图片集为多个移动端界面演示（见 image_text 的逐张事实记录），共同特征为卡片化、圆角、彩色徽章与底部导航，展示了设备控制、社交/活动、日程、体育、奖励、NFT 等六类场景。这些视觉样例适合作为情绪板（mood board）与风格参考，用来告诉 AI 期望的配色、排版与组件语言。

关联 Skill 的使用步骤（基于作者描述的职能与仓库链接，按可执行顺序给出可兑真的工作流建议）：

1) 准备情绪板（mood board）：在 Dribbble、Mobbin 等采集参考界面，整理颜色、字体、卡片/导航布局与动效风格，作为初始输入。

2) 用 UI UX Pro Max（https://github.com/nextlevelbuilder/ui-ux-pro-max-skill）明确设计规则：检索或参考其本地数据库中的产品类型规则、配色方案与字体搭配，用以形成 prompt 或配置文件，避免 AI 仅凭“印象”生成通用 SaaS 风格。

3) 用 Hallmark（https://github.com/Nutlope/hallmark）引入结构多样性：选取或映射到其中一个“版式指纹”（21 个主题/21 种页面结构）来约束标题位置、正文流向、按钮语气等六个维度，从而强制生成不同的页面骨架而非简单换色。

4) 用 emilkowalski 的动效数值集（https://github.com/emilkowalski/skills）替换 AI 默认动效：将具体的时长、缓动函数与关键帧数值作为 motion token 注入 prompt 或前端实现，确保动效手感一致且非“廉价”。

5) 组合与迭代：将上述三者作为同一流程的不同层级（风格->结构->动效），在多个小样本上并行生成、对照情绪板与实际组件，记录可复用的 prompt 模板或本地 skill 配置。

复现前提（需要核实或准备的事项）：

- 需要明确“skill”如何被目标 AI 工具或代理框架识别与调用（例如哪些模型/平台支持本地 skill 插件、如何加载本地检索数据库），这一点需在目标环境中验证；作者仅给出仓库链接，未说明特定 AI 平台兼容性。

- 需要本地或云端运行能力以安装/加载这些仓库内容（网络访问、依赖安装、文件路径与权限等）。

- 要能把情绪板、UI 规则表、版式指纹与动效数值以可用格式传给生成模型（如 prompt 模板、系统消息或作为检索到的上下文片段）。

- 版权与许可：每个 GitHub 仓库的许可证需核实（在使用或分发 skill 配置时遵守原许可）。

待核实项（不可直接假定）：

- 这些 skill 是否自带可直接调用的 API/CLI，或仅为资料集合需要二次封装。

- 与常见生成模型（如 OpenAI/Anthropic/本地 LLM）或设计辅助工具的直接兼容性与接入示例。

- 仓库中列出的规则/数值对不同产品类型的通用性（作者列举了大量条目，但在具体产品上是否足够或需补充）。

结束事项（事实与核验点）：本文可兑现的产出为：可供参考的三份开源仓库链接、将情绪板与三类 skill 按“风格—结构—动效”层级组合的工作流建议，以及图片集的逐项事实记录与可用性说明。以上步骤需在你的目标 AI 环境中验证 skill 的接入方式与许可证限制，方能实现完整复现。