メニュー
CSS 变量与设计 Token 体系规范，确保视觉一致性
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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);
}
生成完成后，检查代码是否符合基础质量指标
验证生成的页面在 4 个断点下的布局是否正常
生成前主动采集用户提供的参考图片或网页的设计风格，提取配色/布局/字体
API 调用模式最佳实践，包括列表查询、表单提交、数据删除等场景的异步处理规范
表单校验的完整实现规范，适用于所有包含表单的页面
微交互与状态反馈规范，包括骨架屏、加载态、空状态、操作动画