技能 designing-frontend
📦
designing-frontend
內容修訂 r1 安全
設計獨特的前端介面
通用介面可能讓產品感覺彼此雷同。此技能會引導 Claude、Codex 和 Claude Code 朝向明確的視覺方向、精緻的程式碼與驗證流程。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "designing-frontend" from https://skillstore.io/skills/byunk-designing-frontend.md and its manifest at https://skillstore.io/api/skills/byunk-designing-frontend/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「designing-frontend」。 要求建立獨特的分析儀表板。
預期結果:
聚焦的儀表板概念，包含領域專屬排版、結構化密度、克制的動態效果，以及響應式生產介面指引。
正在使用「designing-frontend」。 感覺通用的普通註冊頁面。
預期結果:
重新設計的註冊流程，具備更強的視覺層級、有目的的色彩、精緻的 hover 狀態，以及無障礙檢查。
正在使用「designing-frontend」。 創意工具的新產品頁面。
預期結果:
大膽的頁面方向，包含具表現力的字體、情境化視覺效果、互動細節與實作優先事項。
安全審計
安全v9 • 2026/7/23 開啟版本化報告
All four static alerts are false positives caused by ordinary visual design language in SKILL.md. No system reconnaissance, prompt injection, or other malicious intent was found.
1
已掃描檔案
61
分析行數
0
複核項目
0
已忽略的誤報
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/byunk-designing-frontend/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/byunk-designing-frontend.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 引用
Byunk. (2026). designing-frontend security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/byunk-designing-frontend/audits/9BibTeX 引用
@techreport{byunk-byunk-designing-frontend-2026,
author = {Byunk},
title = {designing-frontend security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/byunk-designing-frontend/audits/9},
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: "designing-frontend security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "Byunk"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/byunk-designing-frontend/audits/9"
identifiers:
- type: other
value: "skillstore:byunk-designing-frontend:audit:9"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
70
社群
91
規範符合度
你可以打造什麼
建立產品儀表板
建立符合產品領域且避免通用 SaaS 風格的精緻儀表板。
翻新行銷頁面
將平淡的頁面轉化為令人印象深刻的網頁體驗，具備更強的層級、動態效果與視覺質感。
原型設計新的應用程式畫面
在轉換為生產級前端程式碼之前，探索特定的美學方向。
試試這些提示
建立著陸頁區塊
使用 designing-frontend skill 為金融應用程式建立著陸頁區塊。讓它具備獨特性、無障礙性，並達到生產就緒。
改善現有元件
使用 designing-frontend skill 重新設計此元件。保留資料模型，改善層級、動態效果、色彩與響應式行為。
設計完整介面
使用 designing-frontend skill 建立完整的 onboarding 介面。定義美學方向、實作畫面，並驗證無障礙性。
建立領域專屬系統
使用 designing-frontend skill 為醫療分析工具建立視覺系統。包含版面規則、元件、狀態與驗證備註。
最佳實務
- 在要求實作之前，提供產品領域、受眾、框架與無障礙需求。
- 在首次建置後，要求驗證層級、響應式表現、互動與無障礙性。
- 當品牌或使用者期望已知時，要求特定的美學方向。
避免
- 不要在缺乏領域情境的情況下要求通用的現代設計。
- 加入動畫、對比或高密度版面時，不要略過無障礙檢查。
- 不要在彼此無關的專案中重複使用相同的字型、漸層與版面模式。
常見問題
此技能會撰寫前端程式碼嗎？
是。它會引導模型撰寫生產級 HTML、CSS、JavaScript、React、Vue 或類似的前端程式碼。
它包含現成的設計素材嗎？
不會。它提供設計與實作指引，但不內建字型、圖片或範本。
它能協助無障礙設計嗎？
可以。此工作流程在驗證期間包含無障礙驗證，尤其針對互動、對比與層級。
它只適用於著陸頁嗎？
不是。它適用於元件、頁面、應用程式畫面與完整前端體驗。
哪些工具支援此技能？
報告列出支援 Claude、Codex 和 Claude Code。
使用者應提供哪些情境？
提供受眾、目的、框架、品牌限制、無障礙需求，以及應避免的風格範例。