技能 layout
📦
layout
v2.1.1 內容修訂 r1 低風險 ⚙️ 外部命令
改善 UI 版面配置與視覺節奏
擁擠的介面和重複的網格會讓產品更難瀏覽與信任。這項技能會引導 Claude、Codex 和 Claude Code 建立更好的間距、階層與響應式構圖。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "layout" from https://skillstore.io/skills/pbakaus-layout.md and its manifest at https://skillstore.io/api/skills/pbakaus-layout/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「layout」。 儀表板感覺很擁擠，每個小工具都使用相同的卡片尺寸與間距。
預期結果:
審查指出分組薄弱、卡片節奏重複且優先順序不清。它建議讓相關群組更緊密、區塊間距更寬，並讓小工具採用不同的跨欄寬度。
正在使用「layout」。 登陸頁有多列相同的圖示、標題與文字卡片。
預期結果:
這項技能會提出更多變的區塊結構，包括不對稱對齊、較少卡片、更清楚的內容階層，以及響應式間距調整。
正在使用「layout」。 設定頁需要更好的桌面與行動版面規則。
預期結果:
結果會比較 Flexbox 和 Grid 的選擇、定義間距行為，並加入針對階層與響應性的驗證檢查。
安全審計
低風險v4 • 2026/7/6 開啟版本化報告
Static findings are false positives caused by Markdown inline code and design terminology in SKILL.md. The only semantic risk found is a low-severity mandatory invocation of another skill outside this package.
1
已掃描檔案
125
分析行數
0
複核項目
0
已忽略的誤報
已確認的安全問題 (1)
低
Mandatory Cross-Skill Invocation
SKILL.md instructs the agent to invoke /impeccable and run /impeccable teach if no design context exists. This creates a dependency on instructions outside the audited package.
Line 13 explicitly requires another skill before this skill proceeds. No malicious behavior or data exfiltration is shown in this file.
風險因素
⚙️ 外部命令 (6)
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/pbakaus-layout/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/pbakaus-layout?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/pbakaus-layout?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/pbakaus-layout/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/pbakaus-layout.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 引用
pbakaus. (2026). layout security audit report (audit version 4) [Author version 2.1.1]. Skillstore. https://skillstore.io/skills/pbakaus-layout/audits/4BibTeX 引用
@techreport{pbakaus-pbakaus-layout-2026,
author = {pbakaus},
title = {layout security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/pbakaus-layout/audits/4},
note = {Author version 2.1.1}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "layout security audit report (audit version 4)"
version: "2.1.1"
type: report
authors:
- name: "pbakaus"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/pbakaus-layout/audits/4"
identifiers:
- type: other
value: "skillstore:pbakaus-layout:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
100
可維護性
87
內容
68
社群
100
規範符合度
你可以打造什麼
優化擁擠的產品畫面
改善間距、分組與密度，讓營運使用者能更快瀏覽內容。
修正重複的行銷區塊
用更強的階層、不對稱與區塊節奏，打破單調的卡片網格。
審查響應式版面決策
選擇符合內容並能適應不同螢幕尺寸的 Flexbox 或 Grid 模式。
試試這些提示
審查基本間距
檢查這個介面的間距、對齊與視覺階層。建議最小的版面調整，讓它更容易瀏覽。
改善卡片版面節奏
找出這個 UI 中重複的卡片網格，並提出更強的構圖。保持設計實用且具響應性。
規劃響應式結構
為這個畫面建立版面計畫。為每個主要區域選擇 Flexbox 或 Grid，並定義間距、密度與階層規則。
稽核設計系統版面
稽核這些畫面的版面一致性。識別間距尺度問題、薄弱階層、卡片過度使用與響應式風險。
最佳實務
- 在要求版面變更前，提供截圖、元件程式碼或清楚的畫面描述。
- 在要求實作編輯前，先請求間距尺度與階層規劃。
- 在行動與桌面視窗大小下驗證最終變更。
避免
- 不要在沒有顯示畫面或描述版面問題的情況下，要求泛泛的美化。
- 不要只是為了讓數值一致，就在所有地方套用相同間距。
- 當間距與分隔線會更清楚時，不要把每個區塊都轉成卡片。
常見問題
這項技能會改善什麼？
它會改善版面結構、間距、密度、視覺階層、節奏與響應式構圖。
它可以編輯前端程式碼嗎？
當主控工具具備檔案存取權限，且相關 UI 程式碼可用時，它可以引導程式碼編輯。
它需要截圖嗎？
截圖不是必要的，但它們會讓版面評估更準確。
它如何選擇 Flexbox 或 Grid？
它會針對一維版面建議 Flexbox，針對二維頁面結構建議 Grid。
這只適用於行銷頁面嗎？
不是。它也適用於儀表板、產品畫面、設定頁與設計系統版面。
使用前我應該提供什麼？
請提供畫面目標、目標使用者、目前的版面問題，以及任何相關截圖或元件程式碼。