frontend-design
打造具辨識度的前端介面
制式化介面可能讓有用的產品顯得未完成或令人難以記住。此技能會引導 Claude、Codex 和 Claude Code 產出具有清晰視覺方向且精緻的前端成果。
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/frontend-design.md and its manifest at https://skillstore.io/api/skills/frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「frontend-design」。 Build a signup page for an independent music analytics tool.
預期結果:
一個可運作的註冊頁面，具備以音樂為核心的視覺方向、獨特字體排印、響應式版面、動畫化的行動呼籲狀態，以及精緻的表單樣式。
正在使用「frontend-design」。 Redesign a project management dashboard for studio teams.
預期結果:
- 為每日反覆使用而設計的密集但易讀的儀表板版面。
- 一致的調色盤、字體排印系統與動效方法。
- 清晰的任務、時間軸與狀態區域，並具備可用的互動狀態。
正在使用「frontend-design」。 Create a hero section for a boutique hotel website.
預期結果:
一個首屏體驗，能立即傳達飯店識別，使用強烈影像，並在常見視窗尺寸中保持下一個區段可見。
安全審計
安全The only static alert is a false positive caused by ordinary interface-writing guidance on SKILL.md line 47. The skill contains design instructions only, with no malicious intent or executable behavior.
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/frontend-design/audits/12?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/frontend-design?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/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 引用
anthropics. (2026). frontend-design security audit report (audit version 12) [Author version unspecified]. Skillstore. https://skillstore.io/skills/frontend-design/audits/12BibTeX 引用
@techreport{anthropics-frontend-design-2026,
author = {anthropics},
title = {frontend-design security audit report (audit version 12)},
institution = {Skillstore},
year = {2026},
number = {12},
url = {https://skillstore.io/skills/frontend-design/audits/12},
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 12)"
version: "unspecified"
type: report
authors:
- name: "anthropics"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/frontend-design/audits/12"
identifiers:
- type: other
value: "skillstore:frontend-design:audit:12"
description: "Skillstore immutable audit report identifier"
比較變體
18 個可安裝變體每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。
為何此變體排名第一
atman36-frontend-design
2026-10-25
adamaugustinsky-frontend-design
2026-10-21
cesaraugustusgrob-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-10-22
Skillstore 評分
評分依據 證據置信度: 高你可以打造什麼
建立產品儀表板
透過刻意設計的版面、字體、色彩與互動選擇，打造令人印象深刻的儀表板。
製作行銷頁面原型
將活動概念轉化為精緻頁面，避免通用範本式樣。
改善應用程式畫面
重塑現有畫面，讓介面感覺一致、精緻且符合情境。
試試這些提示
Use the frontend-design skill to build a landing page for [product]. Audience: [audience]. Tech stack: [stack]. Make it polished and distinctive.
Use the frontend-design skill to create a [component] for [context]. Include responsive states, hover behavior, and a clear aesthetic direction.
Use the frontend-design skill to redesign this screen: [screen description]. Preserve the workflow, improve visual hierarchy, and avoid generic AI styling.
Use the frontend-design skill to build a cohesive interface for [product]. Define the visual direction, key states, layout system, motion, and implementation details.
最佳實務
- 在要求實作前，提供受眾、產品目標、品牌情境與技術堆疊。
- 在同一個請求中要求響應式行為、互動狀態與無障礙考量。
- 在瀏覽器中檢視生成的介面，並根據實際截圖要求細部調整。
避免
- 不要在未說明產品、受眾或使用案例的情況下，只要求一個漂亮頁面。
- 當情境需要更強識別度時，不要接受通用漸層、置中卡片或常見字體選擇。
- 不要跳過在桌面與行動裝置視窗中測試版面、文字換行與互動狀態。
常見問題
這項技能能協助建立什麼？
它會生成可運作的程式碼嗎？
它可以搭配 React 或 Vue 使用嗎？
它能取代設計系統嗎？
這只適用於 landing pages 嗎？
什麼輸入能改善結果？
開發者詳細資訊
作者
anthropics授權
Complete terms in LICENSE.txt
Skillstore 修訂
r2
版本提示
作者未聲明版本。
儲存庫
https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design引用
adcb3549b15782055d0beb6d29f113d20de08f92
維護新鮮度
2026/7/28
使用量
454 次下載 · 419 次瀏覽
檔案結構
📄 SKILL.md