UI设计技能包 - Claude技能库中的UI设计与用户体验工具
ui-design by shajith003/awesome-claude-skills
安装命令
npx skills add https://github.com/shajith003/awesome-claude-skills --skill ui-design🇨🇳中文介绍
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>技能详情</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900 antialiased min-h-screen">
<div class="max-w-6xl mx-auto p-6 md:p-8">
<!-- 头部标题 -->
<div class="mb-10">
<h1 class="text-3xl md:text-4xl font-semibold tracking-tight text-gray-900 mb-2">技能详情面板</h1>
<p class="text-gray-600">查看技能包的安装、仓库与安全状态概览。</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- 左侧主要指标 -->
<div class="lg:col-span-2 space-y-8">
<!-- 关键指标卡片 -->
<div class="bg-white rounded-2xl border border-gray-200 p-6 md:p-8 shadow-sm">
<h2 class="text-xl font-semibold tracking-tight text-gray-900 mb-6">核心指标</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="space-y-2">
<p class="text-sm font-medium text-gray-500">每周安装量</p>
<p class="text-4xl font-semibold tracking-tight text-gray-900">241</p>
</div>
<div class="space-y-2">
<p class="text-sm font-medium text-gray-500">GitHub Stars</p>
<p class="text-4xl font-semibold tracking-tight text-gray-900">20</p>
</div>
<div class="space-y-2">
<p class="text-sm font-medium text-gray-500">首次出现</p>
<p class="text-2xl font-semibold tracking-tight text-gray-900">Jan 24, 2026</p>
</div>
<div class="space-y-2">
<p class="text-sm font-medium text-gray-500">仓库</p>
<a href="https://github.com/shajith003/awesome-claude-skills" title="shajith003/awesome-claude-skills" class="group inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors">
<span class="text-lg font-medium truncate">shajith003/awes…e-skills</span>
<i data-lucide="external-link" class="ml-2 w-4 h-4 stroke-[1.5] group-hover:translate-x-0.5 transition-transform"></i>
</a>
</div>
</div>
</div>
<!-- 安全审计部分 -->
<div class="bg-white rounded-2xl border border-gray-200 p-6 md:p-8 shadow-sm">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold tracking-tight text-gray-900">安全审计</h2>
<i data-lucide="shield-check" class="w-6 h-6 text-green-500 stroke-[1.5]"></i>
</div>
<div class="space-y-4">
<a href="/shajith003/awesome-claude-skills/ui-design/security/agent-trust-hub" class="flex items-center justify-between p-4 rounded-xl border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-all group">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center mr-4">
<i data-lucide="user-check" class="w-5 h-5 text-blue-600 stroke-[1.5]"></i>
</div>
<div>
<p class="font-medium text-gray-900">Gen Agent Trust Hub</p>
<p class="text-sm text-gray-500">代理信任中心验证</p>
</div>
</div>
<i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 stroke-[1.5] group-hover:text-gray-600 transition-colors"></i>
</a>
<a href="/shajith003/awesome-claude-skills/ui-design/security/socket" class="flex items-center justify-between p-4 rounded-xl border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-all group">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center mr-4">
<i data-lucide="package-check" class="w-5 h-5 text-green-600 stroke-[1.5]"></i>
</div>
<div>
<p class="font-medium text-gray-900">Socket</p>
<p class="text-sm text-gray-500">依赖安全扫描</p>
</div>
</div>
<i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 stroke-[1.5] group-hover:text-gray-600 transition-colors"></i>
</a>
<a href="/shajith003/awesome-claude-skills/ui-design/security/snyk" class="flex items-center justify-between p-4 rounded-xl border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-all group">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center mr-4">
<i data-lucide="scan" class="w-5 h-5 text-purple-600 stroke-[1.5]"></i>
</div>
<div>
<p class="font-medium text-gray-900">Snyk</p>
<p class="text-sm text-gray-500">漏洞与许可证检查</p>
</div>
</div>
<i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 stroke-[1.5] group-hover:text-gray-600 transition-colors"></i>
</a>
</div>
</div>
</div>
<!-- 右侧安装分布 -->
<div class="space-y-8">
<div class="bg-white rounded-2xl border border-gray-200 p-6 md:p-8 shadow-sm">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold tracking-tight text-gray-900">安装平台分布</h2>
<i data-lucide="download" class="w-6 h-6 text-gray-700 stroke-[1.5]"></i>
</div>
<div class="space-y-5">
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-gray-100 flex items-center justify-center mr-3">
<span class="font-semibold text-gray-700 text-sm">OC</span>
</div>
<span class="font-medium text-gray-900">opencode</span>
</div>
<span class="font-semibold text-gray-900 bg-gray-100 px-3 py-1 rounded-full text-sm">234</span>
</div>
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center mr-3">
<span class="font-semibold text-blue-700 text-sm">GC</span>
</div>
<span class="font-medium text-gray-900">gemini-cli</span>
</div>
<span class="font-semibold text-gray-900 bg-gray-100 px-3 py-1 rounded-full text-sm">232</span>
</div>
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-green-100 flex items-center justify-center mr-3">
<span class="font-semibold text-green-700 text-sm">CD</span>
</div>
<span class="font-medium text-gray-900">codex</span>
</div>
<span class="font-semibold text-gray-900 bg-gray-100 px-3 py-1 rounded-full text-sm">231</span>
</div>
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-red-100 flex items-center justify-center mr-3">
<span class="font-semibold text-red-700 text-sm">CR</span>
</div>
<span class="font-medium text-gray-900">cursor</span>
</div>
<span class="font-semibold text-gray-900 bg-gray-100 px-3 py-1 rounded-full text-sm">231</span>
</div>
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-purple-100 flex items-center justify-center mr-3">
<span class="font-semibold text-purple-700 text-sm">GH</span>
</div>
<span class="font-medium text-gray-900">github-copilot</span>
</div>
<span class="font-semibold text-gray-900 bg-gray-100 px-3 py-1 rounded-full text-sm">229</span>
</div>
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<div class="w-8 h-8 rounded-md bg-yellow-100 flex items-center justify-center mr-3">
<span class="font-semibold text-yellow-700 text-sm">AM</span>
</div>
<span class="font-medium text-gray-900">amp</span>
</div>
<span class="font-semibold text-gray-900 bg-gray-100 px-3 py-1 rounded-full text-sm">228</span>
</div>
</div>
</div>
<!-- 趋势图表占位 -->
<div class="bg-white rounded-2xl border border-gray-200 p-6 md:p-8 shadow-sm">
<h2 class="text-xl font-semibold tracking-tight text-gray-900 mb-6">安装趋势</h2>
<div class="h-64">
<canvas id="installChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
lucide.createIcons();
// 初始化图表
const ctx = document.getElementById('installChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: '安装量',
data: [65, 140, 180, 210, 230, 241],
borderColor: 'rgb(59, 130, 246)',
backgroundColor: 'rgba(59, 130, 246, 0.05)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)'
},
ticks: {
color: '#6b7280'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#6b7280'
}
}
}
}
});
</script>
</body>
</html>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
