技能 frontend-design

📦

frontend-design

內容修訂 r1 安全

打造獨具特色的前端介面

許多 AI 生成的介面感覺制式，缺乏清晰的視覺觀點。這項技能會引導 Claude、Codex 和 Claude Code 以有意識的美學打造精緻的前端作品。

支援: Claude Codex Code(CC)

Maintain this Skill? Claim it 📊 76 尚可

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/dennisliuck-frontend-design.md and its manifest at https://skillstore.io/api/skills/dennisliuck-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/dennisliuck-frontend-design.md 已簽名 manifest GET /api/skills/dennisliuck-frontend-design/manifest 已簽名 lockfile GET /api/skills/dennisliuck-frontend-design/lockfile

測試它

正在使用「frontend-design」。為精品咖啡訂閱服務建立首頁。

預期結果:

一個精緻的首頁概念，包含具表現力的字體排印、溫暖的產品攝影擺放、清楚的訂閱步驟，以及響應式前端實作說明。

正在使用「frontend-design」。重新設計一個看起來太制式的指標儀表板。

預期結果:

更具特色的儀表板方向，具備更強的資訊層級、克制的色彩重點、自訂卡片處理方式，以及關鍵指標的互動細節。

正在使用「frontend-design」。為動態設計師建立作品集頁面。

預期結果:

一個視覺上令人印象深刻的作品集概念，包含大膽構圖、動畫時刻、以專案為焦點的區段，以及精緻實作指引。

安全審計

安全

v9 • 2026/7/6 開啟版本化報告

The single static finding is a false positive. SKILL.md is plain UTF-8 Traditional Chinese guidance, and the high entropy heuristic appears caused by non-ASCII prose rather than binary, encrypted, or hidden content.

1

已掃描檔案

43

分析行數

0

複核項目

0

已忽略的誤報

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex 檢視審計紀錄 →

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

安全評估

複製報告連結

https://skillstore.io/skills/dennisliuck-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/dennisliuck-frontend-design/security.svg)](https://skillstore.io/skills/dennisliuck-frontend-design?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/dennisliuck-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/dennisliuck-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/dennisliuck-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 引用

DennisLiuCk. (2026). frontend-design security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/dennisliuck-frontend-design/audits/9

BibTeX 引用

