mcpField
I
ios-ux-prototype

ios-ux-prototype

github.com/tddworks设计与 UI4066 次安装20 周前更新
代码仓库

关于 ios-ux-prototype

ios-ux-prototype 是用于制作移动应用旅程交互式 HTML 原型的技能，采用仿真的 iPhone 机框。它提供 iOS 设计系统及屏幕、导航和注释的组件模式。

主要功能

  1. 01iOS 26 Liquid Glass 样式
  2. 02可复用的 iPhone 机框组件
  3. 03用户旅程步骤与流程箭头
  4. 04集成 SF Symbols 图标雪碧图
  5. 05导航与内容组件模式

适用场景

  1. 01制作多屏应用旅程原型
  2. 02展示不同的屏幕流程
  3. 03为交互式屏幕设计添加注释

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tddworks/claude-skills --skill ios-ux-prototype

安装后在 Claude Code 中输入/ios-ux-prototype确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
ios-design-system.css
sf-symbols.svg
examples/
language-app-prototype.html
references/
ios-components.md

详细介绍

iOS UX 原型

使用逼真的 iPhone 模型创建交互式 HTML 原型，展示移动应用的用户旅程。

快速开始

  1. 将 assets/ios-design-system.css 中的 CSS 复制到新的 HTML 文件
  2. 将 assets/sf-symbols.svg 中的雪碧图粘贴到 <body> 顶部附近
  3. 结构：页面标题 → 旅程行 → 带内容的手机框架
  4. 在屏幕之间添加流程箭头，并为标注添加注释

iOS 26 设计（默认）

以当前 iOS 26 设计语言为目标——Liquid Glass 表面和 SF Symbols。除非用户要求使用较旧的风格，否则默认采用这些设计：

  • Liquid Glass 悬浮标签栏——使用 .tab-bar（现在是半透明、 带模糊效果、脱离屏幕边缘的胶囊形栏；当前标签有独立的 玻璃质感“镜片”胶囊）。为可滚动屏幕的 .scroll-content 设置 padding-bottom: 104px，确保列表行不会被悬浮栏遮挡。
  • Liquid Glass 导航栏／工具栏按钮——使用 .nav-glass-btn（圆形）或 .nav-glass-btn.text（胶囊形）作为尾随操作按钮，而非纯文本。
  • 优先使用 SF Symbols，而非表情符号——绝不要在 UI 控件、列表图标、 标签图标或操作按钮中使用表情符号。引用雪碧图中的字形： <svg class="sf"><use href="#sf-house"/></svg>。字形会继承 currentColor。
    • 国家旗帜是唯一允许使用的表情符号（SF Symbols 不包含旗帜字形）。
    • 如果需要的字形不在雪碧图中，请按照现有模式添加新的 <symbol>（24×24 viewBox）。
  • 玻璃质感的分段控件和半透明系统提醒会自动应用 CSS 样式。

<div class="nav-large with-action">
  <h1>Proxies</h1>
  <span class="nav-glass-btn"><svg class="sf"><use href="#sf-plus"/></svg></span>
</div>


<div class="tab-bar">
  <div class="tab-item active">
    <svg class="tab-ic"><use href="#sf-house"/></svg>
    <span class="tab-label">Home</span>
  </div>
  <div class="tab-item">
    <svg class="tab-ic"><use href="#sf-gear"/></svg>
    <span class="tab-label">Settings</span>
  </div>
</div>

常用雪碧图字形：sf-house、sf-globe、sf-antenna、sf-gear、 sf-person、sf-magnifier、sf-bell、sf-star、sf-chevron、 sf-chevron-down、sf-back、sf-arrow-up/down、sf-refresh、sf-plus、 sf-check、sf-xmark、sf-ellipsis、sf-share、sf-trash、sf-heart、 sf-paintbrush、sf-doc、sf-clipboard、sf-folder、sf-photo、sf-qrcode、 sf-link、sf-list、sf-lock、sf-shield、sf-bolt、sf-power、sf-info、 sf-clock、sf-chart、sf-wifi、sf-nosign、sf-compass。

页面结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App] User Journey</title>
  <style>/* Copy from assets/ios-design-system.css */</style>
</head>
<body>
  <div class="page">
    <header class="page-header">
      <h1>Journey Title</h1>
      <p>Description of the navigation flow</p>
    </header>
    <div class="journey-row">
      
    </div>
  </div>
</body>
</html>

核心组件

