Designer Skills快速上手/design-screen /color-palette /type-system命令打造专业UI界面【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skillsDesigner Skills 是一个为 AI 编程助手提供设计师技能的开源项目其中 ui-design 插件内置了三个核心命令/design-screen屏幕布局设计、/color-palette配色方案生成和/type-system字体排印系统。新手无需写代码只需在 Claude Code 中输入命令并描述需求就能获得一份专业级 UI 界面规范。本教程带你快速上手这三个命令。什么是 Designer SkillsDesigner Skills 将设计师的判断力写成了 AI 能读懂的技能文档。每个插件包含两类资产Skills技能名词教 AI 某个设计主题的专业知识例如配色系统、字体比例、布局网格Commands命令动词把多个技能串成一条完整工作流例如一次生成整套配色方案对新手来说你只需要记住命令。技能会在后台自动运行。本项目包含 9 个设计插件、100 多个技能覆盖从用户研究到设计交付的完整流程。详见项目根目录的 README.md 和 ui-design/README.md。安装步骤3 分钟完成配置整个安装过程不需要打开终端在 Claude Code 里操作即可获取 Claude Code从 Anthropic 官方免费获取下载、登录、打开添加技能市场在 Claude Code 中输入插件市场地址回车选择插件输入/plugin打开 Discover 标签勾选ui-design想要全套就多勾几个回车安装 提示只想要 UI 设计能力的话勾选 ui-design 一个插件就够插件体积很轻装多不占性能。第一步/color-palette 一键生成专业配色方案配色是 UI 的地基。/color-palette命令会基于你的品牌色一次性产出完整色彩系统。使用方法输入命令附上你的需求描述即可例如主色 #3B82F6 蓝色现代科技感。命令内部会按 color-palette.md 定义的流程执行 6 个步骤最终交付输出项内容说明色调阶梯每个主色生成 50–950 完整色阶而非单个色块语义映射成功/警告/错误/信息色各含背景、前景、边框、图标变体对比度矩阵所有前景/背景组合自动做 WCAG 无障碍校验正文至少 4.5:1暗色模式从第一版就给出暗色适配映射可视化用色图表专用的数据可视化色板背后的专业知识来自 color-system 技能包括中性灰阶、色盲友好测试、不单独用颜色传达含义等专业规则——这些正是新手最容易遗漏的细节。第二步/type-system 建立字体排印系统有了颜色接下来是文字。/type-system命令从品牌字体或需求描述出发生成完整字体系统。使用方法描述你的字体或要求例如Inter 用于界面Merriweather 用于长文。按 type-system.md 的流程它会交付一套包含 6 部分的字体规范模块化比例尺基于数学比例如 1.25 大三度生成从 Caption 12px 到 Display 48–64px 的和谐字号阶梯层级定义字重400–700、行高标题 1.2 / 正文 1.5、字距的完整规则响应式适配移动端自动缩小标题、正文保持 16px 最小可读尺寸网格对齐文字与基线网格4px 或 8px对齐使用规则每种样式什么时候用都有说明专业规则源自 typography-scale 技能例如日常使用限制在 4–5 个字号、用真实内容而非占位文字测试等最佳实践。第三步/design-screen 组装完整屏幕布局颜色与字体就位后/design-screen命令把它们组装成一整页屏幕规范。使用方法用一句话描述页面例如用户资料设置页或电商商品列表页。命令会按 design-screen.md 的 7 步流程依次调用多个技能完成设计布局网格— 4/8/12 列响应式网格含断点与留白规则layout-grid视觉层级— 用大小、字重、颜色、留白引导用户视线明确第一眼看到什么visual-hierarchy字体应用— 将第二步的字号阶梯落到具体页面元素色彩应用— 将语义色映射到按钮、状态、强调元素间距系统— 基于 4px/8px 基础单位的统一间距spacing-system响应式行为— 375 / 768 / 1024 / 1440px 各断点下的布局变化暗色模式— 整页的暗色适配说明最终产出一份完整屏幕规范布局、层级、字体、颜色、间距、响应式行为、暗色模式可以直接交给开发。 建议顺序先/color-palette和/type-system打好地基再/design-screen组装页面——这正是三个命令在文档中互相推荐的衔接方式。进阶设计完成后如何自检ui-design 插件还有 2 个审计命令帮你验证设计质量/responsive-audit— 检查设计在各断点下的响应式行为/platform-audit— 检查设计是否符合 iOS / Android 平台规范另外如果你是对现有界面截图做检查可以试试 visual-critique 插件的/critique-screen命令它会运行 7 项视觉评审并输出按优先级排序的修复清单参见 visual-critique/README.md。常见问题Q不会写代码能用吗可以。所有命令都在 Claude Code 的对话界面中运行你只需用自然语言描述需求。Q必须三个命令一起用吗不是。每个命令独立可用——只想要配色就跑/color-palette只想要字体规范就跑/type-system。组合使用能获得最完整的体系。Q想扩展其他设计能力本项目还有设计系统tokens、组件规范、交互设计表单、状态机、用户研究画像、旅程图等 8 个插件按需在 Discover 页勾选安装即可。总结Designer Skills 的 ui-design 插件让专业 UI 设计从经验活变成了命令活命令一句话产出/color-palette含无障碍校验的完整配色系统/type-system可落地的模块化字体规范/design-screen一整页可交付的屏幕设计规格从安装到产出第一份屏幕规范通常只需要十几分钟。试着从/color-palette开始给你的产品换个专业配色吧 【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考