Design-It 是 design-it 技能系统的主要入口。它的定位是：与其回退到通用的“AI slop”式审美，不如让使用者从 48 种各不相同、具有强烈主张的设计风格中进行选择。
适用时机：当用户要求构建任何前端界面（网站、应用屏幕、UI 组件），而你希望套用某种特定、有主张的设计美学而非通用默认样式时，可以使用该技能。
使用方式：当用户要求你构建前端界面（Web 或 App）时，按以下步骤操作。
一、识别风格（模糊匹配）。在用户提示中寻找关键词（例如 “minimal”、“glass”、“retro”），不需要精确匹配，用语义理解把请求映射到 48 种风格之一。示例：“Apple style” 或 “VisionOS” 对应 spatial-design、bento-ui 或 glassmorphism；“Windows 8” 或 “Metro” 对应 tile-design；“Terminal” 或 “Hacker” 对应 sci-fi-interface 或 brutalist-typography；“Bauhaus” 或 “Clean” 对应 swiss-design；“Cyber” 或 “Matrix” 对应 cyberpunk-ui。如果用户没有指定风格，则选择最契合项目上下文的一种。
二、读取风格参考。查阅下方的风格索引，找到所选风格的正确路径，使用 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：minimalism、flat-design、flat-design-2、material-design、glassmorphism、neumorphism、skeuomorphism、claymorphism、aurora-ui、bento-ui。深度与 3D：3d-ui、isometric-design、layered-design、floating-ui、spatial-design。排版：swiss-design、editorial-design、typography-first、brutalist-typography。复古与历史：brutalism、neo-brutalism、retro-design、y2k-design、cyber-y2k、vaporwave、synthwave、frutiger-aero、retro-futurism。现代趋势：dark-mode、monochromatic-ui、gradient-design、duotone-design、color-blocking、soft-pastel、high-contrast、vibrant-maximalism、maximalism。未来主义：cyberpunk-ui、sci-fi-interface、holographic-ui、ai-native-ui、spatial-computing-ui。数据与产品：dashboard-design、card-based-design、widget-based-design、tile-design、data-dense-design、command-center-ui。
Web 与 App 的实现差异：Web（React/Vue/HTML）原生使用 CSS 变量，布局优先使用 CSS grid/flexbox，悬停状态使用 CSS 过渡。App（React Native/Flutter/SwiftUI）把调色板映射到对应框架的主题引擎，使用平台特有的阴影（elevation）与动画替代 CSS 过渡，在适应移动端约束的同时保持核心视觉原则。
示例：用户请求 “Review this interface with @design-it, identify the highest-impact design problems, and propose an implementation-ready improvement.”
限制：该技能不能替代特定环境的验证、测试或专家审查。如果缺少必需的输入、权限或安全边界，应停下来请求澄清。