[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F1VE39GGTAFW84Z9R3A6AK":3,"skill-same:01M6F1VE39GGTAFW84Z9R3A6AK":68},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":39,"commitSha":40,"skillDirectory":41,"forksCount":42,"repositoryHtmlUrl":43,"repositoryHomepageUrl":44,"ownerHtmlUrl":45,"ownerBlogUrl":6,"ownerDescription":46,"updatedAt":47,"install":48,"resources":61},"01M6F1VE39GGTAFW84Z9R3A6AK","ui-design",null,"UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过\"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调\"的结构化流程，减少沟通偏差，避免浪费 token。","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fyunshu0909\u002Fui-design\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33],"design","ui","ui design","协作","token","2026-11-10 10:12:30",false,"---\nname: ui-design\ndescription: UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过\"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调\"的结构化流程，减少沟通偏差，避免浪费 token。\n---\n\n用户要求修改页面的 UI 样式（布局、间距、颜色、组件搭配等视觉层面的调整）。通过结构化的协作流程完成修改，确保每一步都对齐目标，不做无效猜测。\n\n## 核心原则\n\n- **不猜，不抢跑** — 没有对齐目标之前，绝不动代码\n- **截图是第一语言** — 主动要求用户提供截图，用截图定位问题\n- **ASCII 画方案** — 布局方案用 ASCII 画出来，文字描述容易产生歧义\n- **每次只改一个点** — 不要一次改多个地方，逐步逼近目标\n\n## 工作流程\n\n### 第 1 步：定位问题\n\n用户说想改某个地方时，先做两件事：\n\n1. **读代码** — 读取相关文件，理解当前实现\n2. **描述现状** — 用 ASCII 画出当前布局，向用户确认：\"我看到的是这样，对吗？\"\n\n```\n示例：\n┌─────────────────────────────────────────────┐\n│ ? 标题                                [?] │\n│ 副标题说明文字                               │\n│ ? [搜索框...                             ] │\n├─────────────────────────────────────────────┤\n```\n\n**禁止**：跳过这一步直接问\"你想改成什么样\"。必须先让用户确认你理解了现状。\n\n### 第 2 步：给出方案\n\n提供 2-3 个方案，每个方案包含：\n- **ASCII 布局图** — 画出改完的样子\n- **一句话说明** — 这个方案的核心思路是什么\n\n```\n示例：\n方案 A：搜索和刷新放同一行\n┌──────────────────────────────────────────┐\n│ ? [搜索框...                ]    [?]  │\n└──────────────────────────────────────────┘\n\n方案 B：刷新挪到标题行\n┌──────────────────────────────────────────┐\n│ ? 标题                           [?]  │\n│ ? [搜索框...                         ] │\n└──────────────────────────────────────────┘\n```\n\n**禁止**：\n- 只给一个方案（用户没有选择余地）\n- 给超过 3 个方案（选择困难）\n- 方案只有文字没有 ASCII 图\n\n### 第 3 步：等用户选择\n\n用户选完方案后，才开始写代码。\n\n**禁止**：用户还没选就开始改代码。\n\n### 第 4 步：改代码\n\n执行最小改动，只改用户选定方案涉及的部分。\n\n**禁止**：顺手改其他地方、优化代码结构、加注释。\n\n### 第 5 步：微调\n\n改完后让用户看效果。用户可能会提出微调：\n- \"加个边框\"\n- \"颜色太深\"\n- \"间距再大一点\"\n\n微调是**具体的、小的修改**，直接执行，不需要再走方案选择流程。\n\n如果用户的反馈不够具体（比如\"感觉不对\"），主动追问：\n- \"是大小的问题、颜色的问题、还是位置的问题？\"\n- \"和旁边哪个元素搭配起来不协调？\"\n\n## 沟通规范\n\n### 用户应该提供的\n\n| 信息 | 说明 |\n|---|---|\n| 截图 | 标注出想改的区域 |\n| 问题描述 | \"这两个元素搭配不协调\"、\"间距太大\" |\n| 选择方案 | 从给出的方案中选一个 |\n\n### AI 应该做的\n\n| 阶段 | 输出 |\n|---|---|\n| 定位 | ASCII 现状图 |\n| 方案 | 2-3 个 ASCII 方案图 + 一句话说明 |\n| 改码 | 最小改动，只改选定方案 |\n| 微调 | 直接执行具体调整 |\n\n### AI 绝不应该做的\n\n- 用户说\"改布局\"就直接猜想法然后改代码\n- 一次给出大段代码重构\n- 微调阶段还在给多个方案让用户选\n- 顺手改用户没提到的地方\n","用户要求修改页面的 UI 样式（布局、间距、颜色、组件搭配等视觉层面的调整）。通过结构化的协作流程完成修改，确保每一步都对齐目标，不做无效猜测。\n\n## 核心原则\n\n- **不猜，不抢跑** — 没有对齐目标之前，绝不动代码\n- **截图是第一语言** — 主动要求用户提供截图，用截图定位问题\n- **ASCII 画方案** — 布局方案用 ASCII 画出来，文字描述容易产生歧义\n- **每次只改一个点** — 不要一次改多个地方，逐步逼近目标\n\n## 工作流程\n\n### 第 1 步：定位问题\n\n用户说想改某个地方时，先做两件事：\n\n1. **读代码** — 读取相关文件，理解当前实现\n2. **描述现状** — 用 ASCII 画出当前布局，向用户确认：\"我看到的是这样，对吗？\"\n\n```\n示例：\n┌─────────────────────────────────────────────┐\n│ ? 标题                                [?] │\n│ 副标题说明文字                               │\n│ ? [搜索框...                             ] │\n├─────────────────────────────────────────────┤\n```\n\n**禁止**：跳过这一步直接问\"你想改成什么样\"。必须先让用户确认你理解了现状。\n\n### 第 2 步：给出方案\n\n提供 2-3 个方案，每个方案包含：\n- **ASCII 布局图** — 画出改完的样子\n- **一句话说明** — 这个方案的核心思路是什么\n\n```\n示例：\n方案 A：搜索和刷新放同一行\n┌──────────────────────────────────────────┐\n│ ? [搜索框...                ]    [?]  │\n└──────────────────────────────────────────┘\n\n方案 B：刷新挪到标题行\n┌──────────────────────────────────────────┐\n│ ? 标题                           [?]  │\n│ ? [搜索框...                         ] │\n└──────────────────────────────────────────┘\n```\n\n**禁止**：\n- 只给一个方案（用户没有选择余地）\n- 给超过 3 个方案（选择困难）\n- 方案只有文字没有 ASCII 图\n\n### 第 3 步：等用户选择\n\n用户选完方案后，才开始写代码。\n\n**禁止**：用户还没选就开始改代码。\n\n### 第 4 步：改代码\n\n执行最小改动，只改用户选定方案涉及的部分。\n\n**禁止**：顺手改其他地方、优化代码结构、加注释。\n\n### 第 5 步：微调\n\n改完后让用户看效果。用户可能会提出微调：\n- \"加个边框\"\n- \"颜色太深\"\n- \"间距再大一点\"\n\n微调是**具体的、小的修改**，直接执行，不需要再走方案选择流程。\n\n如果用户的反馈不够具体（比如\"感觉不对\"），主动追问：\n- \"是大小的问题、颜色的问题、还是位置的问题？\"\n- \"和旁边哪个元素搭配起来不协调？\"\n\n## 沟通规范\n\n### 用户应该提供的\n\n| 信息 | 说明 |\n|---|---|\n| 截图 | 标注出想改的区域 |\n| 问题描述 | \"这两个元素搭配不协调\"、\"间距太大\" |\n| 选择方案 | 从给出的方案中选一个 |\n\n### AI 应该做的\n\n| 阶段 | 输出 |\n|---|---|\n| 定位 | ASCII 现状图 |\n| 方案 | 2-3 个 ASCII 方案图 + 一句话说明 |\n| 改码 | 最小改动，只改选定方案 |\n| 微调 | 直接执行具体调整 |\n\n### AI 绝不应该做的\n\n- 用户说\"改布局\"就直接猜想法然后改代码\n- 一次给出大段代码重构\n- 微调阶段还在给多个方案让用户选\n- 顺手改用户没提到的地方\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fyunshu0909\u002Fui-design",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill ui-design",{"tool":54,"command":55},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill ui-design",{"tool":57,"command":58},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill ui-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fyunshu0909\u002Fui-design\u002FSKILL.md",true,[62],{"path":63,"resourceType":64,"resourceTypeDesc":65,"sizeBytes":66,"sourceHtmlUrl":67},"skill-report.json","REFERENCE","参考文档",10912,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fyunshu0909\u002Fui-design\u002Fskill-report.json",[69,81,91,100,106,113],{"skillNo":70,"name":71,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":77,"publishedAt":34},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[78,79,80],"model","model hierarchy","model hierarchy skill",{"skillNo":82,"name":83,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":87,"publishedAt":34},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[86],{"categoryNo":75,"categoryName":76,"taxonomyType":21,"taxonomyTypeDesc":22},[88,89,90],"MCP","zoom","zoom mcp",{"skillNo":92,"name":93,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":34},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[97,98,99,89],"sdk","zoom apps sdk","apps",{"skillNo":101,"name":102,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":105,"publishedAt":34},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[102],{"skillNo":107,"name":108,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":112,"publishedAt":34},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[111],{"categoryNo":75,"categoryName":76,"taxonomyType":21,"taxonomyTypeDesc":22},[108],{"skillNo":114,"name":115,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":34},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[115]]