UI Composition 是一个用于界面视觉设计的技能，适用于构建屏幕布局或页面结构、选择或优化配色、设定排版系统、建立间距与网格系统、设计响应式断点、创建或修改视觉层级、设计深色或高对比度变体等场景。
使用前需确认已有设计简报或策略、人物画像（尤其能力谱系）以及既有设计系统（如存在则调用 design-system-alignment）。
布局与结构：定义栅格列、间距沟槽与边距，确保网格在移动端、平板、桌面等断点自适应，并在 200% 缩放下内容合理重排；建立视觉上与 DOM 中均成立的阅读顺序，层级应通过结构而非仅颜色传达，去除全部颜色后页面仍可读可导航；使用一致的间距刻度（例如 4px 基准），触控目标至少 44x44px，交互元素间留足间距以防误触。
颜色：定义主色、辅色、中性色与语义色（成功、警告、错误、信息）；每组配色至少满足 WCAG AA 对比度（正文 4.5:1，大字与 UI 组件 3:1），尽可能达到 AAA（7:1）；不得仅靠颜色传达信息，须配合文字标签、图标或图案，并进行色盲模拟测试；深色模式应作为一等体验设计，两种模式下均保持对比度，并遵循 prefers-color-scheme 和 prefers-contrast 媒体查询。
排版：建立有清晰层级的模块化字号比例（标题层级、正文、说明、标签），正文最小 16px（1rem），正文行高 1.5、标题 1.2–1.3；正文行长 45–75 字符，段间距至少为字号 1.5 倍，避免两端对齐；文字放大到 200% 仍不丢失内容与功能；选字体优先可读性，确保 I、l、1 与 O、0 等字符区分明显，并提供同类别回退字体。
响应式：建议移动 320–480px 单列堆叠、平板 481–1024px 灵活布局、桌面 1025px+ 多列；各断点内容优先级正确、触控目标充足、文字无需横向滚动即可阅读，除非有意渐进增强，否则不隐藏其他断点可见的信息。
最后应对每项视觉决策记录做了什么、为何符合设计原则与人物画像、如何满足包容性设计。该技能可用作写作设计计划的一部分，与 design-system-alignment、cognitive-accessibility、adaptive-interfaces 配合，并由 designpowers-critique 评审。资料未提供具体安装命令或收费信息。