UI 设计规范v1.0.0

免责声明：本站部分 Skill 来源于公开渠道，使用前请注意识别相关风险，内容版权归原作者所有，如 Skill 涉及版权问题，请在线反馈，核实后予以下架处理。

概述

本 Skill 为前端界面设计提供一套强制性的前置设计规范与美学约束体系。在编写任何界面代码之前，必须先显式输出包含目的陈述、美学方向、配色方案、字体选择及布局策略的完整设计规范文档，杜绝直接套用「现代/简洁/干净」等空洞描述。技能内置 11 种具体美学方向（如粗野极简、极繁主义、复古未来主义、编辑杂志风等）及场景化推荐，同时划定明确的禁用清单：禁止紫/靛/品红等 cliché 渐变色、禁止 Inter/Roboto/system-ui 等过度使用字体、禁止以 Emoji 替代专业图标库。最终产出为可直接进入开发的高保真原型方案，包含真实图片素材与符合平台标准的视觉细节。

技能包含

• SKILL.md（本文件）：技能主说明，含触发条件、设计流程、美学指南与反模式示例
• checklist.md：UI 设计激活检查清单，界面生成前必须逐项确认

核心能力

• 强制设计先行：任何代码输出前必须完成并显式展示设计规范文档，含目的、美学方向、配色、字体、布局五要素
• 美学方向锁定：从 11 种具体风格中择一执行，拒绝「modern/clean/simple」等模糊表述，并提供教育/生产力/社交/金融等场景化推荐
• 禁用清单自检：自动拦截紫/靛/品红渐变、Inter/Roboto 等通用字体、Emoji 图标、标准居中卡片等通用 AI 审美套路
• 专业图标约束：强制使用 FontAwesome、Heroicons、Lucide 等专业图标库，统一视觉一致性
• 空间构图突破：鼓励非对称、对角线、重叠、破网格等非常规布局，避免 predictable 的组件堆砌
• 真实感增强：要求使用 Unsplash/Pexels/Apple 官方资源等真实图片，配合 CSS 变量、动画编排与氛围纹理提升完成度

应用场景