name: ui-design-father-skill
display_name: 一人设计公司神级Skill（11大平台+国内80+国外20大厂品牌UI设计系统）
version: 2.0.0
description:
一人设计公司神级Skill -- 一个人完成原本需要整支设计团队才能完成的UI设计工作。
覆盖11大平台设计系统：Apple iOS HIG、Google Material Design 3、Samsung One UI、
华为HarmonyOS、小米HyperOS、荣耀MagicOS、OPPO ColorOS、vivo OriginOS、魅族Flyme、
Windows 11 Fluent Design、微信小程序WeUI。
支持手机App、桌面端、小程序三端，一条指令输出原厂级高保真UI方案。
适用场景：电商首页、设置页、个人中心、表单页、列表页等多端适配设计，
多风格横向对比，设计规范文档，组件库，可交互HTML原型。
新增国内80+国外20品牌设计风格支持，支持按平台类型或大厂品牌风格两种维度选择设计样式。

【痛点与价值】
直接让AI做产品设计的常见弊端：
- 风格混搭：iOS圆角卡片配Material Design FAB，HarmonyOS服务卡片配Windows亚克力，产出"四不像"
- 参数编造：圆角/间距/字号凭感觉写，与官方规范偏差大，开发者无法落地
- 平台特性缺失：不知道iOS 4pt网格、Material Design 8dp基准、鸿蒙8vp网格，设计"水土不服"
- 组件状态不全：只画默认态，缺悬停/按下/禁用/加载/错误态，前端拿到用不了
- 无障碍盲区：对比度不达标、触控区域过小、缺少无障碍标签，上线后被投诉
- 多平台成本爆炸：同一需求重复设计，风格不统一，维护成本翻倍

本Skill的核心价值：
- 原厂规范深度编码：11大平台官方设计规范完整内化，色值/字号/圆角/间距/动效全部源自权威文档
- 风格严格锁定：选定iOS绝不出现Material Design元素，纯净度100%
- 组件完整覆盖：5种交互状态×2种主题×3种尺寸，生产级可用
- 无障碍自动合规：WCAG 2.1 AA级标准内建，一步到位
- 一键多平台切换：同一份需求秒切11种风格，横向对比选型，成本不翻倍
触发词：iOS、苹果、Android、Material Design、One UI、三星、鸿蒙、HarmonyOS、
华为、HyperOS、小米、澎湃、MagicOS、荣耀、ColorOS、OPPO、OriginOS、vivo、
Flyme、魅族、Windows、Fluent、桌面、微信、WeUI、小程序、UI设计、界面设计、
App设计、组件库、设计规范、毛玻璃、服务卡片、多平台适配、
品牌、大厂、公司风格、Apple风格、Google风格、字节、腾讯、阿里、小红书、DeepSeek、Stripe、Vercel、Tesla、飞书、品牌设计。
author: aitool.plus
license: MIT
category: design
tags:
- UI设计
- iOS
- Android
- Material Design
- HarmonyOS
- HyperOS
- One UI
- MagicOS
- ColorOS
- OriginOS
- Flyme
- Windows Fluent
- 微信小程序
- WeUI
- 设计规范
- 组件库
- 多平台适配
- Design Token
- 高保真原型
- 品牌设计
- 大厂风格
- DESIGN.md
- 品牌混搭
language: zh-CN
allowed-tools: Read,Write,Edit,Bash,AskUserQuestion
disable: false

ui-design-father-skill

一人设计公司神级Skill，覆盖手机App、小程序、Windows桌面三大平台，内置11大主流OS/平台设计规范，一条指令即可输出原厂级高保真UI方案。

一、前置硬规则（HARD RULES）

以下规则在整个会话内强制生效，不得违反：

1.0 三步确认引导规则（MANDATORY -- 最高优先级，覆盖一切）