旅程步骤
<div class="journey-step">
  <div class="step-header">
    <div class="step-number">1</div>
    <span class="step-title">SCREEN NAME</span>
  </div>
  <div class="phone-frame">
    <div class="phone-screen">
      <div class="screen-layout">
        <div class="status-bar">
          <span class="status-bar-left">9:41</span>
          <div class="status-bar-right">
            
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 4.5C1 3.67 1.67 3 2.5 3h1C4.33 3 5 3.67 5 4.5v4C5 9.33 4.33 10 3.5 10h-1C1.67 10 1 9.33 1 8.5v-4zM6 3.5C6 2.67 6.67 2 7.5 2h1C9.33 2 10 2.67 10 3.5v5c0 .83-.67 1.5-1.5 1.5h-1C6.67 9 6 8.33 6 7.5v-5zM11 2.5c0-.83.67-1.5 1.5-1.5h1c.83 0 1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5h-1c-.83 0-1.5-.67-1.5-1.5v-6z"/></svg>
            
            <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 2.5a6.5 6.5 0 0 1 4.6 1.9.75.75 0 1 0 1.06-1.06A8 8 0 0 0 7.5 1a8 8 0 0 0-5.66 2.34.75.75 0 0 0 1.06 1.06A6.5 6.5 0 0 1 7.5 2.5zM7.5 5.5a4 4 0 0 1 2.83 1.17.75.75 0 1 0 1.06-1.06A5.5 5.5 0 0 0 7.5 4a5.5 5.5 0 0 0-3.89 1.61.75.75 0 0 0 1.06 1.06A4 4 0 0 1 7.5 5.5zM9.25 8.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z"/></svg>
            
            <svg width="25" height="12" viewBox="0 0 25 12" fill="currentColor"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" fill="none"/><rect x="22" y="4" width="2" height="4" rx="1"/><rect x="2" y="2" width="17" height="7" rx="1"/></svg>
          </div>
        </div>
        
      </div>
      <div class="home-indicator"></div>
    </div>
  </div>
</div>

注意： 默认情况下，手机框架使用刘海式边框。若要改用灵动岛样式，请将 dynamic-island-style 类添加到 .phone-frame，并加入 <div class="dynamic-island"></div> 元素。

流程箭头
<div class="flow-arrow">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
</div>
标注说明
<div class="annotation right" style="top: 200px; left: -150px;">Tap here →</div>

导航模式

大标题导航
<div class="nav-large"><h1>My Apps</h1></div>
带返回按钮的内联导航
<div class="nav-inline">
  <div class="nav-inline-left">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <path d="M15 18l-6-6 6-6"/>
    </svg>
    <span>Back</span>
  </div>
  <span class="nav-inline-title">Title</span>
  <span class="nav-inline-right">Edit</span>
</div>
分段控件（3-5 个选项）
<div class="segmented-control">
  <div class="segment active">Tab 1</div>
  <div class="segment">Tab 2</div>
  <div class="segment">Tab 3</div>
</div>
可滚动标签（多个选项）
<div class="scrollable-tabs">
  <div class="scroll-tab active">iPhone 6.7"</div>
  <div class="scroll-tab">iPhone 6.5"</div>
  <div class="scroll-tab">iPad Pro</div>
</div>

内容组件

应用列表行
<div class="app-row selected">
  <div class="app-icon blue">A</div>
  <div class="app-details">
    <div class="app-name">App Name</div>
    <div class="app-meta">v1.0.0 · iOS</div>
  </div>
  <span class="app-badge review">In Review</span>
  <span class="chevron">›</span>
</div>
操作卡片网格
<div class="action-grid">
  <div class="action-card highlighted">
    
    <div class="action-icon blue" style="color:var(--blue)">
      <svg class="sf"><use href="#sf-bolt"/></svg>
    </div>
    <h3>Feature</h3>
    <p>Description</p>
  </div>
</div>
列表组
<div class="list-group">
  <div class="list-row">
    
    <div class="list-icon yellow"><svg><use href="#sf-star"/></svg></div>
    <span>Setting</span>
    <span class="chevron"><svg><use href="#sf-chevron"/></svg></span>
  </div>
</div>
表单卡片
<div class="form-card">
  <div class="form-row">
    <div class="form-row-icon">📦</div>
    <span class="form-row-label">Label</span>
    <span class="form-row-value">value</span>
  </div>
  <div class="form-input">
    <label>Field Name</label>
    <input type="text" value="Content">
  </div>
</div>

颜色类

图标：.blue、.purple、.orange、.cyan、.green、.yellow、.red、.gray

徽章：.app-badge.review（橙色）、.app-badge.ready（绿色）、.app-badge.draft（紫色）

高亮：.action-card.highlighted（蓝色边框光晕）

区段分隔符（备用流程）

<div class="section-divider">
  <div class="section-divider-line"></div>
  <span class="section-divider-text">Alternative Flow</span>
  <div class="section-divider-line"></div>
</div>

资源

  • assets/ios-design-system.css - 完整的 CSS 设计系统（复制到 HTML 中）
  • assets/sf-symbols.svg - SF Symbol 雪碧图（粘贴到 <body> 中一次）
  • references/ios-components.md - 包含所有变体的完整组件文档

评论

支持 Markdown