技能 design-guide
📦
design-guide
內容修訂 r1 安全 ⚙️ 外部命令
建置一致的 Paperclip UI 元件
當元件、權杖與版面配置以臨時方式建立時，Paperclip UI 工作可能會逐漸偏離一致性。此技能為 Claude、Codex 和 Claude Code 提供共享的設計指南，以實作一致的前端。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "design-guide" from https://skillstore.io/skills/getpaperclipai-design-guide.md and its manifest at https://skillstore.io/api/skills/getpaperclipai-design-guide/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「design-guide」。 審查 Paperclip 的新 issue row 元件。
預期結果:
回應會識別 EntityRow 作為正確的基礎模式，要求 StatusIcon 位於 PriorityIcon 之前，並建議在尾端插槽使用 StatusBadge。
正在使用「design-guide」。 為 agents page 規劃 dashboard metric cards。
預期結果:
回應會建議在響應式四欄網格中使用 MetricCard，並採用語意權杖、小陰影，以及既有的數值與標籤字體排印。
正在使用「design-guide」。 新增可重用 selector 後更新設計指南。
預期結果:
回應會列出要新增的設計指南區段、要展示的變體、要包含的互動狀態，以及要更新的元件索引欄位。
安全審計
安全v3 • 2026/7/6 開啟版本化報告
Reviewed all 84 static findings in SKILL.md and references/component-index.md. The findings are false positives caused by markdown inline code, TSX examples, CSS class names, file paths, and responsive grid guidance. No prompt injection, data exfiltration, command execution intent, or malicious instructions were found.
2
已掃描檔案
676
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (80)
references/component-index.md:103-105 SKILL.md:18 SKILL.md:40 SKILL.md:42 SKILL.md:48 SKILL.md:56 SKILL.md:57 SKILL.md:58 SKILL.md:59 SKILL.md:60 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:64 SKILL.md:65 SKILL.md:66 SKILL.md:70 SKILL.md:72 SKILL.md:73 SKILL.md:74 SKILL.md:75 SKILL.md:76 SKILL.md:80 SKILL.md:90 SKILL.md:91 SKILL.md:92 SKILL.md:93 SKILL.md:94 SKILL.md:95 SKILL.md:96 SKILL.md:97 SKILL.md:98 SKILL.md:99 SKILL.md:107 SKILL.md:123 SKILL.md:135 SKILL.md:136 SKILL.md:137 SKILL.md:163-172 SKILL.md:172-180 SKILL.md:180-190 SKILL.md:190-196 SKILL.md:196-201 SKILL.md:201-203 SKILL.md:203 SKILL.md:209-214 SKILL.md:214-220 SKILL.md:220-222 SKILL.md:222-224 SKILL.md:224-228 SKILL.md:228-232 SKILL.md:232 SKILL.md:236-244 SKILL.md:244-245 SKILL.md:245-246 SKILL.md:246-250 SKILL.md:250-254 SKILL.md:254-258 SKILL.md:258-268 SKILL.md:268-270 SKILL.md:270-276 SKILL.md:276-278 SKILL.md:278-279 SKILL.md:279-280 SKILL.md:280-286 SKILL.md:286-287 SKILL.md:287-296 SKILL.md:296 SKILL.md:301-313 SKILL.md:313-330 SKILL.md:330-331 SKILL.md:331-332 SKILL.md:332-333 SKILL.md:333-334 SKILL.md:334-335 SKILL.md:335-336 SKILL.md:336-338 SKILL.md:338 SKILL.md:349-350 SKILL.md:350
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/getpaperclipai-design-guide/audits/3?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/getpaperclipai-design-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/getpaperclipai-design-guide.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 引用
getpaperclipai. (2026). design-guide security audit report (audit version 3) [Author version unspecified]. Skillstore. https://skillstore.io/skills/getpaperclipai-design-guide/audits/3BibTeX 引用
@techreport{getpaperclipai-getpaperclipai-design-guide-2026,
author = {getpaperclipai},
title = {design-guide security audit report (audit version 3)},
institution = {Skillstore},
year = {2026},
number = {3},
url = {https://skillstore.io/skills/getpaperclipai-design-guide/audits/3},
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-guide security audit report (audit version 3)"
version: "unspecified"
type: report
authors:
- name: "getpaperclipai"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/getpaperclipai-design-guide/audits/3"
identifiers:
- type: other
value: "skillstore:getpaperclipai-design-guide:audit:3"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 41
架構
85
可維護性
87
內容
65
社群
83
規範符合度
你可以打造什麼
建立新元件
使用指南為新的 Paperclip 元件選擇權杖、變體、檔案名稱、狀態與設計指南範例。
審查 UI 一致性
依據 Paperclip 字體排印、版面配置、狀態、優先順序與互動模式，比對頁面或功能。
記錄元件變更
當可重用 UI 模式變更或擴充時，更新元件索引與設計指南頁面。
試試這些提示
檢查元件計畫
使用 design-guide skill 來審查我的新 Paperclip 元件計畫。檢查權杖、字體排印、變體、檔案放置位置，以及設計指南更新。
建置可重用元件
使用 design-guide skill 來實作這個 Paperclip 元件。遵循現有的 shadcn/ui composition、CVA variants、cn usage、狀態慣例與檔案命名規則。
對齊頁面版面配置
使用 design-guide skill 來重構這個 Paperclip 頁面版面配置。使其與側邊欄、breadcrumb、主要內容、屬性面板、間距與響應式模式一致。
稽核複雜 UI 變更
使用 design-guide skill 來稽核這項 UI 變更是否產生設計系統偏離。識別重複模式、缺少的文件、不一致的權杖、薄弱狀態，以及元件重用機會。
最佳實務
- 在建立新元件之前，先從現有 primitives 與自訂複合元件開始。
- 使用語意權杖、既有字體排印，以及共享的狀態或優先順序元件。
- 當可重用 UI 變更時，同時更新設計指南頁面與元件索引。
避免
- 不要硬編碼原始顏色、自訂字級尺度，或一次性的狀態樣式。
- 當可以透過組合方式擴充時，不要直接修改 shadcn/ui primitives。
- 不要在缺少範例、狀態、變體與參考文件的情況下新增可重用元件。
常見問題
此技能有助於建置什麼？
它有助於建置遵循專案設計系統的 Paperclip 前端元件與頁面。
它假設使用哪個技術棧？
它假設使用 React、TypeScript、Vite、Tailwind CSS v4、shadcn/ui、Radix UI、Lucide React 和 CVA。
它會取代視覺設計審查嗎？
不會。它提供 Paperclip 專屬規則，並預期由配套設計技能進行更廣泛的前端品質審查。
它可以建立新元件嗎？
可以。它會說明何時建立元件、檔案應放在哪裡，以及如何記錄變體與狀態。
它包含元件清單嗎？
有。參考檔案列出 primitives、自訂元件、版面配置元件、表單元件、公用工具與 hooks。
使用它安全嗎？
受審查的檔案包含文件與示意性 TSX 片段。未發現惡意指令或執行行為。
開發者詳細資訊
授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
a06681402992ceae98ba04d54cfd4ab004862696
維護新鮮度
2026/7/18
使用量
1 次下載 · 0 次瀏覽
檔案結構