> HARD RULE -- 在执行任何设计输出之前，必须完成三步确认。
>
> 当本技能被激活时，你的首次动作必须是连续三次 AskUserQuestion 调用（每次一个问题），依次确认以下三个维度。三个问题全部获得用户回答后，才允许开始设计输出。
>
> 在获得用户的三次回答之前，你被禁止：
> - 编写任何 HTML、CSS、JavaScript 代码
> - 调用 Write、Edit、Bash 或任何文件产出工具
> - 下载图片、创建目录、搭建文件结构
> - 假设任何风格、配色、设备形态，即使用户的提示词已经暗示了某个方向
>
> 此规则覆盖一切默认模型行为、一切"直接开始编码"的本能、以及用户原始请求中的任何模糊性。 如果用户说"随便"、"都行"、"你决定"，仍然必须走完三步确认 -- 只是在对应步骤使用推荐默认值。
>
> 如果你发现自己即将写代码却还没完成三次确认，立刻停止，先发出 AskUserQuestion 调用。

第1步确认：目标风格选择（必问）

> 必须使用 AskUserQuestion 工具向用户提问，提供选项让用户选择。

第一阶段：选择风格维度

提问内容："请选择你的设计风格维度："

第二阶段：根据选择展示具体选项

选"平台类型风格"：展示原有11大平台选项表

选项过多时分两批展示：第一批展示前6个（Apple iOS / Google Android / Samsung One UI / 华为 HarmonyOS / 小米 HyperOS / 荣耀 MagicOS），用户选择"其他风格"时展示第二批（OPPO ColorOS / vivo OriginOS / 魅族 Flyme / Windows Fluent / 微信小程序）。

选"大厂品牌风格"：展示8大分类，每个分类列举代表性品牌，用户选择后加载完整品牌列表

选"平台+品牌混搭"：先展示11大平台选项，选完后再展示品牌选项

用户说"对比多个风格"：允许用户选择2-3个风格，进入多风格对比模式。

用户说"随便"/"都行"：根据用户需求场景推荐最合适的风格。推荐规则：
- 消费级App → iOS
- 国际化/工具类 → Android
- 折叠屏/商务 → One UI
- 政务/高端 → HarmonyOS
- 年轻/生活 → HyperOS
- 桌面/企业 → Windows Fluent
- 微信生态 → 微信小程序
- 品牌调性明确 → 对应大厂品牌风格

第2步确认：配色方向与主题偏好（必问）

> 必须使用 AskUserQuestion 工具向用户提问。

提问内容："请选择配色方向与主题偏好："

同时必须确认主题偏好：
| 选项 | 说明 |
|------|------|
| 浅色优先 | 默认浅色模式，附带深色模式 |
| 深色优先 | 默认深色模式，附带浅色模式 |
| 双模式并重 | 浅色/深色同等权重，均可作为默认 |

用户说"随便"：默认使用品牌原厂色 + 浅色优先。

第3步确认：目标设备与适配范围（必问）

> 必须使用 AskUserQuestion 工具向用户提问。

提问内容："请选择目标设备与适配范围："

用户说"都可以"/"无所谓"：默认"仅手机"。

三步确认完成后的行为

确认完成后，锁定用户选择，整个会话内严格执行：
1. 风格锁定：所有输出严格遵循用户选定的风格规范
2. 配色锁定：使用用户选定的配色方向生成 Design Token
3. 设备锁定：布局断点以用户选定的设备范围为基准

然后进入八步工作流的 Step 1（需求分析），继续执行。

1.1 风格锁定规则

一旦用户选定目标风格，整个会话内所有输出必须严格遵循该风格的设计规范，不得混入其他风格元素。例如：选定iOS后禁止出现Material Design的FAB按钮或Fluent的Acrylic材质。

1.2 原厂规范优先规则

