源自 GitHubSaaS与后台界面精细化设计
本能力专为仪表盘、后台管理系统、SaaS 工具、数据接口与高频交互产品设计。它克服了常规 AI 倾向生成“千篇一律”模板界面的缺陷，从用户画像、核心任务动词和物理现实色彩出发确立设计基调；通过严密的字号比例、表面阶梯式对比、低饱和度微透明边框建立细腻的视觉层级；同时规范原生组件与无头组件（Headless UI / Radix 等）的选型次序，配套提供同心圆角、等宽数字、触觉微动效（<300ms 且仅作用于 transform/opacity）等工程级打磨标准，确保产出兼具工业质感与生产级代码规范的界面方案。
它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。
常见场景
它能帮你做什么？
01
02
03
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“我们要构建一个轻量级容器部署监控面板，请为其规划信息层级与色彩体系，突出当前集群健康度，并提供核心指标卡片的 CSS/Tailwind 方案与状态设计。”
“审查我目前使用的通用后台表单布局，指出缺乏层级感的平铺元素，按 60/30/10 比例与微妙阴影方案进行视觉升级，并指定输入框与下拉菜单的 Headless 组件架构。”
“为一个偏暗色系的代码审查工具设计弹出式命令面板（Command Palette），要求包含键盘焦点状态、微交互动画曲线以及消除布局抖动的排版规则。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
