跳到正文
cccskills
免费在 GitHub 公开

ios-design-handoff

Generate or review a Claude Design brief and convert its output into a deterministic SwiftUI implementation handoff with native iOS layout, tokens, states, transitions, and accessibility rules. Use for Claude Design mobile prototypes, three-screen iOS concepts, Design-to-Claude-Code handoffs, or when a visual prototype must be buildable without interpretation.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(3)

  • SKILL.md2.2 KB
  • references/claude-design-prompt.md1.2 KB
  • references/handoff-contract.md608 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

iOS Design Handoff

Use the frozen requirements as the source of truth. Do not let visual exploration expand product scope.

Prepare Claude Design

  1. Attach the requirements file.
  2. Choose Mobile app design.
  3. Attach Interactive prototype, Wireframe, and this skill.
  4. Select the live-demo iOS design system.
  5. Use the prompt in references/claude-design-prompt.md.

Enforce native iOS rules

  • Design for a 393 × 852 pt viewport and safe areas.
  • Use SF Pro, Dynamic Type semantics, an 8 pt spacing grid, and 44 × 44 pt minimum targets.
  • Prefer NavigationStack, Button, ProgressView, LazyVGrid, sheets, and standard haptics.
  • Avoid web navigation, tiny controls, hover-only states, ornamental cards, remote assets, and effects requiring third-party libraries.
  • Keep motion reproducible with withAnimation, symbol effects, or standard transitions.
  • Never convey correctness, error, or urgency by color alone.

Extract the handoff

Write deliverables/design-handoff.md with:

  1. screen inventory and navigation graph;
  2. component tree per screen;
  3. every visible string;
  4. layout measurements and safe-area behavior;
  5. semantic color, type, radius, spacing, and motion tokens;
  6. normal, pressed, correct, incorrect, timeout, best-score, and reduced-motion states;
  7. SwiftUI mapping for each component;
  8. asset list with a local/system substitute;
  9. implementation acceptance checks.

Use the contract in references/handoff-contract.md. Resolve missing values before coding; do not write “match the mockup.”

Handoff gate

Pass only when each design element maps to a SwiftUI primitive or a small local custom view, and all interactions map to explicit state transitions.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.

中文简介正在准备中。当前显示原文说明。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル(app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize)から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"

中文简介正在准备中。当前显示原文说明。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"

中文简介正在准备中。当前显示原文说明。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。 video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。 Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。 Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"

中文简介正在准备中。当前显示原文说明。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

アプリのトーン&マナー(トンマナ)を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」(矛盾ペア)を核に、AIっぽくない独自のブランドアイデンティティを生成する。

中文简介正在准备中。当前显示原文说明。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント(Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate)が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書(Markdown)。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"

中文简介正在准备中。当前显示原文说明。

sean-sunagaku/claude-code-plugin382026年7月30日 更新

查看 sean-sunagaku 的全部技能

报告此技能的问题