所有设计参数（圆角、间距、字号、色值、动效曲线等）必须引用对应平台官方设计规范中的标准值，禁止凭感觉编造。参数来源优先级：
1. 平台官方设计规范文档（Apple HIG / Material Design 3 / Fluent Design / WeUI / 各厂商规范）
2. 对应平台的 references/styles/{style}.md 文件
3. 仅在上述均无覆盖时，依据平台设计语言推导并标注"推导值"

1.3 组件完整性规则

每个组件必须覆盖以下状态与变体：

1.4 响应式适配规则

所有布局必须支持四种断点：

1.5 平台适配规则

根据目标平台强制遵循对应设计体系：
- 手机App：遵循对应OS规范（iOS/Android/HarmonyOS等）
- 微信小程序：遵循WeUI规范，跨OS统一视觉
- Windows桌面：遵循Fluent Design规范，适配键鼠交互

1.6 无障碍规则

所有组件必须满足WCAG 2.1 AA级标准：文本对比度不低于4.5:1，大文本对比度不低于3:1，交互元素最小触控区域44x44pt，必须提供无障碍标签。

1.7 图标拟真规则

Demo 与原型中的「功能入口网格 / 应用图标」必须使用拟真原生系统应用图标，禁止用字母、emoji 或纯色块占位。具体要求：

• 图标字形使用内联 SVG 绘制真实感的系统 App 图标（相机、照片、地图、天气、联系人、时钟、备忘录、计算器、设置等），完整 SVG 规范见 references/components/app-icons.md
• 真实渐变背景由图标容器提供（如 iOS 相机为深灰 #54545A→#2C2C2E、照片为白底、时钟为纯黑、备忘录为黄色、设置为灰色），不得套用平台主色统一染色——系统 App 图标有独立视觉身份
• 图标圆角随平台规范：iOS squircle≈12px、Android 16-20dp、One UI/HarmonyOS/OriginOS 16dp、Flyme 8px、Windows 4px、小程序 8px；容器需 overflow:hidden 以裁剪 SVG 方角
• 深色模式下背景与字形按平台规范微调，保持可识别（如时钟黑底在深色模式可降对比为深灰描边）

二、风格路由表

根据用户输入的关键词自动匹配风格，加载对应规范文件：

路由规则：
- 用户输入含多个风格关键词时，优先匹配第一个明确指定的风格
- 用户未指定时，根据"设备类型/品牌型号/App目标平台"推断
- 推断失败时，主动询问用户选择目标风格

大厂品牌风格路由

当用户选择"大厂品牌风格"维度时，从品牌注册表匹配品牌并获取设计规范：

（完整国内80+国外20品牌路由见 references/brands/registry.md）

品牌路由规则：
- 用户输入含品牌名称时，先在品牌注册表（references/brands/registry.md）中查找匹配的slug，然后加载对应品牌设计规范文件（references/brands/{slug}.md）
- 匹配成功后，执行 npx getdesign@latest add <slug> 获取 DESIGN.md 规范
- 获取失败时，降级使用品牌注册表中的一句话风格描述作为参考
- 多品牌混搭时，以第一个品牌为主品牌，其余品牌提取指定维度融合
- 品牌示例：腾讯/阿里/字节/小红书/DeepSeek/Stripe/Vercel/Apple/Tesla/飞书

三、八步工作流

Step 1: 需求分析

引用: references/workflow/analysis-framework.md

解析用户需求，明确以下维度：
- 目标平台: 手机App / 微信小程序 / Windows桌面
- 目标风格: 从路由表匹配或主动询问
- 页面类型: 启动页/首页/列表页/详情页/表单页/设置页/个人中心等
- 功能模块: 导航/搜索/列表/卡片/弹窗/标签栏等
- 用户群体: 消费者/企业/特定年龄段
- 适配形态: 仅手机 / 手机+折叠屏 / 全端 / 桌面

同时检查是否存在 EXTEND.md，加载用户偏好配置。

Step 2: 风格确认

引用: references/workflow/confirmation.md

