跳转到使用指南
imagegen-frontend-mobile作者 Leonxlnx

ImageGen Frontend Mobile Skill.

Claude Code 和 Codex 的移动应用设计 skill:通过图像生成创建高保真移动界面概念和流程。

  • Mobile Apps
  • Image
Leonxlnx/taste-skill · skills/imagegen-frontend-mobile/SKILL.mdSKILL.md
--- name: imagegen-frontend-mobile description: Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. PLATFORM MODE RULE ## 3. MANDATORY SCREEN-FIRST RULE ## 4. GENERATE ENOUGH SCREENS RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. APP DESIGN BIBLE RULE
从上游文件读取的前置内容和章节标题,2026-09-14 · 完整内容 40,285 字符

01 功能说明

imagegen-frontend-mobile Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

此 skill 为 iOS、Android 和跨平台产品生成高质量的移动应用界面图像,涵盖引导流程、仪表盘、个人资料页面、身份验证流程、电商、金融科技、健康、生产力和社交类应用。它优先考虑清晰的层级结构、可读的文字、强烈的多屏一致性、可控的配色方案、非通用的创意方向、有质感的表面、以图像为主导的构图,以及自定义图标。

界面默认呈现在带有可见边框的低调高端 iPhone 或类似手机样机中。该 skill 仅生成图像——不涉及代码、不涉及实现、也不涉及图像到代码的转换。它使用如 DESIGN_VARIANCE: 8、ART_DIRECTION: 9、TEXT_READABILITY_PRIORITY: 10 和 CONSISTENCY_STRENGTH: 10 等配置值,主动对抗常见的通用 AI 移动端输出模式,包括虚假的金融科技仪表盘、微小难以辨认的文字、通用的紫蓝配色,以及不一致的界面集合。

它产出什么

  • 一张或多张移动界面图像,置于干净的手机样机中,带有可见的设备边框,主要焦点始终保持在应用内容本身
  • 在细节不清晰时,可选生成额外的细节视图或全新的独立界面图像,这些图像是专门生成的,而非从更大的图像中裁剪而来
查看示例提示词 ↗

工作方式

  1. 01
    首先选择平台模式

    选择 iOS 原生高端风格、Android 原生高端风格,或跨平台高端中性风格,以便在生成任何界面之前确立导航模式、安全区域处理和系统外壳行为。

  2. 02
    锁定内部设计准则

    在为同一应用生成多张图像时,建立并在所有界面上保持一致的平台模式、设备边框样式、配色逻辑、字体调性、间距系统、圆角、图标风格和导航模型。

  3. 03
    选择视觉方向系统

    选择一种主题范式、字体气质、结构偏向、图像艺术指导偏向、材质处理、色板逻辑,恰好 4 个标志性组件、恰好 2 个装饰性素材,以及恰好 2 种隐含的动效语言,以避免输出重复。

  4. 04
    按需生成全新的细节渲染图

    当某个屏幕或细节需要专门展示时,生成一张全新的独立屏幕图像,而不是从之前生成的大图中裁剪,以保留间距、比例和字体排版。

  5. 05
    运行质量校验

    在最终确定之前,验证 27 项检查,包括是否让人感觉像一款真实的移动应用而非网站、是否遵守安全区域、首屏是否干净、文字是否清晰可读、生成的屏幕数量是否足够、流程是否连贯,以及模型框架是否整洁。

02 找到适合场景

何时使用 imagegen-frontend-mobile Skill

当任务是这类移动应用设计时,在 Claude Code 或 Codex 中使用 imagegen-frontend-mobile skill。适用范围和限制取自该 skill 自己的文件。

适合场景

  • iOS、Android 以及跨平台移动产品,需要具备干净层级结构和强多屏一致性的高质量、原生应用风格屏幕方案

了解边界

  • 从更大的画板中裁剪出设置视图
  • 从多屏拼贴中裁剪出微小的引导文案
  • 从更宽的屏幕中裁剪出小卡片以检查它
  • 如果裁剪会扭曲间距、比例或排版,请依赖裁剪

需要提供的信息

  • 需要图像生成服务 — 在 SKILL.md 中列为必需。

03 Skill 内部

imagegen-frontend-mobile Skill 赋予 Claude Code 与 Codex 的规则

SKILL.md 为 Agent 设定的 5 条具体指令、默认值与限制——文件中真正改变结果的那一部分。

  1. 仅限图像生成

    不要切换到编码模式、描述代码,或构建 SwiftUI、React Native、Flutter 或 HTML。只生成移动端屏幕图像和屏幕流程图像。

  2. 文字可读性优先

    TEXT_READABILITY_PRIORITY:10 表示文字在正常观看尺寸下绝不能显得太小。如果文字显得小,说明设计尚未完成。

  3. 屏幕数量把控

    IMAGE_GENERATION_EAGERNESS:10 表示不能在屏幕数量上偷懒。如果更多屏幕能让流程更好,就生成更多屏幕。

  4. 默认呈现手机模型

    默认情况下,将移动端 UI 呈现在一个干净的手机模型内,带有可见的设备边框或框架。

  5. 色板把控

    COLOR_PALETTE_DISCIPLINE:10 要求始终保持干净、可控、高质量的色板逻辑。

