Huo15 Openclaw Frontend Design

🎨 高保真原型·反AI范式·三端齐发

高保真前端设计技能,支持Web/APP/小程序三端原型生成,含6大美学流派、15条反AI Slop红线、Design Tokens系统化导出,强调极端方向与专业验证。

收藏
4.6k
安装
1.1k
版本
4.2.0
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心定位

火一五前端设计技能(v4.2)是一套本土化的高保真UI原型生成系统,覆盖Web、移动H5、APP(iOS/Android/HarmonyOS)及微信/支付宝/抖音三端小程序。设计理念对标Anthropic frontend-design,通过6大美学流派(BOLD-MINIMAL勇敢极简、EDITORIAL编辑杂志、BRUTALIST野兽派、RETRO-FUTURE复古未来、ORGANIC有机自然、MOBILE-NATIVE移动原生)强制极端方向选择,拒绝"骑墙"设计。

显著优点

1. 反AI Slop硬红线:15条明确禁用项(如禁Inter/Roboto默认字体、禁紫色渐变、禁emoji当图标、禁小程序套默认UI库皮等),从源头规避2023-2024年AI生成内容的视觉陈词滥调。
2. Design Tokens系统化:v4.0起8个流派各配扁平JSON token文件,支持jq一键导出CSS Variables、Tailwind Config、Figma Tokens Studio三格式,实现多产品主题复用。

3. 三端小程序全覆盖:v4.2补齐抖音小程序(ttml/ttss),与微信(wxml/wxss)、支付宝(axml/acss)形成95%同源的三端体系,机械替换前缀即可迁移。

4. 自验证工作流:Claude in Chrome MCP优先驱动浏览器截图,降级Playwright CLI/微信开发者工具/支付宝IDE/抖音开发者工具,确保真机效果。

5. 多流派并行对比:v4.1引入design-director联动,支持3流派Junior Pass并行生成、五维矩阵打分、用户人眼选型。

潜在局限

  • 技术门槛:Design Tokens导出依赖jq命令行,非技术用户需额外学习;MCP验证需Chrome环境配置。
  • 字体限制:小程序平台禁止@font-face加载Web字体,强制降级系统字体,与Web端设计一致性受限(已文档化豁免)。
  • 生态依赖:与huo15-openclaw-design-director/brand-protocol/design-critique等技能联动时,需用户明确触发词分工。

适合人群

  • 前端开发者需快速输出高保真可运行原型
  • 产品经理/设计师需规避AI生成痕迹的专业交付
  • 多平台团队需统一Design Tokens的中大型项目
  • 对"紫色渐变+圆角卡片"AI范式过敏的视觉洁癖者

常规风险

  • 红线误判:小程序场景下红线#1(禁系统字体)与平台限制冲突,需严格遵循字体豁免说明。
  • 安全区域遗漏:MOBILE-NATIVE流派及小程序易漏viewport-fit=cover<page-meta>配置,导致刘海/Home Indicator遮挡(红线#13/#15)。
  • 版本碎片化:三端小程序迁移虽95%同源,但支付宝端事件绑定语法(bindtaponTap)差异需人工复核。

Huo15 Openclaw Frontend Design 内容

examples文件夹
bold-minimal文件夹
brutalist文件夹
editorial文件夹
mini-program文件夹
alipay文件夹
pages文件夹
index文件夹
douyin文件夹
pages文件夹
index文件夹
wechat文件夹
pages文件夹
index文件夹
mobile-native文件夹
harmony文件夹
ios文件夹
md3文件夹
organic文件夹
retro-future文件夹
references文件夹
tokens文件夹
exporters文件夹
手动下载zip · 64.3 kB
index.htmltext/plain
请选择文件