前端设计终极版

从纯文本需求生成生产级静态网站模板（React + Tailwind + shadcn/ui），支持 Vite 或 Next.js 工作流，适用于落地页、作品集和仪表盘。

triggers:生成落地页从文本创建网站vite 模板next.js 站点shadcn ui响应式设计

What it does

前端设计终极版技能能根据自然语言的产品/页面描述，生成一套可用的前端静态站点模板（React + TypeScript + Tailwind CSS + shadcn/ui），并提供移动优先的设计规范、排版、配色、动效与构建工作流（Vite 或 Next.js）。它不是单纯的代码片段集合，而是一份完整的实现指南和项目骨架，包含设计思路、关键 UI 模式、响应式断点、动画建议与构建脚本提示。

When to use it

在你需要从概念或产品文案直接生成网站原型或落地页时使用。适合需要快速产出高保真静态展示页、营销页、个人作品集或仪表盘的场景。也适合前端工程师需要设计决策建议（字体、色彩、动效）或希望把文本需求转为 Vite/Next.js 项目 scaffold 的场景。

What's included

Scripts: 提示了初始化 Vite 和 Next.js 的脚本命令与打包/构建步骤（has_scripts: true）。
References: 包含多个 references/ 文档（has_references: true），例如移动模式、shadcn 组件参考等。
Instructions: 详细的美学指南、排版建议、颜色变量示例、动效实现策略、移动优先断点和实施前检查清单。

Compatible agents

适用于能运行 Node/npm 环境并能生成/编辑代码文件的代理（例如：Code-writing agents, Copilot-style assistants）。

Not yet audited

This skill has not been reviewed by our automated audit pipeline yet.

Information

Repository: openclaw-hot-skills-zh
Stars: 42
Installs: 0

More from openclaw-hot-skills-zh

AI Persona OS — First-Run Setup (Chinese)

Interactive first-run setup that creates a ~/workspace persona with SOUL.md, USER.md, and MEMORY.md templates and preset choices (coding, executive, marketing,

Related Skills

Bounty Hunter — Atlas

Persona skill: 'Atlas' — a profit-focused developer persona for discovering, evaluating and executing paid bounties or freelance tasks with ROI-aware workflows.

FastAPI Project Templates

Creates production-ready FastAPI project scaffolds with async patterns, DI, middleware, and testing best practices for high-performance APIs.

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

Colorize (Strategic UI Color)

Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.

Prompt Engineering Patterns

A practical collection of prompt engineering techniques and patterns for building reliable, controllable LLM prompts: CoT, few-shot, structured outputs, templat

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Migrate from Next.js App Router to TanStack Start

Step-by-step migration checklist to move an App Router Next.js codebase to TanStack Start, covering routes, server functions, middleware, data fetching and buil

Back to Skills