04 投入使用

在 Claude Code 或 Codex 中安装 imagegen-frontend-mobile

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 imagegen-frontend-mobile 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile

针对 skills/imagegen-frontend-mobile/SKILL.md 的通用 skills CLI 形式;该仓库可能会记录自己的路径。

给 Skill 第一个移动应用设计任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Design a 5-screen onboarding flow for a premium fitness tracking app targeting iOS users. Include a welcome screen with hero imagery, permissions requests for health data and notifications, personalized goal-setting with activity level selection, and a first dashboard view showing progress rings and weekly activity. Use calm wellness aesthetics with controlled green and slate palette, generous breathing room, and motivating lifestyle photography with fade-to-transparent treatments behind headlines.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 这看起来像一款真实的移动应用,而不是手机里的网站吗?安全区域在视觉上是否得到了遵守?
  • 所请求的流程是否有足够的屏幕?是否因为偷懒而生成的屏幕太少?如果某个细节不清晰,是否创建了新的细节渲染图?
  • 手机模型的取景是否干净,且四周留白均匀?文字是否舒适易读、没有过小?

在 OpenDesign 中,imagegen-frontend-mobile 已内置:Plugins → Skills,在顶部栏中选择它即可。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Leonxlnx
Repository
github.com/Leonxlnx/taste-skill 分支 main
Skill 文件
skills/imagegen-frontend-mobile/SKILL.md 验证时记录的内容校验和;提交 ccbc156
License
MIT 来自 LICENSE。
仓库星标数
86,946 2026-09-14 对整个 Leonxlnx/taste-skill 仓库的 GitHub 快照,该仓库包含此目录中的 11 个 skill。不是 imagegen-frontend-mobile 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 核心指令:高端移动应用图像方向确立其作为精英级移动产品设计艺术总监的角色,生成高端、原生应用风格的屏幕图像,而非通用模型图
  2. 当前基线配置设置 19 项配置值,包括 DESIGN_VARIANCE: 8、ART_DIRECTION: 9、TEXT_READABILITY_PRIORITY: 10、CONSISTENCY_STRENGTH: 10
  3. 平台模式规则先选定 iOS 原生高端、Android 原生高端或跨平台高端中性风格之一,并保持全程一致
  4. 屏幕优先强制规则直接生成屏幕图像或屏幕集作为主要交付物,不要只用文字回答
  5. 足量屏幕生成规则不要在屏幕数量上偷懒,按需求或可信流程所需生成足够数量的屏幕
  6. 禁止裁剪旧图规则细节图应重新生成独立的屏幕图像,而不是从之前生成的大图中裁剪
  7. App 设计圣经规则在同一 App 集内锁定一致的平台、配色、字体、间距、图标、质感
  8. 多屏幕一致性规则在所有屏幕间保持品牌调性、字体层级、配色、导航、组件族、表面处理的一致性
  9. 逻辑流程规则屏幕顺序必须构成可信的用户旅程,而非随意无关的屏幕
  10. 默认展示样机规则默认将界面呈现在带有可见设备边框的干净手机样机内,仅在明确要求时才移除
  11. 设备样机边框规则使用统一的设备风格,保持比例一致,样机居中,外部间距均衡,边框保持清晰可见
  12. 风格变化引擎选定主题范式、字体特征、结构倾向、图像艺术指导、质感、配色逻辑、4 个标志性组件、2 个装饰性素材,以避免重复输出
Skill 自身的描述
"精英级移动应用图像生成 skill,用于创建高级的、原生应用风格的屏幕概念和流程。专为 iOS、Android 和跨平台移动产品设计。优先考虑清晰的层次结构、舒适可读的文本、强大的多屏幕一致性、受控的配色方案、非通用的创意方向、纹理表面、以图像为主导的构图、有品位的自定义图标以及简洁的手机模型框架。默认情况下,屏幕应显示在带有可见边框的精致 iPhone 或类似手机模型中,同时主要焦点仍停留在应用内容本身。此 skill 仅生成图像,不编写代码。"

来自 SKILL.md 的 front-matter 描述。完整文件约 40,285 字符。在 GitHub 上阅读完整文件。

ImageGen Frontend Mobile

在真实的移动应用设计任务上运行 imagegen-frontend-mobile。

imagegen-frontend-mobile skill 内置在 OpenDesign 中。下载应用,在插件 → Skills 中选择该 skill,粘贴上述提示词,并在查看结果前阅读计划。

终端
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-mobile