@techreport{dennisliuck-dennisliuck-frontend-design-2026,
  author = {DennisLiuCk},
  title = {frontend-design security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/dennisliuck-frontend-design/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: "frontend-design security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "DennisLiuCk"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/dennisliuck-frontend-design/audits/9"
identifiers:
  - type: other
    value: "skillstore:dennisliuck-frontend-design:audit:9"
    description: "Skillstore immutable audit report identifier"

比較變體

18 個可安裝變體

每位作者的技能都保留為獨立的可安裝項目。推薦變體依 Skillstore 證據排序。

為何此變體排名第一

Skillstore 評分最高

作者 / 來源 Skillstore 評分證據置信度 Skillstore 使用量已更新

AI-Vibe-Prompts 推薦

atman36-frontend-design

Skillstore 評分 81

證據置信度高

Skillstore 使用量 49

已更新

2026-10-25

frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 478

已更新

2026-09-09

zhanlincui-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 376

已更新

2026-09-09

yyh211-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 214

已更新

2026-09-09

1bertogit-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 198

已更新

2026-10-13

92bilal26-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 31

已更新

2026-10-19

am-will-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 26

已更新

2026-10-23

AdamAugustinsky

adamaugustinsky-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 25

已更新

2026-10-21

azeem-2-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 24

已更新

2026-09-09

CesarAugustusGroB

cesaraugustusgrob-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 20

已更新

2026-09-09

davila7-frontend-design

Skillstore 評分 79

證據置信度高

Skillstore 使用量 15

已更新

2026-09-09

anthropics-frontend-design

Skillstore 評分 78

證據置信度高

Skillstore 使用量 137

已更新

2026-10-24

pbakaus-frontend-design

Skillstore 評分 78

證據置信度高

Skillstore 使用量 93

已更新

2026-09-09

7spade-frontend-design

Skillstore 評分 78

證據置信度高

Skillstore 使用量 52

已更新

2026-10-18

sickn33-frontend-design

Skillstore 評分 78

證據置信度高

Skillstore 使用量 31

已更新

2026-09-09

agentworkforce-frontend-design

Skillstore 評分 78

證據置信度高

Skillstore 使用量 24

已更新

2026-10-22

ajv009-frontend-design

Skillstore 評分 78

證據置信度高

Skillstore 使用量 18

已更新

2026-10-22

DennisLiuCk 目前

dennisliuck-frontend-design

Skillstore 評分 76

證據置信度高

Skillstore 使用量 11

已更新

2026-09-09

Skillstore 評分

評分依據證據置信度: 高

55

架構

75

可維護性

87

內容

70

社群

83

規範符合度

你可以打造什麼

建立產品頁面

設計並實作令人印象深刻的產品頁面，具備清晰的視覺概念和可運作的前端程式碼。

更新應用程式畫面

將平淡的儀表板或工作流程畫面轉化為精緻介面，具備更強的版面配置和互動細節。

製作創意網站原型

為實驗性網站或作品集概念探索大膽的字體排印、色彩、動態效果和構圖。

試試這些提示

建立簡單頁面

使用 frontend-design 技能為小型設計工作室建立一個落地頁。包含視覺方向、版面配置、色彩和可運作的前端實作。

改善現有畫面

使用 frontend-design 技能重新設計這個儀表板畫面。保留相同功能，但讓版面更清晰、更具特色，並達到正式環境品質。

符合特定受眾

使用 frontend-design 技能為建築師建立一個行動優先的活動頁面。選擇精準的美學方向，並說明每個設計選擇如何服務該受眾。

建立完整互動概念

使用 frontend-design 技能設計並實作多步驟的新手導覽流程。包含動態效果、響應式行為、視覺狀態和精緻的微互動。

最佳實務

在要求撰寫程式碼前，先提供代理產品目標、目標受眾和技術堆疊。
要求一個清晰的美學方向，並要求實作一致地符合該方向。
在正式環境使用前，檢查生成作品的無障礙、響應式和可維護性。

避免

不要在沒有脈絡、受眾或限制的情況下，要求一個含糊的漂亮頁面。
不要接受會讓內容更難閱讀或使用的裝飾效果。
不要在未測試真實狀態和資料的情況下，將生成介面視為可用於正式環境。

常見問題

這項技能能幫助建立什麼？

它有助於建立具備更強視覺方向和可運作實作的前端元件、頁面和應用程式介面。

它可以搭配 React 或 Vue 使用嗎？

可以。來源指引提到 HTML、CSS、JavaScript、React、Vue 和類似的前端方法。

它會提供完成的正式環境程式碼嗎？

它會引導代理產出正式環境品質的程式碼，但團隊仍應測試無障礙、響應式和邊界案例。

它只適用於落地頁嗎？

不是。它可以引導元件、頁面、應用程式畫面和更廣泛的介面概念。

我該如何獲得最佳結果？

提供受眾、目標、品牌限制、技術堆疊，以及任何現有 UI 問題。

這項技能包含外部 scripts 嗎？

沒有。經審查的技能只包含一個 SKILL.md 指令檔，未偵測到 scripts 或網路行為。

開發者詳細資訊

作者

授權

LICENSE.txt 中的完整條款

Skillstore 修訂

r1

版本提示

作者未聲明版本。

儲存庫

https://github.com/DennisLiuCk/claude-plugin-marketplace/tree/main/plugins/frontend-design/skills/frontend-design

引用

72d5025b022c77f7a51bdf5c1637c689c80e89d1

維護新鮮度

2026/7/18

使用量

4 次下載 · 186 次瀏覽

檔案結構

DennisLiuCk 的更多技能

issue-review

透過根本原因審查分析軟體問題

軟體問題回報通常缺少足夠證據，難以明確修復。此技能會引導 Claude、Codex 或 Claude Code 進行分階段的根本原因分析。

程式開發查看

code-reviewer

審查程式碼和 Pull Request

程式碼審查可能會遺漏安全性、品質、測試和效能問題。此技能會引導 Claude、Codex 和 Claude Code 進行結構化審查，並提供可採取行動的發現。

程式開發查看

sql-to-osc

將 SQL 遷移轉換為 OSC 格式

資料庫團隊經常需要將 Flyway 遷移改寫為 Online Schema Change 工作流程。此技能會將 ALTER TABLE 和 CREATE INDEX 陳述式轉換為以 tab 分隔的 OSC 行。

程式開發查看

claude-opus-4-5-migration

將專案遷移至 Claude Opus 4.5

從較舊的 Claude 模型遷移可能會導致模型名稱、beta header 和提示行為出現問題。此技能為 Claude、Codex 和 Claude Code 提供聚焦的遷移檢查清單。

程式開發查看

ui-design

設計具辨識度的 UI 原型

由 tencentcloudbase

一般化的 AI 介面通常缺乏視覺方向與符合平台脈絡的細節。此技能會引導 Claude、Codex 和 Claude Code 在建置原型前先定義設計意圖。

設計與創意查看

ui-styling

Build 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

建置前先規劃 UX

由 pbakaus

團隊常在釐清使用者目標、狀態與限制之前就開始建置介面。此技能會引導探索流程，並產出可供實作使用的設計簡報。

設計與創意查看

generative-art

建立互動式生成藝術

由 Cam10001110101

藝術家和團隊需要可重現、且無需設定即可探索的生成藝術。此技能會將概念轉換為帶有種子的 p5.js HTML 成品，並包含控制項與 PNG 匯出功能。

設計與創意查看

uizze-ui

Build 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

實作 React View Transitions

由 vercel-labs

React view transitions 很容易放錯位置，導致動畫靜默無效或過於吵雜。這項技能會引導你針對路由、Suspense、清單與共享元素的動畫做出選擇。

程式開發查看