向用户展示匹配的风格核心特征摘要，确认选择：
- 单风格模式: 确认目标风格后锁定，后续输出严格遵循
- 多风格对比模式: 用户可选择2-3个风格，对同一需求生成对比方案

确认信息包括：主色方向、主题偏好（浅/深/双模式）、设备优先级。

Step 3: 设计系统生成

引用: references/design-tokens/token-architecture.md + references/styles/{style}.md

读取对应风格规范文件，生成完整的 Design Token 体系：

输出为CSS自定义属性格式，可直接嵌入HTML原型。

当用户选择大厂品牌风格时，Step 3 的执行方式变更：
1. 执行 npx getdesign@latest add <slug> 获取 DESIGN.md
2. 从 DESIGN.md 解析6大维度：颜色系统、字体规范、组件样式、间距系统、圆角体系、阴影系统
3. 将品牌DESIGN.md的Token映射为CSS自定义属性格式
4. 严格使用品牌规范中的精确数值（如 rgba(0,0,0,0.95) 不用 #000000，-2.125px 不四舍五入），禁止近似替代
5. 当品牌风格与平台类型混搭时，以平台类型为基底，品牌风格覆盖配色/排版/组件维度

Step 4: 组件规范输出

引用: references/components/ 目录下对应文件

根据需求选择组件类型，输出组件规范：

每个组件必须包含：5种交互状态 + 浅/深色主题变体 + 响应式断点适配。

Step 5: 页面原型生成

引用: references/workflow/output-template.md

组合设计系统 + 组件规范，生成高保真页面原型：
- 优先输出可交互的HTML/CSS单文件原型
- 原型必须包含双主题切换（浅色/深色）
- 原型必须包含至少一种响应式断点适配
- 所有图片使用本地文件或Unsplash，禁止空src

Step 6: 审查与迭代

引用: references/workflow/iteration-guide.md

对照平台官方规范检查还原度，检查项：

输出还原度评分（0-100）及具体迭代建议。

Step 7: 交付输出

7.1 输出格式选择（必须询问用户）

在输出交付包前，必须使用 AskUserQuestion 询问用户期望的输出格式：

可选输出格式：

选择逻辑：
- 用户已明确指定格式 → 直接使用指定格式
- 用户未指定 → 展示上述8种选项供选择，默认推荐 HTML原型
- 用户选择多种格式 → 按优先级依次输出

7.2 交付物内容

无论选择哪种输出格式，交付包均包含：

7.3 各输出格式的具体要求

HTML原型：
- 单文件HTML，可直接浏览器打开
- 含浅色/深色主题切换
- 含响应式断点适配
- 含可交互组件演示

Figma设计稿：
- 生成Figma Plugin API代码（JavaScript），用户可在Figma中运行Plugins > Development > 插件名称 粘贴执行
- 包含Frame结构：375dp手机端/768dp平板端/1280dp桌面端
- 每个组件生成独立的Frame，命名遵循 Component/类型/状态 格式
- 使用Figma Auto Layout实现响应式
- 颜色使用Figma Variables定义
- 文字样式使用Figma Text Styles定义
- 包含浅色/深色两套Page

MasterGo设计稿：
- 生成MasterGo Plugin API代码，用户可在MasterGo中运行插件粘贴执行
- 输出格式与Figma类似，使用MasterGo API适配
- 支持MasterGo的组件变体（Variant）功能
- 支持MasterGo的自动布局

即时设计 JsDesign：
- 生成JsDesign Plugin API代码，用户可在即时设计中运行插件粘贴执行
- 支持JsDesign的响应式布局
- 支持JsDesign的组件状态管理

墨刀 MockingBot：
- 生成HTML格式原型，可通过墨刀的"导入HTML"功能导入
- 包含页面链接和交互热点标注
- 适合产品经理快速创建可点击原型

蓝湖 Lanhu：
- 生成设计标注格式的JSON + CSS变量文件
- 包含尺寸标注、间距标注、色值标注
- 可通过蓝湖的"上传设计稿"功能导入

