📦
constitutional-writer
83從文件草擬專案憲章
團隊經常將使命、價值觀和治理規則隱藏在分散的文件中。此技能會擷取這些元素，並將它們轉換成清晰的專案憲章。
文件 查看
技能 frontend-design
📦
frontend-design
內容修訂 r1 安全
設計獨特的前端介面
通用的網頁介面容易讓人覺得彼此雷同，也可能忽略使用者的品牌或產品情境。此技能會引導 Claude、Codex 和 Claude Code 設計具備明確視覺方向、精緻且實用的前端介面。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/azeem-2-frontend-design.md and its manifest at https://skillstore.io/api/skills/azeem-2-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「frontend-design」。 為 AI 寫作工具建立產品發布頁面。
預期結果:
一個響應式頁面概念，包含獨特字體、清晰區塊、互動式行動呼籲，以及實作註記。
正在使用「frontend-design」。 為 B2B 應用程式重新設計普通設定頁面的樣式。
預期結果:
- 一個精緻的設定介面，包含分組控制項與清晰的瀏覽路徑。
- 一套克制的視覺系統，支援重複的日常使用。
- 切換開關、破壞性操作與已儲存變更的互動狀態。
正在使用「frontend-design」。 為留存資料建立 SaaS 分析儀表板。
預期結果:
一個資訊密集且易讀的儀表板，包含圖表、篩選器、空狀態、響應式行為，以及一致的設計語言。
安全審計
安全v8 • 2026/7/6 開啟版本化報告
The three static findings are false positives caused by design-language phrases in SKILL.md. The skill contains only frontend design guidance and no evidence of system reconnaissance, data exfiltration, code execution, or prompt injection. No remediation is required.
2
已掃描檔案
221
分析行數
0
複核項目
0
已忽略的誤報
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/azeem-2-frontend-design/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/azeem-2-frontend-design?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/azeem-2-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/azeem-2-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/azeem-2-frontend-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 引用
Azeem-2. (2026). frontend-design security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/azeem-2-frontend-design/audits/8BibTeX 引用
@techreport{azeem-2-azeem-2-frontend-design-2026,
author = {Azeem-2},
title = {frontend-design security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/azeem-2-frontend-design/audits/8},
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: "frontend-design security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Azeem-2"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/azeem-2-frontend-design/audits/8"
identifiers:
- type: other
value: "skillstore:azeem-2-frontend-design:audit:8"
description: "Skillstore immutable audit report identifier"
比較變體
18 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
Skillstore 評分最高
作者 / 來源 Skillstore 評分 證據置信度 Skillstore 使用量 已更新
atman36-frontend-design
Skillstore 評分 81
證據置信度 高
Skillstore 使用量 49
已更新
2026-10-25
adamaugustinsky-frontend-design
Skillstore 評分 79
證據置信度 高
Skillstore 使用量 25
已更新
2026-10-21
cesaraugustusgrob-frontend-design
Skillstore 評分 79
證據置信度 高
Skillstore 使用量 20
已更新
2026-09-09
agentworkforce-frontend-design
Skillstore 評分 78
證據置信度 高
Skillstore 使用量 24
已更新
2026-10-22
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
70
社群
91
規範符合度
你可以打造什麼
設計登陸頁面
建立令人印象深刻的發布頁面，具備清晰的層級、強烈的視覺識別，以及可運作的前端結構。
改善產品儀表板
將普通的營運畫面轉化為更精緻的介面，提升資訊密度、節奏與視覺優先順序。
建立互動式原型
產生具備細緻樣式、動效與響應式版面選擇的前端原型。
試試這些提示
建立頁面
為 [product] 建立精緻的登陸頁面。使用 [framework]。選擇一個獨特的視覺方向，並說明主要設計選擇。
設計現有元件的樣式
為 [audience] 重新設計這個 [component]。保持行為不變。改善字體排印、色彩、間距與動效。
建立儀表板流程
為 [workflow] 建立可用於生產環境的儀表板。包含響應式版面、清晰層級、實用狀態，以及一致的主題。
設計完整前端系統
開發多畫面的 [app type] 介面。在撰寫程式碼前，先定義美學方向、元件模式、互動狀態與實作計畫。
最佳實務
- 提供產品目標、受眾、偏好的技術堆疊，以及既有設計限制。
- 要求響應式狀態、無障礙考量，以及真實的互動行為。
- 在投入生產使用前，根據品牌需求審查產生的設計。
避免
- 在沒有情境或受眾資訊的情況下，要求通用的現代設計。
- 接受會降低可讀性或效能的裝飾效果。
- 將此技能作為無障礙測試或使用者研究的替代品。
常見問題
此技能可以協助建立什麼？
它有助於建立精緻的前端頁面、元件、儀表板、原型與介面樣式。
哪些工具可以使用此技能？
它標示可供 Claude、Codex 和 Claude Code 使用。
它會產生可運作的前端程式碼嗎？
是。當使用者要求實作時，此技能會要求產生功能完整的前端程式碼。
它包含腳本或依賴項嗎？
不會。此套件只包含書面設計指引與授權檔案。
它適合用於生產設計工作嗎？
它可以支援生產工作，但團隊仍應審查無障礙、效能與品牌契合度。
使用者應提供哪些情境資訊？
使用者應提供產品目的、受眾、技術堆疊、品牌限制與目標畫面。
開發者詳細資訊
作者
Azeem-2授權
Complete terms in LICENSE.txt
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
維護新鮮度
2026/7/18
使用量
12 次下載 · 228 次瀏覽
檔案結構
📄 SKILL.md
Azeem-2 的更多技能
查看全部📦
自動化 PDF 處理
PDF 工作流程通常需要跨多個工具進行擷取、表單填寫與檔案轉換。此技能為 Claude、Codex 和 Claude Code 提供常見 PDF 任務的結構化步驟與腳本。
辦公與報告 查看
📦
slack-gif-creator
79建立 Slack 適用的動畫 GIF
團隊需要在 Slack 中看起來效果良好的小型動畫 GIF。此技能會引導 emoji 和訊息 GIF 的生成、驗證與最佳化。
設計與創意 查看
📦
internal-comms
78草擬公司內部更新
團隊常因需要將零散更新整理成清楚的內部訊息而耗費時間。此技能可引導 Claude、Codex 和 Claude Code 草擬精簡的電子報、3P 更新、FAQ 與一般溝通內容。
溝通 查看
📦
doc-coauthoring
78共同撰寫高品質文件
當脈絡、結構與讀者假設不明確時，撰寫複雜文件會很困難。此技能會引導脈絡擷取、章節草擬、反覆編修與讀者測試。
文件 查看
📦
algorithmic-art
78創作互動式演算法藝術
生成藝術專案需要清晰的概念、可重現的種子，以及實用的控制項。此技能會將主題轉化為一件 p5.js 藝術作品，並提供互動式 HTML 檢視器。
設計與創意 查看
相關技能
查看全部📦
ui-design
80設計具辨識度的 UI 原型
由 tencentcloudbase
一般化的 AI 介面通常缺乏視覺方向與符合平台脈絡的細節。此技能會引導 Claude、Codex 和 Claude Code 在建置原型前先定義設計意圖。
設計與創意 查看
📦
ui-styling
83Build Accessible Tailwind Interfaces
由 nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
設計與創意 查看
📦
shape
81建置前先規劃 UX
由 pbakaus
團隊常在釐清使用者目標、狀態與限制之前就開始建置介面。此技能會引導探索流程，並產出可供實作使用的設計簡報。
設計與創意 查看
📦
uizze-ui
80Build and Refine Interfaces with Uizze
由 uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
設計與創意 查看
📦
vercel-react-view-transitions
82實作 React View Transitions
由 vercel-labs
React view transitions 很容易放錯位置，導致動畫靜默無效或過於吵雜。這項技能會引導你針對路由、Suspense、清單與共享元素的動畫做出選擇。
程式開發 查看
📦
react-email
82使用 Resend 建置 React Email 範本
由 resend
建立可用於正式環境的電子郵件範本很困難，因為電子郵件用戶端各不相同。此技能會引導 Claude、Codex 和 Claude Code 完成 React Email 元件、寄送、樣式、本地化與編輯器工作流程。
程式開發 查看