name: ios-tech-design
description: 创建iOS风格的前端界面和科技感海报设计。当用户需要设计类似iOS/Apple风格的UI界面、需要制作科技感十足的海报、需要现代简约的产品界面、或需要高端精致的视觉设计时使用此技能。涵盖iOS Human Interface Guidelines设计语言、科技感视觉元素、高级动效和现代UI范式。

iOS & 科技感设计技能

此技能指导创建两类高质量设计输出：
1. iOS风格前端界面 - 遵循Apple Human Interface Guidelines的现代UI
2. 科技感海报设计 - 具有未来感和技术美学的视觉设计

核心设计原则

iOS风格界面设计

遵循Apple设计哲学的六大支柱：

必须使用的iOS视觉元素：
- 圆角: 所有卡片、按钮使用 border-radius: 12-16px（大组件）或 8-10px（小组件）
- 毛玻璃效果: backdrop-filter: blur(20px); background: rgba(255,255,255,0.7)
- SF Pro字体风格: 使用系统字体栈 -apple-system, BlinkMacSystemFont, 'SF Pro Display'
- 柔和阴影: box-shadow: 0 4px 20px rgba(0,0,0,0.08)
- 渐变强调: 微妙的线性渐变用于强调元素

详细设计规范参见 references/ios-ui-guidelines.md

科技感海报设计

创建具有未来感的视觉设计，运用以下核心元素：

视觉语言：
- 几何形状: 六边形网格、圆环、抽象线条、粒子系统
- 光效处理: 发光边缘(glow)、光晕(halo)、射线(rays)、霓虹效果
- 深色主题: 深空黑 #0a0a0f 到深蓝 #0d1b2a 的渐变背景
- 科技配色: 电光蓝 #00d4ff、赛博绿 #00ff88、科技紫 #8b5cf6、能量橙 #ff6b35

必须包含的科技感元素：

/* 发光效果 */
.glow { 
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5),
              0 0 40px rgba(0, 212, 255, 0.3),
              0 0 60px rgba(0, 212, 255, 0.1);
}

/* 网格背景 */
.tech-grid {
  background-image: 
    linear-gradient(rgba(0,212,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* 扫描线效果 */
.scanline::after {
  background: linear-gradient(transparent 50%, rgba(0,0,0,0.1) 50%);
  background-size: 100% 4px;
}

详细设计规范参见 references/tech-poster-guidelines.md

设计工作流程

第一步：确定设计方向

iOS界面设计时问：
- 是应用界面还是网页界面？
- 需要深色模式还是浅色模式？
- 主要交互场景是什么？

科技海报设计时问：
- 海报主题是什么（产品发布/科技活动/数据可视化）？
- 目标受众是谁？
- 需要传达的核心信息是什么？

第二步：构建基础框架

iOS界面基础模板：

<div class="ios-container">
  <header class="ios-navbar">
    <button class="back-btn">‹</button>
    <h1 class="nav-title">标题</h1>
    <button class="action-btn">完成</button>
  </header>
  <main class="ios-content">
    <!-- 内容区域 -->
  </main>
  <nav class="ios-tabbar">
    <!-- 标签栏 -->
  </nav>
</div>

科技海报基础模板：

<div class="tech-poster">
  <div class="background-layer">
    <!-- 背景效果：网格、粒子、渐变 -->
  </div>
  <div class="content-layer">
    <h1 class="hero-title">主标题</h1>
    <p class="tagline">副标题/口号</p>
    <div class="visual-element">
      <!-- 核心视觉元素 -->
    </div>
  </div>
  <div class="effect-layer">
    <!-- 光效、粒子、动画 -->
  </div>
</div>

第三步：精细打磨

iOS界面打磨清单：
- [ ] 所有交互元素都有触觉反馈样式（:active 状态）
- [ ] 页面切换使用滑动过渡动画
- [ ] 列表有弹性滚动效果 -webkit-overflow-scrolling: touch
- [ ] 状态栏区域预留 padding-top: env(safe-area-inset-top)
- [ ] 底部导航栏预留 padding-bottom: env(safe-area-inset-bottom)

科技海报打磨清单：
- [ ] 至少有一个发光/霓虹效果元素
- [ ] 背景包含网格或粒子效果
- [ ] 使用科技感字体（等宽字体或几何无衬线字体）
- [ ] 色彩对比度符合可读性标准
- [ ] 添加微妙的动画效果（如呼吸光效、粒子漂浮）

禁止使用

iOS界面禁忌：
- ❌ 方角元素（除非是特定设计需求）
- ❌ 过重的阴影 box-shadow > 30px
- ❌ 非系统字体的正文文字
- ❌ 过度装饰（渐变背景、复杂纹理）
- ❌ 过小的触摸目标（< 44px）

科技海报禁忌：
- ❌ 使用老旧的科技clipart图片
- ❌ 过于明亮的纯色背景
- ❌ 杂乱无章的元素堆砌
- ❌ 低质量的光效（过度曝光、锯齿边缘）
- ❌ 与主题不符的卡通元素

资源引用

• iOS UI完整规范: references/ios-ui-guidelines.md
• 科技感海报完整规范: references/tech-poster-guidelines.md