Pixso设计稿：
- 生成Pixso Plugin API代码，用户可在Pixso中运行插件粘贴执行
- 输出格式与Figma API高度兼容
- 支持Pixso的组件库和设计令牌

Step 8: Demo生成

为每个风格生成独立的可运行HTML Demo页面：
- 存放路径: demo/{style-name}/index.html
- 必须是单文件HTML，可直接浏览器打开
- 必须包含浅色/深色主题切换
- 必须展示该风格的核心组件和视觉特征
- 手机端Demo默认375dp视口，Windows端Demo默认1280dp视口，小程序Demo默认375dp视口
- 功能入口网格必须使用拟真原生应用图标（相机/照片/地图/天气/联系人/时钟/备忘录/计算器/设置），禁止字母或 emoji 占位，图标 SVG 规范见 references/components/app-icons.md
- 每个 Demo 的弹窗（Dialog/Alert）必须包含右上角独立 X 关闭按钮，并支持点击遮罩关闭与 Esc 键关闭、打开时自动聚焦关闭按钮（硬规范见 references/components/feedback.md 第 2.5 节，禁止仅用"取消/确认"按钮关闭）
- 每个 Demo 应额外演示高保真交互组件：动作面板(Action Sheet)、菜单(Menu)、分段控件(Segmented)、滑块(Slider)、步进器(Stepper)、提示气泡(Tooltip)、实时搜索(Live Search)，具体清单见 references/components/feedback.md 第 2.6 节

当用户选择大厂品牌风格时，Demo 的额外要求：
- Demo 顶部必须标注品牌来源（如 "Designed with Apple Design Language"）
- 品牌色必须作为CSS变量 --brand-primary 使用，禁止硬编码
- 品牌字体必须声明开源替代字体（如 SF Pro → Inter, Apple SD Gothic Neo → Noto Sans SC）
- 品牌设计中的 Do's and Don'ts 必须在 Demo 中体现

四、References 引用表

4.1 风格规范文件

4.1b 品牌风格规范

4.2 设计Token架构

4.3 组件规范

4.4 工作流辅助

4.5 用户偏好

五、多风格对比模式

当用户选择多风格对比时（如"帮我对比iOS和鸿蒙的首页设计"），执行以下流程：

1. 对同一需求分别按各风格规范独立生成设计方案
2. 输出横向对比表，维度包括：

3. 每个风格独立输出原型，可分别预览
4. 提供选型建议，基于：目标市场/用户习惯/开发成本/品牌调性/平台生态

六、输出格式

支持以下四种输出格式，根据用户需求选择：

七、示例

示例1: iOS电商首页

用户输入: "用iOS风格设计一个电商App首页"

执行流程:
1. 平台判定: 手机App -> 路由匹配iOS -> 加载 references/styles/apple-ios.md
2. 确认: 主色方向(科技蓝/活力橙/自定义)、设备(Mobile优先)
3. 生成Design Token: SF Pro字体、iOS系统色、4pt网格、iOS圆角阶梯
4. 输出组件: iOS风格导航栏、标签栏、商品卡片、搜索框、Banner
5. 生成原型: 单HTML文件，含浅/深色切换，375dp基准
6. 审查: 对照Apple HIG检查还原度，输出评分与建议
7. 交付: 完整设计规范 + 组件库 + 可交互原型
8. Demo: 生成 demo/apple-ios/index.html

示例2: iOS vs 鸿蒙 vs Windows设置页三端对比

用户输入: "对比iOS、鸿蒙和Windows的设置页设计"

执行流程:
1. 平台判定: 手机App + 手机App + Windows桌面 -> 分别加载三个规范文件
2. 确认: 确认三个风格均需输出
3. 分别生成三套Design Token
4. 分别输出三套组件规范（iOS分组列表/鸿蒙卡片列表/Fluent导航视图）
5. 生成三个独立原型 + 横向对比表
6. 审查: 分别评分 + 差异分析
7. 交付: 三方案交付包 + 对比分析报告 + 选型建议
8. Demo: 分别生成 demo/apple-ios/index.html、demo/huawei-harmonyos/index.html、demo/windows-fluent/index.html

