aiskillstore/frontend-design
skills/dennisliuck/frontend-design/SKILL.md
創建具有高設計質量的獨特、生產級別的前端界面。當用戶要求構建網頁組件、頁面或應用程式時使用此技能。生成有創意、精緻的代碼，避免通用的 AI 美學。
$ install --global
skillsauthnpx skillsauth add aiskillstore/marketplace frontend-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 1, 2026, 9:53 AM56.6s2 files scanned
SKILL.md
- name:
- frontend-design
- description:
- 創建具有高設計質量的獨特、生產級別的前端界面。當用戶要求構建網頁組件、頁面或應用程式時使用此技能。生成有創意、精緻的代碼，避免通用的 AI 美學。
- license:
- LICENSE.txt 中的完整條款
此技能指導創建獨特的、生產級別的前端界面，避免通用的"AI 垃圾"美學。實現真正可工作的代碼，對美學細節和創意選擇有卓越的關注。
用戶提供前端需求：要構建的組件、頁面、應用程式或界面。他們可能包括關於目的、受眾或技術約束的上下文。
設計思維
在編碼之前，理解上下文並承諾一個大膽的美學方向：
- 目的：此界面解決什麼問題？誰使用它？
- 基調：選擇一個極端：極簡主義、極繁主義混亂、復古未來主義、有機/自然、奢華/精緻、俏皮/玩具般、編輯/雜誌、野獸派/粗獷、裝飾藝術/幾何、柔和/粉彩、工業/實用等。有這麼多風格可供選擇。使用這些作為靈感，但設計一個忠於美學方向的。
- 約束：技術要求（框架、性能、可訪問性）。
- 差異化：什麼讓這個難以忘懷？人們會記住的一件事是什麼？
關鍵：選擇一個清晰的概念方向並精確執行它。大膽的極繁主義和精緻的極簡主義都有效 - 關鍵是意圖性，而不是強度。
然後實現可工作的代碼（HTML/CSS/JS、React、Vue 等），該代碼：
- 生產級別且功能性
- 視覺上引人注目且令人難忘
- 具有清晰美學觀點的一致性
- 在每個細節上都經過精心完善
前端美學指南
關注：
- 排版：選擇美麗、獨特且有趣的字體。避免像 Arial 和 Inter 這樣的通用字體；相反，選擇提升前端美學的獨特選擇；出乎意料、有個性的字體選擇。將獨特的展示字體與精緻的正文字體配對。
- 顏色和主題：承諾一個連貫的美學。使用 CSS 變量保持一致性。具有鮮明強調色的主導色優於膽怯、均勻分布的調色板。
- 動作：使用動畫來產生效果和微交互。對於 HTML，優先考慮純 CSS 解決方案。對於 React，可用時使用 Motion 庫。專注於高影響力時刻：一個精心編排的頁面加載與交錯顯示（animation-delay）比分散的微交互創造更多樂趣。使用滾動觸發和令人驚訝的懸停狀態。
- 空間構圖：意外的佈局。不對稱。重疊。對角流動。打破網格的元素。慷慨的負空間或受控的密度。
- 背景和視覺細節：創造氛圍和深度，而不是默認使用純色。添加與整體美學相匹配的上下文效果和紋理。應用創意形式，如漸變網格、噪聲紋理、幾何圖案、分層透明度、戲劇性陰影、裝飾性邊框、自定義光標和顆粒覆蓋。
永遠不要使用通用的 AI 生成美學，如過度使用的字體系列（Inter、Roboto、Arial、系統字體）、陳詞濫調的配色方案（特別是白色背景上的紫色漸變）、可預測的佈局和組件模式，以及缺乏特定上下文特徵的千篇一律的設計。
創造性地解釋並做出對上下文真正設計的意外選擇。沒有設計應該是相同的。在淺色和深色主題、不同字體、不同美學之間變化。永遠不要在生成中收斂到常見選擇（例如 Space Grotesk）。
重要：將實現複雜性與美學願景相匹配。極繁主義設計需要具有大量動畫和效果的精心代碼。極簡主義或精緻設計需要克制、精確，並仔細關注間距、排版和微妙細節。優雅來自於很好地執行願景。
請記住：Claude 能夠進行非凡的創意工作。不要退縮，展示在跳出框框思考並完全致力於獨特願景時真正可以創造的東西。
Related Skills
aiskillstore/hig-components-content
development
VerifiedTrustedCommunity
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/helpdesk-automation
tools
VerifiedTrustedCommunity
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/haskell-pro
testing
VerifiedTrustedCommunity
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
244SKILL.mdUpdated Apr 10, 2026
aiskillstore/graphql
tools
VerifiedTrustedCommunity
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.
244SKILL.mdUpdated Apr 10, 2026