ui-ux-design-pro-skill
资深级UI/UX设计智能体技能，提供数据驱动的设计系统与代码生成。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ui-ux-design-pro-skill。 它的用途是：资深级UI/UX设计智能体技能，提供数据驱动的设计系统与代码生成。 完整的 Skill 内容见：https://321skill.com/skills/ui-ux-design-pro-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我们需要为一个健康科技SaaS产品设计一个仪表板界面，要求感觉专业、可信且平静。” 它会调用该技能，分析健康科技行业的设计模式，推荐一套包含“医疗蓝”主色调、清晰字体对和符合WCAG标准的间距系统，并生成一个React组件代码框架，其中包含可访问性属性和对应的Tailwind CSS类名。
介绍
UI/UX Design Pro Skill 是一个面向专业设计师和开发者的高级AI技能，旨在解决在快速迭代中难以保持设计一致性和专业性的痛点。它通过一个庞大的、数据驱动的知识库（包含150+设计推理规则、107+UI风格、127+配色方案等），将模糊的设计需求转化为具体、可执行的设计决策和前端代码。
使用方式非常直接：在支持该技能的AI平台（如Claude、Cursor）中安装后，只需向AI描述你的设计目标（例如“为一家金融科技初创公司设计一个干净、可信的仪表板”），AI便会调用该技能库中的专业知识，生成包含设计风格建议、配色方案、字体搭配、布局原则甚至React/Tailwind代码片段的详细方案。
该技能非常适合前端开发者、全栈工程师、产品经理以及希望提升设计产出质量和效率的UI/UX设计师。它尤其适合那些需要快速原型设计、缺乏专职设计师的团队，或者希望确保设计符合行业最佳实践和可访问性标准的项目。
与市面上许多通用的设计建议工具或简单的配色生成器不同，UI/UX Design Pro Skill 的核心区别在于其深度和系统性。它不仅提供零散的建议，而是基于“意图优先”的方法论，构建完整的设计系统。它内嵌了针对16种技术栈（如React、Vue、Svelte）的代码生成能力，并包含详尽的WCAG可访问性指南和行业特定的设计反模式规避规则，实现了从设计思维到生产代码的闭环。
核心特点
核心区别在于其系统性和生产就绪性：它基于包含1875+数据行的知识库，能根据行业和设计意图生成完整的设计系统（含语义化色彩阶梯、字体对、组件规范），并直接输出对应16种技术栈的可用代码片段和可访问性注释，而非仅提供视觉灵感。
注意事项
不适合追求高度个性化、艺术化或完全脱离现有设计范式的前卫艺术设计项目。
常见问题
需要会写代码才能用吗？
不需要，普通用户可获得专业设计建议；开发者则可额外获得可直接使用的代码片段。
支持哪些前端框架？
支持React、Next.js、Vue、Angular、Svelte、SolidJS等共16种主流技术栈。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ui-ux-design-pro-skill/raw/index.md 读取 ui-ux-design-pro-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ui-ux-design-pro-skill/raw/index.md（查看排版版本）