grok-designer
为AI智能体提供专业的UI/UX设计评审与生成能力
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：grok-designer。 它的用途是：为AI智能体提供专业的UI/UX设计评审与生成能力 完整的 Skill 内容见：https://321skill.com/skills/grok-designer/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请使用grok-designer技能，评审当前目录下的 `LandingPage.tsx` 文件的UI和UX设计。” 它会调用 `grok-designer ui,ux` 命令，分析你的组件文件，并生成一份包含视觉和用户体验建议的Markdown报告。或者，
对AI说：“为我的博客‘AI随笔’生成一个手写风格的字标SVG。” 它会调用 `grok-designer svg` 命令，将生成的字标文件保存到你的工作区。
介绍
Grok Designer 是一个专为AI智能体设计的技能，旨在将专业的UI/UX设计评审和生成任务委托给Grok 4.5模型。它解决了智能体在处理视觉设计、用户体验、代码生成等任务时缺乏专业设计判断能力的问题。
使用时，智能体通过安装的 grok-designer CLI工具，根据任务类型（如UI评审、UX评审、生成HTML/SVG）调用相应命令，并将相关设计文件或需求描述作为输入传递给Grok 4.5，最终将Grok的专业建议或生成物带回当前工作区供智能体决策和使用。
该技能非常适合前端开发、UI设计师、产品经理等角色，他们需要借助AI进行设计评审、生成原型或获取设计方向建议，以提升工作效率和设计质量。
使用建议：在需要外部专业设计判断时调用此技能，并注意通过 -f 参数传递完整的相关文件，或通过 -i 传递截图以供视觉评审。Grok是“无状态”的，每次调用仅基于当前提示和提供的文件进行判断，因此需要提供充分的上下文。
核心特点
与通用代码生成或设计工具不同，它专门为AI智能体工作流设计，通过标准化的CLI命令将设计任务精准路由到Grok 4.5模型，并强调“建议-应用”分离的模式，让智能体保持对工作区变更的控制权。
注意事项
不适合需要直接修改项目源码或进行持续、有状态设计对话的场景，其设计判断依赖于单次调用时提供的有限上下文。
常见问题
如何让Grok评审我现有的网页设计？
使用 `grok-designer ui` 或 `ux` 命令，并通过 `-f` 参数传入你的HTML/CSS/React组件文件，或通过 `-i` 传入截图。
这个技能能直接帮我修改代码吗？
不能。Grok Designer只提供设计建议或生成独立的HTML/SVG文件。你需要根据其输出的建议，在你的工作区中手动或指导智能体应用这些更改。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/grok-designer/raw/index.md 读取 grok-designer 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/grok-designer/raw/index.md（查看排版版本）