ChatGPT / Claude
适合在实现前梳理页面结构、视觉方向和更完整的提示词说明。
提示词库
UI 与前端设计提示词库
这里汇总适用于 UI 与前端设计的通用提示词。你可以从这里进入落地页、仪表盘、Tailwind UI 和暗色模式等专题，并将提示词用于 ChatGPT、Claude、Cursor、Claude Code 或 v0。
12 个主题UI / 落地页 / 仪表盘ChatGPT / Claude / Cursor / v0
提示词主题
按具体任务选择提示词
仪表盘设计提示词
用于构建数据丰富的仪表盘 UI 的 AI 提示词，涵盖图表、指标卡片、侧边栏和响应式布局。
8 条提示词6 种风格
落地页设计提示词
用于创建高转化落地页的 AI 提示词，涵盖 Hero 区块、功能网格、用户评价和 CTA。
8 条提示词6 种风格
暗黑模式设计提示词
用于设计优雅暗色主题界面的 AI 提示词，涵盖对比度、色彩层级和可读性。
8 条提示词6 种风格
玻璃拟态设计提示词
用于创建毛玻璃 UI 效果的 AI 提示词，涵盖 backdrop-blur、透明度和层叠深度。
8 条提示词5 种风格
极简设计提示词
用于创建简洁、内容聚焦界面的 AI 提示词，涵盖充足留白、克制排版和微妙交互。
8 条提示词6 种风格
复古设计提示词
灵感来自 Y2K、80 年代霓虹、VHS、复古计算和怀旧美学的 AI 提示词。
8 条提示词7 种风格
动漫风格设计提示词
灵感来自动漫的网页界面 AI 提示词，涵盖日式美学、鲜艳色彩和角色驱动设计。
8 条提示词7 种风格
企业与 SaaS 设计提示词
用于创建专业、可信赖的商业界面的 AI 提示词，涵盖简洁布局、数据表格和转化优化模式。
8 条提示词5 种风格
新野兽派设计提示词
用于创建大胆、原始、反设计界面的 AI 提示词，涵盖粗边框、硬阴影、无圆角和高对比色。
8 条提示词5 种风格
日式美学设计提示词
灵感来自禅意、侘寂和传统日式美学的网页界面 AI 提示词，涵盖自然材质和用心间距。
8 条提示词6 种风格
赛博朋克设计提示词
用于创建未来感、霓虹灯光界面的 AI 提示词，涵盖故障效果、HUD 元素和反乌托邦美学。
8 条提示词6 种风格
Tailwind CSS UI 提示词
为 Tailwind CSS 优化的 AI 提示词 — 响应式布局、组件模式、design tokens 和工具类优先样式。
8 条提示词6 种风格
AI 工具
这些提示词适合哪些工具
Cursor / Claude Code
适合把提示词说明转成真实组件、重构任务和代码级 UI 迭代。
v0
当提示词明确规定区块、信息层级和交互状态时，适合快速生成布局。
Tailwind 优先工作流
适合生成带有明确设计约束、可继续实现的 HTML、React 或 Next.js UI。
Previews
示例预览与起步模板
把这些模板当作结构参考，再把区块、布局和交互状态写回提示词，让输出更明确、更稳定。
SaaS Landing Page
A reliable starting point for product-led marketing websites and feature-driven UI prompts.
Open templateDocumentation Site
Useful for prompts that need navigation density, code blocks, and docs-style hierarchy.
Open templateMinimalist Portfolio
A clean base for portfolio prompts, case-study layouts, and service-led websites.
Open templateDashboard with Charts
Helpful when a prompt needs KPI cards, charts, and a more product-like interface.
Open template需要更具体的提示词分类？
如果任务已经明确，可以直接选择落地页、仪表盘、Tailwind UI 或暗色模式。针对具体页面类型的提示词通常比宽泛描述更容易得到清晰结果。