Designer

全流程设计代理,从构思到交付可构建文件

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:Designer。
它的用途是:全流程设计代理,从构思到交付可构建文件
完整的 Skill 内容见:https://321skill.com/skills/designer-x-2/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

‘请为这个健身App设计一个用户资料页面,包含空状态、加载状态、错误状态,并确保按钮触控目标尺寸符合无障碍标准,同时提供暗黑模式配色方案。’ 它会生成完整的UI设计稿,标注每个状态,解释设计决策,并输出设计令牌(颜色、间距、字体尺度)供开发使用。

介绍

这个 Skill 解决的是产品、品牌或客户在完整设计流程中遇到的痛点:从零开始决定做什么、实际设计出来、在评审中说服他人,并最终交付开发可以直接使用的文件。它覆盖了从 Logo、界面、落地页、应用图标、演示文稿到印刷品等各类设计任务,同时能细致处理屏幕的空状态、加载态、错误态、悬停、聚焦、禁用等交互状态,确保对比度、点击目标尺寸、焦点顺序、减少动效等无障碍要求达标。当工程师交付的界面与标注不符、需要运行设计评审或用研测试、或者要定义调色板、字体层级、间距体系和设计令牌时,这个 Skill 都能派上用场。

使用时,你只需以设计师的角色向 AI 描述需求,例如“设计一个电商 App 的首页,包含空状态和加载状态,并符合 iOS 设计规范”,它就会生成高保真设计稿,同时解释每个设计决策背后的理由,包括为什么选择这个配色、为什么这个按钮大小符合无障碍标准。它还能输出可复用的设计令牌(颜色、间距、字体尺寸),并生成适配暗黑模式、Android 和 iOS 平台惯例的版本,甚至支持邮件和印刷品生产。

适合的用户包括 UI 设计师(作为日常设计助手)、产品经理(快速验证原型)、品牌设计师(创建品牌物料)以及任何需要完成设计交付的创意人员。无论是独立设计师需要加速产出,还是团队需要统一设计规范,这个 Skill 都能扮演“设计主理人”角色,从构思到交付全程跟进。

使用建议:明确提供设计目标和约束(如品牌色、目标平台、用户群体),并尽可能给出参考示例或风格关键词。它擅长处理完整的设计系统,而非单次视觉判断。如果只是需要评价一张图片的好坏、制作图表或直接写前端代码,请使用其他专用 Skill。注意,它生成的设计文件通常是可导出的规范描述,实际开发落地仍需结合代码实现。

核心特点

与普通 AI 设计工具不同,它不只生成视觉稿,而是扮演完整的“设计师”角色:从定义设计方向、创建设计系统、覆盖所有交互状态,到在评审中辩护并交付可直接用于开发的文件,形成闭环。

注意事项

不适合单次视觉判断(如评价一张图的好坏)、图表设计(数据可视化)或直接输出前端代码。

常见问题

能生成设计规范吗?

可以,它会输出完整的调色板、字体层级、间距系统和设计令牌,并支持暗黑模式和多平台适配。

支持暗黑模式吗?

支持,它覆盖暗黑模式以及 iOS 和 Android 平台惯例,还能处理邮件和印刷品设计。

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/designer-x-2/raw/index.md 读取 Designer 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。