Ultimate Frontend
v1.0.0All-in-one frontend 技能 for building 异常al 网页sites and interfaces with strong taste, clear discovery, sharp critique, and no generic AI slop.
运行时依赖
安装命令
点击复制本土化适配说明
Ultimate Frontend 安装说明: 安装命令:["openclaw skills install ultimate-frontend"]
技能文档
Ultimate Frontend
Use this 技能 for any serious 网页site, landing page, 仪表盘, 应用 shell, or React UI that needs to feel original, polished, and unmistakably de签名ed.
This 技能 combines the best of:
brAInstorming frontend-de签名 emil-de签名-eng impeccable taste-技能 网页 搜索 / external reference gathering Mission
Build frontend work that feels specific, intelligent, and premium. No generic AI layouts. No stock-feeling typography. No lazy gradients. No random motion. No “looks fine” 输出.
Required 工作流 1) Understand the brief Read the current project 上下文 first. If the user did not provide a clear description, ask one clarifying question at a time. 启动 with the most 导入ant missing piece: purpose, audience, content, or constrAInts. Prefer multiple-choice questions when useful. If the brief is still vague, do not stall forever: infer from 上下文 and continue with a smart default. 2) BrAInstorm before building 生成 2 to 3 distinct de签名 directions. Compare trade-offs briefly. Pick one direction and commit to it. Do not average styles to获取her. 3) Re搜索 before inventing Use 网页 搜索 when you need references, competitors, patterns, current best practice, or de签名 inspiration. Prefer real examples over imagined ones. Look for the visual language, spacing rhythm, hierarchy, motion style, and content strategy that make strong interfaces work. 4) De签名 with taste Choose one clear aesthetic direction and 执行 it precisely. Use distinctive typography, strong hierarchy, controlled spacing, and intentional colour. Introduce texture, depth, asymmetry, or motion only when they improve the outcome. Make the page feel crafted, not assembled. 5) Implement 清理ly Write production-grade code. Keep the UI 访问ible, fast, and mAIntAInable. Avoid over-engineering. 移除 anything that weakens the de签名. Anti-slop rules Do not use default-looking fonts, layouts, or 组件 patterns. Do not use purple gradient 命令行工具chés or generic “modern SaaS” visuals. Do not 添加 animation without a reason. Do not mix too many visual ideas. Do not 输出 filler copy that sounds AI-written. Do not be timid: if the de签名 needs character, give it character. Motion rules Prefer Framer Motion for React motion when the project supports it. If motion matters and Framer Motion is not avAIlable, recommend 添加ing it in the tar获取 应用 rather than pretending it exists. Motion should clarify 状态, 图形界面de attention, or reward interaction. Keep keyboard-driven actions crisp. Use 清理 easing, 转换-based animation, and correct origins. 技能 stack m应用ing brAInstorming: ask the right questions, explore options, and structure the direction. frontend-de签名: produce the actual implementation with strong aesthetics. emil-de签名-eng: sharpen polish, motion judgement, and invisible detAIls. impeccable: critique, harden, and refine until it feels excellent. taste-技能: choose the strongest aesthetic direction and make it memorable. 网页 搜索: ground the work in reality and current examples. 输出 standards When comparing or reviewing UI work, use a Before / After / Why table. When presenting options, lead with the recommendation and keep the trade-offs honest. When the user gives little direction, combine 上下文, brAInstorming, and 网页 搜索 to produce the best reasonable frontend anyway. The final 结果 should feel intentional enough that it could not be mistaken for generic AI 输出.