核心用法
UI/UX Design Mockup Skill 是一款面向 AI Agent 的专业界面设计技能，通过将产品需求转化为技术设计规范，生成高保真原型、线框图及完整设计系统。该技能采用 Atomic Design 方法论，从原子级组件（按钮、输入框）到有机体级模块（导航栏、卡片组）逐层构建，确保设计系统的内在一致性。
核心流程分为三步：首先定义产品简报（功能列表与目标受众），然后通过 generate-mockup.sh 脚本扩展需求，最终调用底层图像生成引擎输出设计稿。技能内置五大意图映射模板——企业 SaaS（数据密度优先）、消费级应用（玻璃拟态视觉）、电商（转化导向）、作品集（身份表达）、工具类（触觉反馈），覆盖主流数字产品场景。
显著优点
1. 系统化设计思维：强制应用 8pt 网格系统、WCAG 2.1 高对比度色板、几何无衬线字体等设计令牌，避免「凭感觉」设计
2. 平台自适应：自动适配 iOS/Android 移动端与 Web 端响应式断点
3. 启发式内置：集成 Nielsen 十大可用性原则作为约束条件
4. 提示词工程优化：通过「NO SKEUOMORPHISM」等强制规则，规避生成「照片级屏幕截图」而非「设计稿」的常见模型幻觉
潜在局限与风险
- 文本渲染依赖外部模型：明确标注需使用 Flux 模型处理可读标题，小字号正文仍需占位文本
- 无法替代人类设计师的创意决策：技能定位为「设计规范生成器」，色彩情绪、品牌调性仍需人工把控
- 单页一致性约束：强制要求同一页面内原子组件风格统一，可能限制探索性设计的多样性
- 设备真实感禁令：明确禁止生成手持手机、桌面场景等「情境图」，输出为纯 UI 交付物
适合人群
- 产品经理：快速验证功能布局与信息架构
- 独立开发者：无设计背景时获取可直接开发的参考稿
- 设计团队：作为设计系统文档的自动化初稿生成工具
- AI 工作流搭建者：接入自动化产品设计管线
常规风险提示
- 版权与原创性：生成设计可能无意复刻现有产品界面，商用需人工审查
- 可访问性合规：虽内置 WCAG 约束，但色盲模拟、屏幕阅读器测试仍需专业验证
- 技术债务：设计令牌（spacing tokens 等）与实际代码实现可能存在偏差，需设计-开发对齐