关于 design-it
design-it 是面向前端开发的技能，可将界面需求匹配到 48 种视觉风格，并提供应用所选风格的实现指导。
主要功能
- 01匹配 48 种视觉风格
- 02根据提示词识别风格
- 03提供风格专属参考
- 04提供可选配色方案
- 05涵盖网页与应用实现
- 06说明无障碍和实现限制
适用场景
- 01为网站选择视觉方向
- 02为应用界面应用风格
- 03构建前端组件
- 04审视界面并提出改进
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/design-it确认已加载。
详细介绍
Design-It：精致的 UI 风格路由器
这是 design-it 技能系统的主要入口。你无需退而求其次，采用千篇一律的「AI 垃圾风格」，而是可以使用 48 种各具特色、风格鲜明的设计风格。
适用场景
当用户要求构建任何前端界面（网站、应用屏幕、UI 组件），且你想采用特定、风格鲜明的设计美学，而不是使用通用默认风格时，请使用此技能。
如何使用此技能
当用户要求你构建前端界面（网页或应用）时：
- 确定风格（模糊匹配）：留意用户提示词中的关键词（例如「极简」「玻璃」「复古」）。不需要完全匹配。运用语义理解，将用户的需求映射到 48 种风格之一。例如：
- 「Apple 风格」或「VisionOS」->
spatial-design、bento-ui或glassmorphism - 「Windows 8」或「Metro」->
tile-design - 「终端」或「黑客」->
sci-fi-interface或brutalist-typography - 「包豪斯」或「简洁」->
swiss-design - 「赛博」或「矩阵」->
cyberpunk-ui如果用户没有指定风格，请选择最适合项目背景的风格。
- 「Apple 风格」或「VisionOS」->
- 阅读风格参考：查看下方的风格索引，找到所选风格对应的正确路径。使用可用的文件读取工具，读取其专属的
SKILL.md。 - 选择配色方案：如果用户明确指定了主题或颜色，请使用用户指定的颜色。如果用户未指定颜色，可以从下方选择合适的配色方案作为可选起点，然后确认每一组实际的前景色与背景色对比度是否达标。
- 执行：按照所选风格的具体原则编写代码。除非用户要求，否则不要混搭风格。
通用配色方案
如果用户提供了自己的颜色，请使用这些颜色。否则，以下十种示例配色方案可作为可选起点。不主张任何奖项出处。请根据所选风格、品牌和测得的对比度调整颜色，并定义可复用的颜色令牌。
- 游艇俱乐部（航海 / 经典优雅）
- 背景：
#F9F6F0 - 主文字 / 点缀：
#1B2A49 - CTA / 强调色：
#C85A32 - 辅助基色：
#E2D8C9
- 背景：
- 沙漠幻景（温暖 / 自然）
- 背景：
#F4EFEA - 主文字 / 点缀：
#2D2B2A - CTA / 强调色：
#A65E44 - 辅助基色：
#8C8781
- 背景：
- 工业雅致（鲜明 / 极简）
- 背景：
#D1D1D1 - 主文字 / 点缀：
#111111 - CTA / 强调色：
#9A3B3B - 辅助基色：
#757575
- 背景：
- 单色棕调（舒适 / 怀旧）
- 背景：
#D9CBBF - 主文字 / 点缀：
#4A362D - CTA / 强调色：
#7A4C3A - 辅助基色：
#948275
- 背景：
- 大地优雅（沉静 / 可持续）
- 背景：
#F7F5F0 - 主文字 / 点缀：
#3A4B3A - CTA / 强调色：
#8A9A86 - 辅助基色：
#D3CEC4
- 背景：
- 极简石板色（专业 / 科技）
- 背景：
#F4F4F9 - 主文字 / 点缀：
#2B303A - CTA / 强调色：
#5C6B73 - 辅助基色：
#C0C5C1
- 背景：
- 午夜奢华（高端 / 深色模式）
- 背景：
#0A0A0A - 主文字 / 点缀：
#F5F5F0 - CTA / 强调色：
#B59A5F - 辅助基色：
#1C1C1C
- 背景：
- 精致中性色（高端 / 生活方式）
- 背景：
#E6E2DD - 主文字 / 点缀：
#1F1C1B - CTA / 强调色：
#524036 - 辅助基色：
#B8B0A8
- 背景：
- 温暖科技感（企业 / 现代）
- 背景：
#EAEAEA - 主文字 / 点缀：
#1C252E - CTA / 强调色：
#C28F79 - 辅助基色：
#2C3E50
- 背景：
- 现代编辑风（杂志 / 高对比度）
- 背景：
#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 transitions。
- App（React Native/Flutter/SwiftUI）：将调色板映射到框架的主题引擎。使用平台特定的阴影（elevation）和动画，而非 CSS transitions。适应移动端的限制，同时保持核心视觉原则。
示例
用户请求：
使用 @design-it 评审这个界面，找出影响最大的设计问题，并提出可直接实施的改进方案。
限制
- 此技能不能替代特定环境下的验证、测试或专家评审。
- 如果缺少必要的输入、权限或安全边界，请停止并要求澄清。
实现边界
样式参考是视觉示例和部分代码片段，并非可完整编译的应用。项目必须自行提供导入项、软件包版本、授权字体和图像资源。Color(hex:) 是自定义扩展；请使用明确实现的解析器或 RGB 初始化器。框架 API 和阴影支持因版本和平台而异；旧版 React Native 阴影属性并未涵盖新架构的所有功能。
在项目中定义引用的 CSS 变量（例如 --bg-primary、--primary-text、--text-primary、--secondary-base、--bg-surface 和 --cta-highlight）；仅有调色板名称并不会声明这些变量。调色板或原生材质并不能保证符合对比度要求。
即使装饰效果看起来粗犷或只有文本，也要保留语义按钮、标签、焦点、键盘操作和实用导航。空回调、只有容器的按钮和仅依赖手势的示例只展示外观；使用前请接入实际操作和支持安全取消的交互状态。不要将装饰性的重复文本、光晕、扫描线或图标作为重复内容播报。遵循文本缩放、安全区域和降低透明度设置。避免使用会在窄屏上裁切重要内容的固定布局。
动画是可选的。优先确保必要文本和控件稳定可用；隐藏时暂停装饰性循环，卸载时销毁控制器并停止循环，同时提供静态的减少动态效果版本。Web 动画示例应包含有针对性的回退方案，例如：
@media (prefers-reduced-motion: reduce) {
.aurora-blob, .cyber-y2k-btn, .max-sticker, .tile-live-content {
animation: none;
transition: none;
}
}
使用相应的原生减少动态效果设置，并为渐变／蒙版文本保留易读的回退方案。样式选择不能取代在目标设备上的无障碍测试。
实现参考：Flutter 组件主题迁移、Flutter 子级颜色滤镜、Android RenderEffect 和 SwiftUI 内阴影样式。