技能 apple-design

📦

apple-design

Name: apple-design
Author: emilkowalski

內容修訂 r1 安全 ⚙️ 外部命令

設計流暢的 Apple 風格網頁介面

手勢驅動的網頁介面常讓人感覺延遲、僵硬或視覺不一致。此技能提供有關響應式動態、材質、字體排印、無障礙功能與互動設計的實用指引。

支援: Claude Codex Code(CC)

🥉 78 銅級

Maintain this Skill? Claim it 🥉 78 銅級

此技能屬於一個技能包

安裝整套技能包，一條命令取得任務所需的所有技能。

KeywayTech Coding Skills · 19 技能安裝整個技能包

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "apple-design" from https://skillstore.io/skills/emilkowalski-apple-design.md and its manifest at https://skillstore.io/api/skills/emilkowalski-apple-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/emilkowalski-apple-design.md 已簽名 manifest GET /api/skills/emilkowalski-apple-design/manifest 已簽名 lockfile GET /api/skills/emilkowalski-apple-design/lockfile

測試它

正在使用「apple-design」。檢視一個僅在手指放開後才吸附的卡片輪播。

預期結果:

在拖曳期間加入持續的一對一追蹤。
在選擇吸附點前，根據釋放速度預測靜止位置。
將釋放速度帶入可中斷的彈簧動畫，並保留原始抓取偏移量。

正在使用「apple-design」。為可關閉的設定面板建議動態效果。

預期結果:

使用具有限制彈跳的響應式彈簧、對稱的進入與退出路徑、感知來源的起點、拖曳中斷，以及 reduced-motion 的交叉淡化。

正在使用「apple-design」。稽核具有低對比文字的半透明工具列。

預期結果:

提高前景對比、避免堆疊半透明圖層、加強材質區隔，並為 reduced-transparency 與 increased contrast 提供實色替代方案。

安全審計

安全

v2 • 2026/7/21 開啟版本化報告

All 62 static findings are false positives caused by Markdown code delimiters and ordinary design terminology. The single skill file contains educational web-design guidance and examples, with no executable commands, reconnaissance, data collection, or prompt-injection attempt found.

已掃描檔案

283

分析行數

複核項目

已忽略的誤報

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: claude 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/emilkowalski-apple-design/audits/2?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/emilkowalski-apple-design/security.svg)](https://skillstore.io/skills/emilkowalski-apple-design?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/emilkowalski-apple-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-apple-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/emilkowalski-apple-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

學術引用 (APA · BibTeX · CFF)

APA 引用

emilkowalski. (2026). apple-design security audit report (audit version 2) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-apple-design/audits/2

BibTeX 引用

@techreport{emilkowalski-emilkowalski-apple-design-2026,
  author = {emilkowalski},
  title = {apple-design security audit report (audit version 2)},
  institution = {Skillstore},
  year = {2026},
  number = {2},
  url = {https://skillstore.io/skills/emilkowalski-apple-design/audits/2},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "apple-design security audit report (audit version 2)"
version: "unspecified"
type: report
authors:
  - name: "emilkowalski"
date-released: "2026-07-21"
url: "https://skillstore.io/skills/emilkowalski-apple-design/audits/2"
identifiers:
  - type: other
    value: "skillstore:emilkowalski-apple-design:audit:2"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 高

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

改善產品互動

檢視按鈕、面板、抽屜與手勢，以確保即時回饋、可中斷性、動量與可預測的空間行為。

實作流暢的網頁動態

將互動規格轉換為指標事件、彈簧動畫、速度交接、橡皮筋效果及可存取的動態替代方案。

稽核介面品質

在產品發行前評估動態、材質、字體排印、層級、無障礙功能與互動一致性。

試試這些提示

檢視基本回饋

檢視此按鈕互動的即時回饋與無障礙功能。找出延遲、不明確狀態及具體改善建議。

設計底部面板

設計一個行動版底部面板，具備直接拖曳、感知速度的釋放、吸附點、中斷、橡皮筋效果及 reduced-motion 行為。

稽核互動流程

使用 Apple 風格原則稽核此介面流程。涵蓋回饋、空間一致性、手勢衝突、材質、字體排印、無障礙功能與使用者主導權。

定義動態系統

為這些元件建立網頁動態系統。定義彈簧家族、速度規則、中斷行為、手勢閾值、無障礙替代方案與驗證測試。

最佳實務

使用真實的指標移動、反向操作、中斷與快速重複輸入來測試互動。
從目前可見狀態調整動態，並在手勢與動畫交接時保留速度。
以 reduced-motion、透明度、對比與文字大小設定驗證每一項動態與材質選擇。

避免

不要在動畫完成前鎖定輸入，或從過時的目標值重新啟動動態。
不要在沒有明確互動目的的情況下加入彈跳、模糊、音效或觸覺回饋。
不要將視覺潤飾視為可預測導覽、可讀文字與使用者控制權的替代品。

常見問題

此技能會產生完整的介面程式碼嗎？

此技能提供設計指引與聚焦範例。完整的生產用元件仍需要實作、整合、測試與針對產品的決策。

哪些互動最能受益於這些指引？

拖曳、滑動、面板、抽屜、輪播、選單、互動視窗、滑桿及其他手勢驅動互動最能受益。

每個動畫都需要使用彈簧嗎？

不需要。彈簧適合可中斷的實體互動，而短暫淡化或簡單轉場可適用於非手勢的狀態變更。

此技能如何處理無障礙功能？

涵蓋減少動態、減少透明度、提高對比、可縮放字體排印、持續回饋，以及前庭動態的替代方案。

我可以在 Apple 平台以外使用這些原則嗎？

可以。這些指引會將互動與動態原則轉用至網頁介面，同時尊重瀏覽器與裝置限制。

範例彈簧數值具有通用性嗎？

不可以。它們只是起點，仍需要依元件尺寸、移動距離、輸入速度、函式庫行為與產品調性進行調整。

開發者詳細資訊

作者

emilkowalski

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/emilkowalski/skills/tree/main/skills/apple-design/

引用

d1c4c60b80afc545d96b5e8a51c19b2fdc81df70

維護新鮮度

2026/7/20

使用量

2 次下載 · 1 次瀏覽

檔案結構

📄 SKILL.md

apple-design

使用我的智慧代理安裝

Agent 可讀資源

測試它

安全審計

風險因素

複製報告連結

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 評分

你可以打造什麼

改善產品互動

實作流暢的網頁動態

稽核介面品質

試試這些提示

最佳實務

避免

常見問題

開發者詳細資訊