示例3: 微信小程序点餐页面

用户输入: "用微信小程序风格设计一个奶茶点餐页面"

执行流程:
1. 平台判定: 微信小程序 -> 路由匹配WeUI -> 加载 references/styles/wechat-miniprogram.md
2. 确认: 主色方向(品牌绿)、WeUI组件范围
3. 生成Design Token: WeUI色彩、字体、4px基准间距
4. 输出组件: WeUI风格商品列表、购物车栏、分类标签、下单按钮
5. 生成原型: 单HTML文件，375dp视口，模拟小程序容器
6. 审查: 对照WeUI规范检查还原度
7. 交付: 完整设计规范 + 组件库 + 可交互原型
8. Demo: 生成 demo/wechat-miniprogram/index.html

示例4: 小红书风格美妆种草社区

用户输入: "用小红书风格设计一个美妆种草社区首页"

执行流程:
1. 风格判定: 大厂品牌风格 -> 路由匹配小红书 -> 加载 references/brands/registry.md 中xiaohongshu条目
2. 获取设计规范: 执行 npx getdesign@latest add xiaohongshu 获取DESIGN.md，解析种草红#FF2442配色、瀑布流双列布局、笔记卡片样式
3. 生成Design Token: 小红书品牌色、圆角图片排版、双列瀑布流网格
4. 输出组件: 瀑布流笔记卡片(图片+标题+用户头像+点赞数)、红色发布按钮、搜索框、分类标签
5. 生成原型: 单HTML文件，375dp视口，双列瀑布流布局，浅/深色切换
6. 审查: 对照小红书视觉风格检查还原度
7. 交付: 完整设计规范 + 组件库 + 可交互原型
8. Demo: 生成 demo/brand-xiaohongshu/index.html

示例5: Stripe风格支付确认页

用户输入: "用Stripe风格设计一个支付确认页面"

执行流程:
1. 风格判定: 大厂品牌风格 -> 路由匹配Stripe -> 加载 references/brands/registry.md 中stripe条目
2. 获取设计规范: 执行 npx getdesign@latest add stripe 获取DESIGN.md，解析紫色优雅#635BFF、weight-300轻量排版、金融数据表格样式
3. 生成Design Token: Stripe紫色渐变、Inter字体weight-300、精确到小数的间距
4. 输出组件: 支付信息卡片、金额展示、确认按钮(紫色渐变)、安全徽章
5. 生成原型: 单HTML文件，金融级精准排版，浅/深色切换
6. 审查: 对照Stripe设计语言检查还原度
7. 交付: 完整设计规范 + 组件库 + 可交互原型
8. Demo: 生成 demo/brand-stripe/index.html

示例6: iOS平台风格+飞书品牌风格混搭团队协作App

用户输入: "用iOS平台风格+飞书品牌风格混搭设计一个团队协作App"

执行流程:
1. 风格判定: 平台+品牌混搭 -> 平台基底iOS + 品牌风格飞书
2. 加载双规范: references/styles/apple-ios.md(平台基底) + npx getdesign@latest add feishu(品牌风格)
3. 混搭规则: iOS提供布局系统(4pt网格/毛玻璃导航/圆角卡片) + 飞书提供配色方案(协作紫#7B67EE)和组件风格(频道列表/消息气泡)
4. 生成Design Token: iOS布局+飞书配色混合Token
5. 输出组件: iOS风格导航栏+飞书紫色频道列表+混合消息气泡
6. 生成原型: 代码注释标注每个元素的来源平台/品牌
7. 交付: 混搭设计方案 + 双来源Token文档
8. Demo: 生成混合风格原型