Communitygithub.com

应用图标设计

遵循苹果人机界面指南,创建、修改和审核应用图标,确保清晰的视觉识别和可交付的成品。

应用图标设计 是什么?

该技能专为需要设计、重设计或审核苹果平台应用图标的开发者或设计师打造。它融合了苹果人机界面指南(HIG)的最佳实践,提供了从概念提炼到最终文件导出的完整工作流程。技能强调简约、高辨识度的视觉隐喻,并确保图标在小尺寸下依然清晰可辨。它涵盖所有苹果平台(iOS、iPadOS、macOS、watchOS、visionOS、tvOS),详细说明了正确的画布尺寸、系统遮罩形状以及现代工作流程(包括 Icon Composer 和 Liquid Glass 效果)。此外,它还包含一个详细的质量检查清单(QA checklist)和可选的品牌特定覆盖层,帮助用户避免常见陷阱(如细线、文字、非必要渐变和内置圆角)。该技能基于苹果官方文档,是对 HIG、Icon Composer 工作流程以及设计资源等权威资料的实用综合,由用户提供实时更新以确保准确性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jamesisbuilding/App-Building-Skills/tree/main/skills/appicon-creator

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

应用图标设计技能

触发条件

当需要新建应用图标、重新设计图标、对图标进行评审,或提出苹果应用图标导出请求时使用。若生产规格很重要,请查阅苹果当前的设计和技术文档。

流程

  1. 确定应用的核心目的和品牌语言。如有已有的品牌资产则沿用,否则选择独具特色的视觉隐喻。
  2. 将隐喻简化为一个可识别的核心符号,采用粗体、填充、简单形状和清晰的轮廓。避免细小细节、繁杂纹理、细线条、截屏、不必要的文字和过度光泽。
  3. 选择经过深思熟虑的、克制的调色板以及清晰的前景/背景对比度。从视觉上将主要图标居中,并为系统遮罩留出充足的边距(安全区域)。
  4. 设计需在小尺寸下仍可识别。在全尺寸、180 像素、60 像素和 30 像素(设计测试,非苹果规定的像素要求)下预览。
  5. 考虑默认、深色、浅色和着色模式。确保概念和可识别性在不同外观下保持一致。
  6. 查看质量检查清单;简化任何在小尺寸下会变成噪点的元素。
  7. 以可用工具实际支持的格式输出最高质量的素材。如果矢量/可编辑源文件或变体尚未制作完成,则不要声称拥有它们。

苹果人机界面指南

  • 倾向于简单和即时识别。一旦系统添加高光和阴影,精细的特征可能会变得嘈杂。
  • 倾向于使用插图而非照片,且不要仅仅复制应用界面。
  • 避免极细的线条和尖锐的角度,因为其细节在小尺寸下会丢失。
  • 避免非必要的文字、标语或平台特定陈述。
  • 不要复制苹果硬件。
  • 使用未遮罩的方形图层;系统本身会应用圆角/圆形遮罩。不要在基础图稿中内建圆角。
  • 从中心开始定位重要内容,使其不会被系统遮罩截断。
  • 图标应在不同设备和外观下保持视觉一致性。

苹果尺寸和系统形状(已验证于 2026-10-24)

目标平台画布系统遮罩
iOS, iPadOS, macOS1024 × 1024 像素圆角矩形
watchOS1088 × 1088 像素圆形
visionOS1024 × 1024 像素圆形
tvOS800 × 480 像素圆角矩形
  • 便携式导出使用 sRGB;苹果平台也支持 Display P3 色彩空间,如文档所述。
  • 对于现代苹果工作流程,优先使用分层图稿和 Icon Composer 来预览平台和外观变体(默认、深色、浅色/深色、着色/深色)。
  • 尽可能将图稿绘制为矢量,并将每个可独立调节的图层导出为 SVG,同时将文本转换为轮廓。如果 SVG 功能不受支持,PNG 图层也可以接受。
  • 在准备 Liquid Glass 分层图标时,推迟将模糊、阴影、反射效果、半透明度、不透明度、渐变和背景效果应用到 Icon Composer 中。
  • 背景必须覆盖整个画布。对于静态 iOS 图标,默认使用完全不透明的全出血背景。透明分离的字形是一种不同的素材类型,而非完整的图标。
  • 系统会应用遮罩;不要在图层图稿上导出遮罩几何体。
  • 对于静态图标工作流程,可以交付扁平 1024 像素 PNG,但它不等同于分层 Icon Composer 的 .icon 素材。

质量检查清单

  • 一个令人难忘的概念,可识别的轮廓
  • 小尺寸和灰度模式下清晰可读
  • 有限的颜色和强烈的对比度
  • 没有不必要的文字、纹理、精细细节或截屏
  • 光学居中和安全的边缘间距
  • 源图稿为方形且未遮罩,背景为全出血
  • 已根据深色、着色和浅色外观进行审查
  • 正确的目标平台尺寸、色彩空间和导出格式
  • 关于可编辑性、图层和格式的声明与实际文件相符

