一个 Design Co-Pilot 的自我修养
The Self-Cultivation of a Design Co-Pilot
国产 UI 设计工具的 AI 功能仅对团队版开放
AI 通过 MCP 直接操作现有设计资产
点击继续
1. WorkBuddy 有调用 Ardot 的能力，这是其他产品不具备的核心竞争力，也是腾讯在尝试构建的生态。
2. WorkBuddy 的远程连接、自动化、引用文件等的体验很不错，OpenCode 这种开源工具是没有这种功能的，Qoder 引用文件的手感很差。
3. WorkBuddy 目前可以免费使用 Hy3 模型，而这个模型的能力比我想象中的好很多。
点击继续
借助排行榜进行技术选型，如 Arena。
基于 Arena Web-Dev 排行榜的模型选型
Qwen-3.8-Max
GLM-5.2
DeepSeek-V4-Flash
Hy3
MiniMax-M3
用同一种 Harness 和 MCP 做不同模型的 BenchMark
提取并分析“测试用-之江书香：产品完整设计稿-20260211.sketch”这份 Sketch 文件。
经验卡3：WorkBuddy 不同模式据说会有不同的能力，“设计创意”与前两者的区别是它会有调用 Ardot 的能力，但整体上三者用下来体感差不多，按照自己真实的目的选择即可。在切换选项卡时输入框文本会被清空，如果是自己写长提示词，建议在其他地方写好之后复制粘贴进来。
点击继续
一次性的分析能力或快速出分析报告，DeepSeek-V4-Flash 很顺手也很快，也很省 Token。
首次分析文件、反复要求 AI 深挖，MiniMax-M3 很省 Token，使用起来值得信赖。
这些模型可以混合使用，如让 MiniMax-M3 先分析并沉淀出文档，再让 DeepSeek-V4-Flash 进行后续收敛和更深入的操作。
Hy3 完全不差，考虑到它目前可以在 WorkBuddy 里完全免费，如果不考虑生产速度，它可以作为主力 Coding 模型。
如果你的项目，尤其是 Coding 项目涉及到多个模型参与的，你可以在项目大致有一个雏形的时候，让模型对项目整体进行一个审计，厘清技术栈后生成一份供其他模型阅读的 Agent.md，这样后续的开发会更稳定和流畅一点。
点击继续
WorkBuddy
Hy3
Sketch
Qoder（暂定）
MiniMax-M3
Sketch
OpenCode
硅基流动 API
有羊毛应薅尽薅早薅
点击继续
用例1：画板命名规范化
目标：规范化文档的结构性信息
请通过 Sketch MCP，连接目前打开的文档“之江书香：产品完整设计稿-20260211”，提取、分析并总结我现在所有的画板的命名风格，给我提出画板名称规范化的建议。
此工作分为两阶段：
1. 第一阶段你只读取文件并给我适合设计师阅读的 HTML 分析报告；
2. 等我确认之后再进入第二阶段帮我批量规范化重命名，以回落第一阶段的结果。
涉及到对文件直接操作的任务，可以分为两轮，先分析，评审确认后再执行。分析的步骤可以让 AI 输出 HTML 形式的产物，会比 MD 文件视觉上更好读；在执行时也可以小范围试点。
点击继续
设计文档
设计规范
设计系统
设计变量
组件库
Requirements: A Figma file with a connected design system, or a linked library
点击继续
用例2：设计文件审计
目标：提取并总结历史设计稿设计规范，提出组件库创建建议
请通过 Sketch MCP，连接目前打开的文档"之江书香：产品完整设计稿-20260211"，提取、分析并总结我现在所有设计稿的设计规范和值得组件化的元素，给我创建设计变量（Design Token）和创建组件库的建议。
此工作分为两阶段：
1. 第一阶段你只读取分析文件并给我适合设计师阅读的 HTML 分析报告；
2. 等我确认之后再进入第二阶段帮我往 Sketch 文件里回写设计变量和创建组件库。
AI Agent 可以调用 MCP、Skills 等多种工具，「一句话」已经可以实现原先需要复杂的提示词工程来去引导或约束模型。就像在 Sketch MCP 中有一个 Guide 流程，Agent 可以读取 Guide 自动匹配我们的需求并走相应的 Skill。因此我们不需要把事情做复杂，用最直接、最不绕弯子的提示词已经可以实现很好的效果。
点击继续
Vibe Design
不需要遵循规范，
或者直接有页面可以抄，
效果会很好，
完全从零开始效率非常低。
点击继续
DESIGN.md
Sketch
AI 在 Sketch 里生成设计稿
Token 消耗量大
速度极慢
点击继续
AI to HTML
# 1 基于已经学习到的「之江书香」Design DNA 和 Design Rules，生成一个全新的「活动详情页」。 ### 页面主题 「2026 春日阅读季」 副标题： 与书相遇，与春天相遇。 ### 页面内容 - 活动主视觉 - 活动名称 - 活动时间 - 活动地点 - 活动状态 - 活动简介 - 活动详情 - 活动流程 - 主办方信息 - 报名人数 - 「立即报名」CTA - 相关推荐活动 ### 设计要求 这是一个全新的页面，不要复制「之江书香」已有页面的布局。 请根据已经学习到的 Design DNA 重新组织信息，但保持： - 相同的视觉层级 - 相同的信息密度 - 相同的 Typography Language - 相同的 Color Language - 相同的 Spacing Rhythm - 相同的 Component Language - 相同的图片处理方式 尤其注意活动主视觉与正文内容之间的比例关系。 CTA 应该明确，但不要破坏「之江书香」整体克制的视觉气质。 目标： 让用户感觉这是「之江书香」自然延伸出来的新页面，而不是一个套用了颜色和圆角的陌生页面。
# 2 基于已经学习到的「之江书香」Design DNA 和 Design Rules，生成一个全新的「图书详情页」。 ### 页面主题 书籍： 《人类群星闪耀时》 ### 页面内容 - 图书封面 - 书名 - 副标题 - 作者 - 译者 - 出版社 - 出版时间 - 内容简介 - 编辑推荐 - 图书标签 - 阅读 / 借阅状态 - 「立即阅读」或「立即借阅」CTA - 相关推荐 ### 设计要求 重点测试以下能力： 1. 图片与文字之间的视觉关系 2. 标题与辅助信息的层级 3. 内容信息密度 4. CTA 的视觉权重 5. 图书封面作为核心视觉元素时，如何保持「之江书香」的视觉语言 不要简单制作一个传统电商商品详情页。 不要使用强烈的购买导向、价格标签或电商促销视觉。 目标： 这是一个文化阅读产品中的图书详情页，而不是电商商品详情页。
# 3 基于已经学习到的「之江书香」Design DNA 和 Design Rules，生成一个全新的「书单专题页」。 ### 页面主题 「这个夏天，读完这 10 本书」 副标题： 从文学、历史、自然与生活中，挑选 10 本适合夏日阅读的书。 ### 页面内容 1. Hero - 专题标题 - 副标题 - 主视觉 2. 专题介绍 - 编辑推荐语 - 专题策划说明 3. 精选书单 - 10 本书 - 封面 - 书名 - 作者 - 一句话推荐理由 - 阅读 / 借阅入口 4. 分类推荐 - 文学 - 历史 - 自然 - 生活 5. 编辑精选 - 3 本重点推荐 6. 相关推荐 ### 设计要求 不要复制已有页面。 重点测试： - 长页面的 Layout System - 多模块之间的视觉节奏 - 图片与文字比例 - 内容层级 - 重复组件的变化与统一 保持「之江书香」的 Design DNA，同时让这个页面拥有独立的专题感。 不要设计成典型内容资讯网站或电商书单页面。
# 4 基于已经学习到的「之江书香」Design DNA 和 Design Rules，生成一个全新的「搜索结果页」。 ### 搜索关键词 「鲁迅」 ### 页面内容 - 搜索框 - 搜索关键词 - 搜索结果数量 - 分类 Tab - 全部 - 图书 - 作者 - 书单 - 活动 - 筛选条件 - 排序方式 - 搜索结果列表 - 分页 / 加载更多 - 空状态 ### 设计要求 这是一个功能型页面。 重点测试 AI 是否能够把「之江书香」的视觉语言迁移到高信息密度场景。 重点关注： - 搜索框 - Tab - Filter - List - Metadata - Empty State 这些组件需要保持一致的视觉语言，但不要为了追求视觉效果而降低信息检索效率。 页面应该清晰、克制、易扫描。 不要做成典型 SaaS 后台或搜索引擎页面。
# 5 基于已经学习到的「之江书香」Design DNA 和 Design Rules，生成一个全新的「年度阅读报告页」。 ### 页面主题 「我的 2026 阅读报告」 副标题： 这一年，阅读留下了一些值得记住的数字。 ### 数据 - 阅读 37 本书 - 阅读 128 小时 - 收藏 52 本 - 完成 24 个阅读主题 ### 页面内容 1. 年度开场 2. 阅读数据 3. 阅读偏好 4. 年度关键词 5. 年度 TOP 5 6. 全年阅读轨迹 7. 年度推荐 8. 年度结语 ### 设计要求 这是一个全新的页面类型。 不要设计成 BI Dashboard。 避免： - 密集数据卡片 - 复杂图表 - 企业数据大屏 - 强烈渐变 - SaaS Dashboard 风格 阅读数据应该服务于「年度阅读回顾」的内容叙事。 重点测试： 当页面信息结构发生明显变化时，能否仍然保持「之江书香」的视觉 DNA。 最终让它更接近： 「年度回顾 × 阅读文化 × 编辑设计」 而不是： 「数据分析 Dashboard」。
# 6 基于已经学习到的「之江书香」Design DNA 和 Design Rules，设计一个全新的「文化活动日历页」。 ### 页面主题 「阅读活动」 ### 页面内容 用户可以浏览未来一个月的文化活动。 包含： - 月份切换 - 日历 - 活动日期标记 - 活动分类 - 阅读 - 讲座 - 展览 - 亲子 - 活动列表 - 活动时间 - 活动地点 - 活动状态 - 活动详情入口 ### 设计要求 重点测试复杂信息结构下的视觉组织。 不要做成企业后台 Calendar。 日历只是信息导航工具，活动内容仍然是页面的主要视觉内容。 保持「之江书香」的： - 留白 - Typography - Color - Spacing - Component Language - 信息密度 同时确保用户能够快速理解： 「什么时候有什么活动」。 重点测试： 复杂功能结构是否仍然能够保持产品原有的视觉气质。
# 7 基于已经学习到的「之江书香」Design DNA 和 Design Rules，设计一个全新的「我的」页面。 ### 页面主题 「我的阅读」 ### 页面内容 顶部： - 用户头像 - 用户昵称 - 阅读等级 - 阅读统计 主要功能： - 我的阅读 - 借阅记录 - 阅读记录 - 我的收藏 - 我的书单 - 活动报名 辅助功能： - 阅读成就 - 阅读偏好 - 设置 - 帮助 ### 设计要求 这是一个功能型页面，而不是内容型页面。 重点测试 AI 能否在大量功能入口的情况下保持「之江书香」的设计语言。 不要设计成： - 电商会员中心 - SaaS Dashboard - 手机系统设置页 功能入口应该有清晰的信息层级。 避免过度使用 Card。 尽量使用已经学习到的「之江书香」信息组织方式。 目标： 让这个页面虽然功能密度较高，但仍然像同一个产品。
点击继续
AI 结合 Sketch 的能力边界
Design Co-Pilot
AI + MCP 默认情况下无法理解你的设计系统/设计规范；
AI + MCP 的最终效果取决于上下文质量、模型表现以及提示语的清晰度。
点击继续