Huo15 Openclaw Frontend Design

🎨 高保真多端原型 · 反 AI 同质化设计系统

高保真多端 UI 原型生成技能,覆盖 Web/APP/H5/小程序,6 大美学流派 + 15 条反 AI Slop 红线 + design tokens 系统化输出。

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

使用说明

核心能力

火一五前端设计技能是一套面向中文开发场景的高保真 UI 原型生成框架,支持 Web、移动 H5、iOS/Android/HarmonyOS APP 风格原型、微信/支付宝小程序等多端输出。其核心方法论采用「6 大美学流派 + 15 条硬红线」的双轨制设计:流派提供极端方向锚定(勇敢极简、编辑杂志、野兽派、复古未来、有机自然、移动原生),红线则强制规避 AI 生成内容的同质化陷阱(禁用系统默认字体、紫色渐变、emoji 图标、玻璃形态滥用等)。

工作流设计体现专业工程思维:Junior Pass → Full Pass 两趟渲染机制,要求从 examples/ starter 起手而非空白起步,确保结构完整;阶段 3.5 的 design tokens 系统化(v4.0 核心升级)通过 8 份流派 JSON 配置 + jq 三导出器(CSS variables / Tailwind config / Figma Tokens Studio),实现设计系统在多产品间的复用。

自验证体系(v3.0)优先采用 Claude in Chrome MCP 直接驱动浏览器截图,降级路线覆盖 Playwright CLI、微信开发者工具、支付宝 IDE,形成多端兼容性保障。

显著优势

  • 本土化深度:针对小程序平台强制禁用 @font-face 的字体豁免策略、鸿蒙设计规范纳入、rpx/safe-area-inset 适配等细节体现真机场景理解
  • 反模式刚性:15 条红线直接判废机制,强制跳出 Tailwind/shadcn 默认范式陷阱
  • 工程可落地:tokens 三导出器、Junior/Full 分阶段交付、MCP 优先的验证链路,弥合设计与开发断层

局限与风险

  • 学习成本:流派选择需用户具备基础设计判断力,纯技术背景用户可能困惑于「极端方向」决策
  • 小程序生态约束:字体豁免本质是平台限制的妥协,中文字体差异化受限
  • MCP 依赖:自验证优先路线依赖 Claude in Chrome 环境可用性,降级 CLI 需用户本地 Node 环境

适合人群

  • 需要快速产出高保真原型的前端开发者、独立开发者
  • 追求品牌差异化、厌倦 AI 同质化输出的设计-技术交叉角色
  • 微信小程序/支付宝小程序/HarmonyOS 多平台覆盖的中小企业技术团队

Huo15 Openclaw Frontend Design 内容

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