📦
nextjs-optimization
80最佳化 Next.js 效能
Next.js 應用程式可能因大型 bundle、薄弱的快取，以及未最佳化的媒體而變慢。此技能會引導 Claude、Codex 和 Claude Code，針對正式環境應用程式進行聚焦的效能改善。
程式開發 查看
技能 frontend-design
📦
frontend-design
v1.0.0 內容修訂 r2 安全 ⚙️ 外部命令
設計獨特的前端介面
通用生成介面通常看起來可預測且薄弱。這項技能會引導 Claude、Codex 和 Claude Code 產出獨特且生產環境就緒的前端設計。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/atman36-frontend-design.md and its manifest at https://skillstore.io/api/skills/atman36-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「frontend-design」。 Design a landing page for a scheduling app.
預期結果:
具有強烈字體層級、聚焦色彩系統、細膩動態效果、響應式區塊與無障礙檢查的獨特編輯式版面。
正在使用「frontend-design」。 Improve a dashboard card that feels generic.
預期結果:
更精緻的元件方向，具備更清楚的間距、更強的資料重點、有目的的 hover 狀態，以及符合產品的視覺風格。
正在使用「frontend-design」。 Create a memorable hero section for a portfolio.
預期結果:
大膽的視覺概念，結合自訂字體排印、分層構圖、氛圍背景細節、響應式尺寸與生產環境精緻度。
安全審計
安全v9 • 2026/7/23 開啟版本化報告
All 25 static alerts are false positives caused by Markdown code fences, inline code formatting, and ordinary design terminology. The file contains frontend guidance and examples, with no shell execution, system reconnaissance, prompt injection, or other malicious intent. No security remediation is required.
1
已掃描檔案
382
分析行數
0
複核項目
0
已忽略的誤報
風險因素
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/atman36-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/atman36-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/atman36-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 引用
AI-Vibe-Prompts. (2026). frontend-design security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/atman36-frontend-design/audits/9BibTeX 引用
@techreport{ai-vibe-prompts-atman36-frontend-design-2026,
author = {AI-Vibe-Prompts},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/atman36-frontend-design/audits/9},
note = {Author version 1.0.0}
}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 9)"
version: "1.0.0"
type: report
authors:
- name: "AI-Vibe-Prompts"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/atman36-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:atman36-frontend-design:audit:9"
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
架構
100
可維護性
87
內容
72
社群
91
規範符合度
你可以打造什麼
塑造產品登陸頁
為新產品頁建立令人印象深刻的視覺方向，強化字體排印、色彩、版面配置與動態效果。
升級樸素元件
將通用前端元件轉化為精緻介面，同時仍符合無障礙與響應式需求。
建立符合品牌的介面
引導 AI coding agent 建立與特定受眾和產品訴求一致的網頁。
試試這些提示
改善頁面
Use frontend-design to improve this page. Keep the current content, but make the visual direction clearer and more polished.
設計元件
Use frontend-design to create a distinctive component for this feature. Include responsive behavior, accessible states, and refined visual details.
建立完整視圖
Use frontend-design to build a production-ready app view. Choose a bold aesthetic direction and implement layout, motion, typography, and quality checks.
稽核並重做 UI
Use frontend-design to audit this interface, identify generic choices, then rework it into a distinctive, accessible, and performant frontend experience.
最佳實務
- 在選擇美學方向前，先定義受眾、目的與限制。
- 將字體排印、色彩、動態效果與版面配置作為一套一致的系統使用。
- 交付前驗證無障礙、響應式與效能。
避免
- 不要預設重複使用通用字體與紫色漸層組合。
- 不要加入會削弱可讀性或效能的裝飾效果。
- 當請求需要可運作的前端程式碼時，不要交付靜態 mockups。
常見問題
這項技能能協助建立可運作的前端程式碼嗎？
可以。它會引導代理進行功能性的前端實作，而不只是視覺 mockups。
它支援哪些 AI 工具？
它標示支援 Claude、Codex 和 Claude Code。
它只適用於登陸頁嗎？
不是。它可以引導頁面、元件、app 視圖、作品集工作，以及設計導向的介面。
它包含 bundled assets 嗎？
沒有。它提供設計指引與範例，但不包含資產函式庫。
它會處理無障礙嗎？
它要求具備 WCAG AA 意識與品質檢查，但最終介面仍需要測試。
為什麼安全性發現被駁回？
被標記的模式是 markdown 範例與設計術語，而不是可執行命令或系統探測。
開發者詳細資訊
授權
MIT
作者版本
v1.0.0
Skillstore 修訂
r2
引用
89edfdc710d0846129dcee6a929477b04f08052c
維護新鮮度
2026/7/25
使用量
11 次下載 · 307 次瀏覽
檔案結構
📄 SKILL.md
AI-Vibe-Prompts 的更多技能
📦
codebase-analysis
80使用結構化報告分析程式碼庫
團隊在變更陌生的儲存庫之前，需要一種快速理解它們的方法。此技能會引導 Claude、Codex 和 Claude Code 進行結構、相依性、架構、品質與安全性檢查。
程式開發 查看
📦
testing-strategy
80建立實用的測試策略
團隊經常在沒有明確範圍、工具或覆蓋率目標的情況下新增測試。此技能為 Vitest、Playwright 和 CI 測試提供實用計畫。
程式開發 查看
📦
git-workflow
80以團隊標準管理 Git 工作流程
團隊需要一致的提交、分支與審查習慣，才能讓歷史記錄保持可讀。此技能為 Claude、Codex 和 Claude Code 提供實用的 Git 工作流程檢查清單。
DevOps 與基礎設施 查看
📦
quality-gates
50發布前驗證程式碼
團隊需要在程式碼提交、推送或部署前執行可重複的檢查。此技能會引導 Claude、Codex 和 Claude Code 完成 linting、型別檢查、測試、建置、稽核和提交檢查。
DevOps 與基礎設施 查看
相關技能
查看全部📦
ui-design
80設計具辨識度的 UI 原型
由 tencentcloudbase
一般化的 AI 介面通常缺乏視覺方向與符合平台脈絡的細節。此技能會引導 Claude、Codex 和 Claude Code 在建置原型前先定義設計意圖。
設計與創意 查看
📦
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 元件、寄送、樣式、本地化與編輯器工作流程。
程式開發 查看
📦
vue-best-practices
81改善 Vue 3 TypeScript 實務
由 hyf0
Vue TypeScript 專案經常遇到令人困惑的範本、路由器與 Volar 錯誤。此技能為 Codex、Claude 和 Claude Code 提供有針對性的 Vue 3 修正方式。
程式開發 查看
📦
vue-options-api-best-practices
81改善 Vue Options API 元件
由 vuejs-ai
Vue Options API 專案可能會失去型別安全性與正確的 this 綁定。此技能提供更安全 Vue 元件的直接模式。
程式開發 查看