Menü
产品级 UI 设计规范 — React + Tailwind CSS，含组件库、布局系统、无障碍标准
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
学术论文全流程 — research → write → review → finalize，含文献综述、论文撰写、审稿回复
算法与数据结构 — 数组/链表/树/图/堆/哈希/DP/排序/BFS-DFS/线段树/复杂度分析
API 设计 — RESTful/GraphQL/gRPC/OpenAPI/向后兼容/版本策略
后端 API — REST/GraphQL 设计, JWT/OAuth 认证, 输入验证/限流/缓存
代码审查 — 正确性/安全/性能/可维护性审查维度, 基于严重级别的反馈流程
数据分析 — pandas/numpy 数据清洗/聚合/可视化, 统计检验/A-B测试/SQL
| name | frontend-design |
| description | 产品级 UI 设计规范 — React + Tailwind CSS，含组件库、布局系统、无障碍标准 |
基于 React + Tailwind CSS 的前端 UI 设计系统。
md:/lg: 断点扩展// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a5f' },
surface: { DEFAULT: '#ffffff', muted: '#f8fafc', border: '#e2e8f0' }
},
spacing: { 18: '4.5rem', 88: '22rem' },
borderRadius: { 'xl': '0.75rem', '2xl': '1rem' }
}
}
}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{items.map(item => <Card key={item.id} {...item} />)}
</div>
<dialog className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center">
<div className="bg-white rounded-xl p-6 max-w-lg w-full mx-4 shadow-2xl" role="dialog" aria-modal="true">
{children}
</div>
</dialog>