Menu
CSS 变量与设计 Token 体系规范，确保视觉一致性
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
生成完成后，检查代码是否符合基础质量指标
验证生成的页面在 4 个断点下的布局是否正常
生成前主动采集用户提供的参考图片或网页的设计风格，提取配色/布局/字体
API 调用模式最佳实践，包括列表查询、表单提交、数据删除等场景的异步处理规范
表单校验的完整实现规范，适用于所有包含表单的页面
微交互与状态反馈规范，包括骨架屏、加载态、空状态、操作动画
| name | design-tokens |
| description | CSS 变量与设计 Token 体系规范，确保视觉一致性 |
所有页面生成，确保视觉一致性
:root {
/* 颜色 */
--primary: #4f46e5;
--primary-light: #818cf8;
--primary-bg: #eef2ff;
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
--bg: #f8fafc;
--bg-card: #ffffff;
--text: #1e293b;
--text-secondary: #64748b;
--border: #e2e8f0;
/* 间距 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* 圆角 */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
/* 阴影 */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
/* 字体 */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
[data-theme="dark"] {
--bg: #0f172a;
--bg-card: #1e293b;
--text: #f1f5f9;
--text-secondary: #94a3b8;
--border: #334155;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
}