技能 design-taste-frontend-v1
📦
design-taste-frontend-v1
內容修訂 r1 安全 ⚙️ 外部命令🌐 網路存取
提升前端設計品味
AI 生成的前端作品可能看起來很制式，並遺漏響應式狀態。這項 skill 為 Claude、Codex 和 Claude Code 提供帶有明確取向的 UI 規則，讓 React 和 Tailwind 輸出更精緻。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "design-taste-frontend-v1" from https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1.md and its manifest at https://skillstore.io/api/skills/leonxlnx-design-taste-frontend-v1/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「design-taste-frontend-v1」。 Create a SaaS dashboard for operations managers.
預期結果:
回應會在實作前描述非對稱的儀表板版面、克制的色彩配置、清楚的表單狀態與行動版收合規則。
正在使用「design-taste-frontend-v1」。 Improve a product landing page that looks generic.
預期結果:
回應會以更強的構圖、獨特的排版、具體的圖像指引與更清晰的行動呼籲層級，取代置中 hero 的預設做法。
正在使用「design-taste-frontend-v1」。 Add motion to a feature grid without hurting performance.
預期結果:
回應會建議隔離的動畫元件、基於彈簧的轉場、經記憶化的循環，以及僅使用 transform 的動畫選擇。
安全審計
安全v4 • 2026/7/6 開啟版本化報告
The static alerts are false positives caused by Markdown backticks and design prose in SKILL.md. I found no executable code, shell invocation, secret access, prompt-injection attempt, or malicious network behavior. No semantic security findings were added.
1
已掃描檔案
227
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (55)
SKILL.md:3 SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:22 SKILL.md:24 SKILL.md:25 SKILL.md:28 SKILL.md:29 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:42 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:64 SKILL.md:68 SKILL.md:69 SKILL.md:70 SKILL.md:71 SKILL.md:72 SKILL.md:75 SKILL.md:76 SKILL.md:77 SKILL.md:82 SKILL.md:83 SKILL.md:84 SKILL.md:85 SKILL.md:88 SKILL.md:89 SKILL.md:90 SKILL.md:95 SKILL.md:101 SKILL.md:102 SKILL.md:108 SKILL.md:119 SKILL.md:124 SKILL.md:125 SKILL.md:197 SKILL.md:198 SKILL.md:199 SKILL.md:201 SKILL.md:205 SKILL.md:206 SKILL.md:208 SKILL.md:212 SKILL.md:215 SKILL.md:221 SKILL.md:222 SKILL.md:223
🌐 網路存取 (1)
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/leonxlnx-design-taste-frontend-v1/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/leonxlnx-design-taste-frontend-v1.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 引用
leonxlnx. (2026). design-taste-frontend-v1 security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4BibTeX 引用
@techreport{leonxlnx-leonxlnx-design-taste-frontend-v1-2026,
author = {leonxlnx},
title = {design-taste-frontend-v1 security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4},
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: "design-taste-frontend-v1 security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "leonxlnx"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4"
identifiers:
- type: other
value: "skillstore:leonxlnx-design-taste-frontend-v1:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
73
社群
83
規範符合度
你可以打造什麼
精修產品畫面
在實作複雜產品畫面前，使用此 skill 設定版面配置、排版、動效與狀態指引。
塑造品牌介面
在建立登陸頁、功能區塊或以產品為主導的行銷頁面時，套用更強的視覺方向。
審查 AI 原型
使用預檢清單找出制式版面、缺失狀態與薄弱的響應式行為。
試試這些提示
套用基準
Use design-taste-frontend-v1 for a React interface. Create a [screen type] for [audience]. Use Tailwind. Include loading, empty, and error states.
重新設計靜態頁面
Apply the skill to redesign this page. Keep the same content. Improve layout, typography, responsive behavior, and interaction states.
建立動效系統
Use the skill with motion intensity above five. Add purposeful Framer Motion interactions. Isolate animated client components and protect performance.
稽核複雜儀表板
Review this dashboard concept with the skill checklist. Identify generic patterns, weak hierarchy, missing states, and mobile risks. Then propose focused fixes.
最佳實務
- 在生成前提供受眾、產品領域、技術堆疊與視覺限制。
- 當既有品牌 tokens 或元件規則必須覆蓋此 skill 時，請一併提供。
- 在第一個提示中要求 loading、empty、error 與 mobile 狀態。
避免
- 在沒有品牌、受眾或產品脈絡的情況下，要求產生制式登陸頁。
- 當嚴格的企業設計系統必須控制每個選擇時，仍使用此 skill。
- 在效能敏感頁面加入持續動效，卻沒有明確的使用者效益。
常見問題
這項 skill 有助於生成什麼？
它會引導 AI 工具產生更強的前端版面、樣式、動效與介面狀態。
它包含可執行程式碼嗎？
沒有。它是一項用來引導生成前端程式碼的指令型 skill。
它針對哪些技術堆疊？
它主要針對 React、Next.js、Tailwind CSS 與常見的動效函式庫。
它可以遵循既有設計系統嗎？
可以。先提供系統規則，然後要求模型調整此指引。
它能取代設計審查嗎？
不能。它能改善初稿，但團隊仍應審查無障礙性與品牌契合度。
為什麼要使用 v1 skill？
當工作流程依賴原始指令風格與精確行為時，請使用 v1 skill。