Agent Skills
› OpenBMB/PilotDeck
› frontend-design
frontend-design
GitHub提供前端UI设计原则与审查清单，涵盖视觉层次、布局、色彩及响应式状态，旨在创建高质量界面并避免AI生成痕迹。
触发场景
创建前端页面
审查UI视觉质量
安装
npx skills add OpenBMB/PilotDeck --skill frontend-design -g -y
SKILL.md
Frontmatter
{
"name": "frontend-design",
"description": "前端界面设计原则：视觉层次、布局、色彩、间距、响应式和避免“AI 味”页面。"
}
Frontend Design
Use this skill when creating or reviewing frontend UI where visual quality matters.
Workflow
- Clarify the product context, target user, and page goal.
- Establish visual hierarchy before writing code: primary action, secondary action, supporting content.
- Choose a deliberate visual direction instead of generic gradients and cards.
- Use consistent spacing, type scale, color tokens, border radius, shadows, and component rhythm.
- Design responsive states, loading states, empty states, error states, and disabled states.
- Verify the result in a browser or preview surface when available.
Review Checklist
- The page has a clear focal point and primary action.
- Components align to a consistent grid.
- Typography has enough contrast and hierarchy.
- Color is meaningful, not decorative noise.
- The UI works at common mobile/tablet/desktop widths.
- Empty/loading/error states are intentional.
PilotDeck Migration Note
- Source inspiration: Anthropic frontend-design skill and general frontend design best practices.
- This is a PilotDeck-native draft, not a verbatim copy.
版本历史
- 1730cb4 当前 2026-07-05 20:07