用户当前的脑力/数学应用:可选的品牌特定覆盖层

仅用于此特定项目,而非所有应用:

  • 最多三种纯色;调色板取自钴蓝/电光蓝、紫罗兰色和洋红粉色(或适当时候使用深海军蓝)。
  • 无渐变,除非用户覆盖此规则。
  • 抽象、简化的脑部轮廓,带有少量粗犷的脑叶;不要超详细的解剖图示。
  • 在小图标尺寸下保持极简、可识别和美观。深度应有节制,并且不应增加更多颜色。
  • 应用图标背景是构图的一部分,不应透明(除非要求单独的符号图层)。

图像生成提示模板

"为 [APP] 创建一个方形应用图标,包含一个令人难忘的中心符号 [SYMBOL],该符号由少量高对比度的纯色形状组成,采用 [PALETTE] 调色板,背景为全出血不透明色 [BACKGROUND]。按视觉重量居中,在外部边缘留出充足空间,避免渐变 [如果要求]、字母、界面元素和次要细节,确保在小尺寸下具有强识别性,不要内建圆角遮罩。"

权威来源

  1. 苹果 HIG 应用图标:https://developer.apple.com/design/human-interface-guidelines/app-icons
  2. 苹果 Icon Composer 工作流程:https://developer.apple.com/documentation/xcode/creating-your-app-icon-using-icon-composer
  3. 苹果设计资源:https://developer.apple.com/design/resources/
  4. 苹果 Icon Composer:https://developer.apple.com/icon-composer/

设计建议是综合性的;发布前请查阅当前苹果规格。这是一份可移植的技能文档,并非其已注册为可执行系统/插件技能的证明。

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

app-keyword-research

Validate an app idea against the App Store before building it. Turns the idea into search phrases, measures demand (App Store autocomplete) and competition (current top-10 apps) for each, ranks keywords by opportunity, and maps which apps own the market. Use when the user wants keyword research, ASO, "is there demand for…", "who are the competitors for…", "what should we call it / which keywords", or to validate or compare app ideas.

app-offer

Designs one opinionated "Grand Slam Offer" for any app idea, new or already shipped, by running Alex Hormozi's $100M Offers method adapted to app stores. It covers the market and niche, the commodity check, a value-equation audit, the problem inventory, delivery vehicles, the trimmed value stack, pricing and tiers, scarcity, urgency, bonuses, the guarantee, naming, the paywall per placement, the onboarding fast win, a test plan and a ship plan. It works within App Store and Google Play rules. For a shipped app it reads the code and notes first and produces a before/after. Use it when the user says "/app-offer", "run app-offer on <idea>", "make a grand slam offer for my app", "Hormozi my app", "price my app" or "design my paywall offer", or asks how to package, price, name, guarantee or paywall an app. It writes offer/grand-slam-offer.md (or ./<app-slug>-grand-slam-offer.md for a new idea).

brand-reference-pack

Build or refresh a shortform brand reference pack for any app from its real surfaces — website, App Store listing and reviews, socials, the live app (driven end to end on the simulator) and its code tokens — plus a status check of the upstream foundations (ICP, voice of customer, brand voice). Produces the context that content formats and design decisions are made from, as markdown, tokens.json and a PDF. Use for "build a brand pack for <app>", "refresh the brand pack", "capture the site/app/socials for shortform", "/brand-reference-pack".

deep-work

Timekeeper and scribe for the user's own timeboxed build session, default 90 min, also 1h / 1.5h / 2h (Orient, Build, Verify, Harden, Close, scaled to the block). Use when the user says "start a session", "deep work", "90 min block", "work block", or invokes /deep-work. Subcommands: status, park <note>, close, abort.

new-app-info

Builds the information pack Apple asks for when App Review replies "We need additional information to better understand the app". It covers all six required items: (1) a screen recording on a physical device, as a shot list the user records; (2) the app's purpose and target audience; (3) setup and main features, with any login credentials or sample files; (4) the external services the app uses; (5) regional differences; (6) regulated industry or protected third-party material. It also runs Apple's "Prevent common issues" checks. Every answer comes from the app's own code (accounts, user-generated content, in-app purchases, SDKs, locales, screen-capture blocking, data deletion). It reads the connected iPhone's iOS version and checks it is the latest. It ends by telling the user to paste the reply into App Review Information → Notes. Use it when the user pastes that App Review message, says "/new-app-info", "we got rejected, they want more info", "answer App Review", or "make the App Store review pack". It w...

reel-motion-graphics

Turn a script or concept into an on-brand 9:16 explainer reel (luxury tech, warm sand on near-black, glassmorphism, CSS 3D, Bodoni + Instrument Sans) built in HyperFrames, with the animation above the fold and the presenter's talking head below. Use when the user gives a script, transcript, paper summary or concept and asks for a reel, motion graphics, an animated explainer or "the same style as the upcycling reel". Produces a HyperFrames project, a rendered MP4 and a live artifact player.

相关技能