kscz0000 Design-It：高级 UI 风格路由
这是 design-it 技能系统的主入口。摒弃千篇一律的"AI 流水线"美学，你将拥有 48 种风格鲜明、立场鲜明的设计风格。
使用时机
当用户请求构建任意前端界面（网站、应用界面、UI 组件），并且希望采用一种风格鲜明的、有立场的设计美学而非通用默认值时，使用此技能。
使用方法
当用户要求你构建前端界面（Web 或 App）时：
- 识别风格（模糊匹配）：在用户的提示词中寻找关键词（例如"极简"、"玻璃"、"复古"）。无需精确匹配。利用语义理解，将他们的请求映射到 48 种风格中的一种。例如：
- "Apple 风格"或"VisionOS" →
spatial-design、bento-ui或glassmorphism - "Windows 8"或"Metro" →
tile-design - "终端"或"黑客" →
sci-fi-interface或brutalist-typography - "包豪斯"或"干净" →
swiss-design - "赛博"或"黑客帝国" →
cyberpunk-ui如果用户未指定风格，请选择最契合项目背景的一种。
- "Apple 风格"或"VisionOS" →
- 阅读风格参考：查看下面的 风格索引，找到所选风格的正确路径。使用
view_file工具读取其对应的SKILL.md。 - 选择调色板：如果用户明确定义了主题或颜色，请使用他们指定的颜色。如果用户未指定颜色，你必须从下面的 10 套通用调色板 中选择一套。
- 执行：按照所选风格的特定原则编写代码。除非用户明确要求，否则不要混合多种风格。
通用调色板
如果用户提供了自己的颜色，请使用用户的颜色。否则，你必须使用这 10 套获奖的、高度精致的调色板之一，避免使用通用霓虹色或紫色渐变。选择调色板时，请严格使用以下十六进制色值，并为它们建立 CSS 变量。
- Yacht Club（航海 / 经典优雅）
- 背景：
#F9F6F0 - 主文字/强调：
#1B2A49 - CTA/高亮：
#C85A32 - 次要基础色：
#E2D8C9
- 背景：
- Desert Mirage（温暖 / 有机）
- 背景：
#F4EFEA - 主文字/强调：
#2D2B2A - CTA/高亮：
#A65E44 - 次要基础色：
#8C8781
- 背景：
- Industrial Chic（强烈 / 极简）
- 背景：
#D1D1D1 - 主文字/强调：
#111111 - CTA/高亮：
#9A3B3B - 次要基础色：
#757575
- 背景：
- Monochromatic Brown（舒适 / 怀旧）
- 背景：
#D9CBBF - 主文字/强调：
#4A362D - CTA/高亮：
#7A4C3A - 次要基础色：
#948275
- 背景：
- Earth-Grounded Elegance（平静 / 可持续）
- 背景：
#F7F5F0 - 主文字/强调：
#3A4B3A - CTA/高亮：
#8A9A86 - 次要基础色：
#D3CEC4
- 背景：
- Minimalist Slate（专业 / 科技）
- 背景：
#F4F4F9 - 主文字/强调：
#2B303A - CTA/高亮：
#5C6B73 - 次要基础色：
#C0C5C1
- 背景：
- Midnight Luxury（高级 / 暗色模式）
- 背景：
#0A0A0A - 主文字/强调：
#F5F5F0 - CTA/高亮：
#B59A5F - 次要基础色：
#1C1C1C
- 背景：
- Sophisticated Neutral（高端 / 生活方式）
- 背景：
#E6E2DD - 主文字/强调：
#1F1C1B - CTA/高亮：
#524036 - 次要基础色：
#B8B0A8
- 背景：
- Warm Tech（企业 / 现代）
- 背景：
#EAEAEA - 主文字/强调：
#1C252E - CTA/高亮：
#C28F79 - 次要基础色：
#2C3E50
- 背景：
- Modern Editorial（杂志 / 高对比度）
- 背景：
#F9F9F9 - 主文字/强调：
#121212 - CTA/高亮：
#D44A3A - 次要基础色：
#8F8F8F
- 背景：
60-30-10 法则
- 60%：背景 / 次要基础色
- 30%：主文字 / 强调色
- 10%：CTA / 高亮色
风格索引（48 种）
要使用某种风格，你必须读取其文件路径 <style-folder>/SKILL.md（相对于本文件所在目录）。
现代 UI
minimalismflat-designflat-design-2material-designglassmorphismneumorphismskeuomorphismclaymorphismaurora-uibento-ui
深度与 3D
3d-uiisometric-designlayered-designfloating-uispatial-design
排版
swiss-designeditorial-designtypography-firstbrutalist-typography
复古与历史
brutalismneo-brutalismretro-designy2k-designcyber-y2kvaporwavesynthwavefrutiger-aeroretro-futurism
现代趋势
dark-modemonochromatic-uigradient-designduotone-designcolor-blockingsoft-pastelhigh-contrastvibrant-maximalismmaximalism
未来主义
cyberpunk-uisci-fi-interfaceholographic-uiai-native-uispatial-computing-ui
数据与产品
dashboard-designcard-based-designwidget-based-designtile-designdata-dense-designcommand-center-ui
Web 与 App 实现
- Web（React/Vue/HTML）：原生使用 CSS 变量。布局优先使用 CSS grid/flexbox。悬停状态使用 CSS transition。
- App（React Native/Flutter/SwiftUI）：将调色板映射到框架的主题引擎。使用平台特定的阴影（elevation）和动画替代 CSS transition。在遵循核心视觉原则的同时，适配移动端约束。
限制
- 此技能不能替代特定环境的验证、测试或专家评审。
- 如果缺少必要的输入、权限或安全边界，请停下来并请求澄清。