Frontend Design Ultimate — 技能工具
v1.0.0[自动翻译] Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from ...
59· 1.3万·115 当前·121 累计
by @kesslerio运行时依赖
无特殊依赖
安装命令
点击复制官方npx clawhub@latest install frontend-design-ultimate
镜像加速npx clawhub@latest install frontend-design-ultimate --registry https://cn.longxiaskill.com 镜像可用
本土化适配说明
Frontend Design Ultimate — 技能工具 安装说明： 安装命令：["openclaw skills install frontend-design-ultimate"] 支持国内镜像加速，使用 --registry https://cn.longxiaskill.com 参数可加速下载
技能文档
仅需文本需求即可创建独特、生产级的静态网站。无需原型图、无需 Figma——只需描述你想要的，即可获得大胆、令人难忘的设计。
技术栈：React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion 输出：Vite（静态 HTML）或 Next.js（Vercel 就绪）
快速开始
"为 AI 写作工具构建一个 SaaS 落地页。深色主题，
编辑风格排版，微妙颗粒纹理。页面包括：带动画演示的英雄区、
功能网格、定价表、FAQ 手风琴、页脚。"
设计思维（先做这个）
在编写任何代码之前，先确定一个大胆的美学方向：
1. 理解上下文
- 目的：这个界面解决什么问题？谁在使用它？
- 受众：开发者工具？消费应用？企业级？创意机构？
- 约束：性能要求？无障碍需求？品牌指南？
2. 选择极端风格
选择一种并完全投入——平庸的设计注定失败：
| 风格 | 特点 |
|---|---|
| 极简主义 | 稀疏、单色、巨大字体、原始边缘 |
| 极繁主义 | 分层、密集、重叠元素、受控混乱 |
| 复古未来 | 霓虹点缀、几何形状、CRT 美学 |
| 有机自然 | 柔和曲线、大地色调、手绘元素 |
| 奢华精致 | 微妙动画、高级字体、克制配色 |
| 编辑杂志 | 强网格、戏剧性标题、留白即特色 |
| 野兽派 | 暴露结构、强烈对比、反设计 |
| 装饰艺术 | 金色点缀、对称、华丽图案 |
| 柔和粉彩 | 圆角、温和渐变、友好感 |
| 工业实用 | 功能性、等宽字体、数据密集 |
3. 定义难忘元素
什么是让人记住的唯一元素？英雄动画？字体处理？配色组合？不寻常的布局？
美学指南
字体 — 绝不平庸
禁止使用：Inter、Roboto、Arial、系统字体、Open Sans
推荐：独特、有性格的选择，提升设计格调。
| 用途 | 方案 |
|---|---|
| 展示/标题 | 大胆个性——Clash、Cabinet Grotesk、Space Grotesk |
| 正文 | 清晰可读——DM Sans、Plus Jakarta Sans |
| 代码/技术 | 等宽字体——JetBrains Mono、Fira Code |
功能特性
- 🎨 移动优先响应式设计
- ⚡ 单文件打包，零依赖
- 🌙 深色/浅色主题支持
- 📱 完整响应式布局
- 🎭 Framer Motion 动画
- 🧩 shadcn/ui 组件库
输出选项
Vite（纯静态）
npm run build
# 输出 dist/ 目录，可直接部署
Next.js（Vercel 部署）
npm run build
# Vercel 自动部署就绪
适用场景
- 落地页和营销网站
- 作品集展示
- 仪表盘界面
- SaaS 产品页面
- 任何静态 Web UI
最佳实践
- 明确描述需求：越具体，结果越好
- 选择一种风格：不要混合多种极端风格
- 关注核心功能：从最重要的页面开始
- 迭代优化：先生成基础版本，再逐步完善
注意事项
- 生成的代码需要 Node.js 环境运行
- 首次构建需要安装依赖
- 建议在生成后进行代码审查
- 复杂交互可能需要手动调整