核心定位与能力边界
火一五前端设计技能（v3.0）是一款高保真原型生成工具，覆盖 Web UI、移动 H5、iOS/Android/HarmonyOS 原生风格 APP、微信/支付宝小程序全链路。其核心设计理念对标 Anthropic frontend-design，但完成本土化改写与多平台扩展，不拷贝官方内容。
六大美学流派（必选其一）
流派设计是该技能的差异化骨架：
- BOLD-MINIMAL 勇敢极简：Stripe/Linear 式大字号、大留白、双色系
- EDITORIAL 编辑杂志：衬线字体、纵向栅格、杂志版式
- BRUTALIST 野兽派：等宽字、粗黑线、打破网格的刻意粗糙
- RETRO-FUTURE 复古未来：像素字、CRT 光晕、80s 霓虹
- ORGANIC 有机自然：手绘感、暖色、不规则形状
- MOBILE-NATIVE 移动原生 ⭐：iOS HIG / Material Design 3 / HarmonyOS 三套平台规范，含小程序子集
15条反AI Slop硬红线
该技能以美学红线著称，违反任一直接判废：
- 字体红线：禁用 Inter/Roboto/Arial 等系统默认字体
- 色彩红线：禁用紫色渐变打白底、AI渐变模糊背景、默认暗黑+紫色主题
- 组件红线：禁用emoji当图标、圆角卡片+左侧彩色竖条、全局16px圆角
- 结构红线：禁用Hero+Features+CTA+Footer千篇一律骨架
- 移动端红线：禁直接套Vant/Ant Mobile默认皮、缺safe-area-inset适配
- 小程序红线：禁直接套WeUI/Vant Weapp默认皮、缺
<page-meta>+rpx适配
工作流：Junior → Full 两趟渲染
1. 阶段1·理解：复述需求、确认流派、列出硬约束
2. 阶段2·Junior Pass：从examples/<流派>/index.html起手，用占位文案+图片跑通结构栅格，诚实标注TODO
3. 阶段3·Full Pass：补真实文案、替换图片、微调字距动效
4. 阶段4·自验证 ⭐v3.0升级：Claude in Chrome MCP优先（list_connected_browsers/navigate/screenshot/read_console_messages/resize_window），降级到Playwright CLI，小程序场景下沉到微信开发者工具/支付宝IDE
5. 阶段5·评审：可选调用huo15-openclaw-design-critique五维打分
显著优点
- 意图明确的美学框架：六大流派强制选择，避免"骑墙"式设计
- 多平台原生覆盖：Web+H5+三端APP+双小程序，含平台专属适配规范
- 反AI Slop机制：15条硬红线有效过滤2023-2024年AI生成内容的视觉陈词滥调
- 自验证闭环：v3.0 MCP驱动浏览器截图，无需用户手动运行CLI
潜在局限
- 学习成本：用户需理解六大流派差异才能有效选择
- 小程序字体限制：平台禁止
@font-face加载web font，需退至PingFang SC/思源黑体 - MCP依赖：自验证最优路线依赖Claude in Chrome MCP环境配置
- 非通用设计工具：明确不覆盖PPT/Word/PDF，需切换至其他火一五技能
适合人群
- 需要高保真可运行原型的产品经理、独立开发者
- 厌倦AI生成"紫色渐变+圆角卡片"视觉疲劳的设计敏感用户
- 需同时输出Web+小程序双端方案的中小团队
- 追求明确设计意图、愿意在美学方向上"承诺极端"的创作者
常规风险
- 硬红线误判：新手可能因不熟悉设计规范而频繁触发红线判废
- 小程序审核风险：字体豁免说明中的base64字体子集方案需控制体积
- 多端适配成本：MOBILE-NATIVE流派的三平台+双小程序组合可能增加维护面
- MCP截图局限：动态内容/复杂交互的自动化验证仍需人工复核