prototype-prompt-generator

Name: prototype-prompt-generator
Author: stellarlinkco

github.com/stellarlinkco设计与 UI2.7k390 次安装25 周前更新

代码仓库

关于 prototype-prompt-generator

将 UI/UX 原型需求转为详细生成提示词的技能，适用于设计人员和原型开发者。它收集平台、设计系统与交互要求，并按结构化清单完善视觉、布局和实现规范。

主要功能

01逐步收集原型需求
02根据需求选择设计系统
03编写视觉与布局规范
04提供真实内容和技术细节
05按质量清单检查并迭代

适用场景

01为 AI 原型工具准备详细提示词
02为 HTML、CSS 或 React 原型明确设计规范
03补齐页面内容、组件状态和布局细节

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/stellarlinkco/myclaude --skill prototype-prompt-generator

安装后在 Claude Code 中输入/prototype-prompt-generator确认已加载。

附带文件references/design-systems.mdreferences/prompt-structure.md

详细介绍

原型提示词生成器

概述

为 UI/UX 原型创建生成全面且可用于生产环境的提示词。将用户需求转化为详细的技术规格，包括设计系统、调色板、组件规格、布局结构和实现指南。输出的提示词经过精心组织，便于 AI 工具或人工开发者使用，以构建 HTML/CSS/React 原型。

工作流

第 1 步：收集需求

首先向用户收集必要信息。通过有针对性的问题了解：

应用类型与用途：

应用属于哪种类型？（例如：企业工具、电商、社交媒体、仪表盘）
目标用户是谁？
主要用例和工作流是什么？

平台与使用场景：

目标平台：iOS、Android、Web、微信小程序，还是跨平台？
设备：手机、平板电脑、桌面设备，还是响应式布局？
已知的视口尺寸（例如：iPhone 为 375px，桌面设备为 1200px）

设计偏好：

设计风格：企业微信、iOS 原生、Material Design、Ant Design Mobile，还是自定义？
品牌颜色或视觉偏好是什么？
有设计参考或灵感来源吗？

功能需求：

所需的关键页面和功能
导航结构（标签、抽屉、堆栈导航）
要显示的数据（指标、列表、表单、媒体）
用户交互（点击、滑动、长按等）

内容与数据：

要显示的实际内容（真实感文本、数字、名称）
空状态、错误状态、加载状态
任何特定的业务逻辑或规则

技术限制：

框架偏好：纯 HTML、React、Vue，还是与框架无关？
CSS 方案：Tailwind CSS、CSS Modules、styled-components？
图片素材：真实图片、占位图，还是特定来源？
CDN 依赖或版本要求？

逐步提问（每次提问 2-3 个），避免让用户应接不暇。许多细节可以根据上下文推断，或采用合理的默认值补充。

第 2 步：选择设计系统

根据收集到的需求，从 references/design-systems.md 中选择合适的设计系统：

企业微信风格：

适用场景：中国企业应用、工作管理工具、B2B 平台、内部业务系统
特点：简洁专业、以科技蓝为主色、信息层级清晰
主要受众：中国商务用户、企业环境中的用户

iOS 原生风格：

适用场景：iOS 专属应用、与 Apple 生态系统集成、面向 iPhone/iPad 用户的应用
特点：极简风格、布局宽敞、San Francisco 字体、系统颜色
主要受众：Apple 用户、消费类应用、内容类应用

Material Design 风格：

适用场景：以 Android 为先的应用、与 Google 生态系统集成、使用 Material UI 的跨平台应用
特点：大胆的图形设计、层级系统、涟漪效果、Roboto 字体
主要受众：Android 用户、Google 服务、开发者工具

Ant Design Mobile 风格：

适用场景：具有复杂数据录入和表单的企业移动应用
特点：注重效率、组件一致、适用于业务应用
主要受众：商务用户、企业移动应用、数据密集型界面

如果用户未指定设计系统，请根据以下因素推荐：

地理位置：中国用户 → 企业微信，西方用户 → iOS/Material
平台：iOS → iOS 原生，Android → Material Design
应用类型：企业 B2B → 企业微信或 Ant Design，消费类应用 → iOS 或 Material

从 references/design-systems.md 加载完整的设计系统规格，确保颜色代码、组件尺寸和交互模式准确无误。

步骤 3：构建提示词

使用 references/prompt-structure.md 中的模板，构建一份包含以下部分的完整提示词：

1. 角色定义 定义与原型相关的专业知识：

# Role
You are a world-class UI/UX engineer and frontend developer, specializing in [specific domain] using [technologies].

2. 任务描述 清楚说明要构建的内容和设计风格：

# Task
Create a [type] prototype for [application description].
Design style must strictly follow [design system], with core keywords: [3-5 key attributes].

3. 技术栈规范 列出所有技术、框架和资源：

文件结构（单个 HTML、多页、基于组件）
框架和版本（例如，Tailwind CSS CDN）
设备模拟（视口尺寸、设备外框）
资源来源（Unsplash、Pexels、真实图片）
图标库（FontAwesome、Material Icons）
自定义配置（Tailwind 配置、主题变量）

4. 视觉设计要求 提供详细规范：

(a) 配色方案： 包含所有颜色的十六进制代码：

背景颜色（主背景、区域、卡片）
主色和强调色及其用途
状态颜色（成功、警告、错误）
文本颜色（标题、正文、次要文本、禁用文本）
UI 元素颜色（边框、分隔线）

(b) UI 风格特征： 为每种组件指定：

卡片：背景、圆角、阴影、边框、内边距
按钮：变体（主按钮、次要按钮、幽灵按钮）、尺寸、状态
图标：风格、尺寸、颜色、容器
列表项：布局、高度、分隔线样式、激活状态
阴影：类型和用途

(c) 布局结构： 描述每个主要区域：

顶部导航栏：高度、标题样式、图标、背景
内容区域：网格、卡片、列表、间距
快捷访问区域：图标网格、布局
数据展示卡片：指标、布局、样式
功能列表：结构、图标、交互
底部标签栏：高度、标签、激活/未激活状态、徽标

(d) 具体页面内容： 提供实际内容，而非占位符：

实际的页面标题和区域标题
实际数据点（数字、名称、日期）
功能名称和描述
按钮标签和链接文本
包含真实内容的示例列表项

5. 实现细节 涵盖技术细节：

页面宽度和居中方式
布局系统（Flexbox、Grid，或两者兼用）
导航栏的固定/粘性定位
间距尺度（外边距、内边距、间隔）
字体排版（字体系列、字号、字重）
交互状态（悬停、激活、聚焦、禁用）
图标来源和用法
边框和分隔线样式

6. Tailwind 配置 如果使用 Tailwind CSS，请提供自定义配置：

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#3478F6',
        // ... all custom colors
      }
    }
  }
}

7. 内容结构与层级 以树状结构展示页面结构：

Page Name
├─ Section 1
│  ├─ Element 1
│  └─ Element 2
├─ Section 2
│  ├─ Subsection A
│  │  ├─ Item 1
│  │  └─ Item 2
│  └─ Subsection B
└─ Section 3

8. 特殊要求 强调独特的注意事项：

特定设计系统的指南
主色的应用场景
交互细节（点击反馈、动画、手势）
无障碍要求（对比度、触控目标、ARIA）
性能注意事项（图片优化、延迟加载）

9. 输出格式 明确指定交付内容：

# Output Format

Please output complete [file type] code, ensuring:
1. [Requirement 1]
2. [Requirement 2]
...

The output should be production-ready and viewable at [viewport] on [device].

步骤 4：补充具体信息

将所有模板占位符替换为具体值：

用精确规格替换模糊用语：

❌ “使用蓝色” → ✅ “主色：#3478F6（科技蓝），链接色：#576B95（链接蓝）”
❌ “将按钮设为圆角” → ✅ “边框圆角：4px（Tailwind：rounded）”
❌ “添加一些间距” → ✅ “卡片间距：12px，页面边距：16px”
❌ “显示用户信息” → ✅ “显示用户名（15px 粗体）、电子邮件（13px 灰色）、头像（48px 圆形）”

使用真实内容，而非占位符：

❌ “Lorem ipsum dolor sit amet” → ✅ “客户总数：14，今日新增客户：1，今日营收：¥0.00”
❌ “[Company Name]” → ✅ “Acme Insurance Co.”
❌ “功能 1、功能 2、功能 3” → ✅ “客户联系、客户朋友圈、客户群”

指定所有尺寸：

组件高度（44px、50px、64px）
字体大小（13px、15px、16px、18px）
间距值（8px、12px、16px、24px）
图标尺寸（24px、32px、48px）
边框圆角（4px、8px、10px）

定义所有状态：

常规：基础颜色和样式
悬停：适用时（桌面端）
激活/按下：不透明度或背景变化
禁用：变灰并降低不透明度
已选中：高亮颜色（通常为品牌主色）

包含所有颜色： 提及的每种颜色都必须提供十六进制代码。请参阅 references/design-systems.md 中选定的设计系统，确保颜色值准确。

步骤 5：质量保证

提交最终提示词前，请对照 references/prompt-structure.md 中的清单进行核验：

完整性检查：

清晰度检查：

没有含糊用语或模糊描述（例如 “一些内边距”、“好看的颜色”）
所有尺寸均标明单位（px、rem、%、vh 等）
所有颜色均使用十六进制代码定义（例如 #3478F6，而非仅写 “蓝色”）
描述组件状态（常规、悬停、激活、禁用、已选中）
明确布局关系（父子关系、间距、对齐、z-index）

具体性检查：

明确指定设计系统（微信企业版、iOS 原生、Material Design 等）
提供视口尺寸（例如 iPhone 的 375px × 812px）
定义排版比例（字号、字重、行高）
记录交互行为，并注明动画时长
考虑边界情况（长文本溢出、空状态、加载、错误）

真实度检查：

使用真实内容示例，而非拉丁文占位文本
提供可信的数据点（合理的数字、姓名、日期、金额）
功能集切实可行（不过度设计，也不含糊其辞）
复杂度与所述使用场景相符

技术准确性检查：

Tailwind 类名有效（如使用 Tailwind）
CDN 链接及其版本正确（例如 https://cdn.tailwindcss.com）
HTML 结构恰当（体现语义化元素和层级关系）
布局技术可行（Flexbox/Grid 模式能够正常工作）
考虑无障碍标记（触控目标 ≥44px、颜色对比度）

如有任何检查未通过，请先完善提示词再继续。

步骤 6：展示并迭代

向用户展示生成的提示词，并简要说明：

选择了哪种设计系统，以及选择原因
采用的关键设计决策
应用的任何假设或默认设置
如何使用提示词（复制并提供给其他 AI 工具或开发者）

提供优化选项：

“您想调整任何颜色或间距吗？”
“需要添加更多页面或功能吗？”
“您想更换设计系统吗？”
“有没有需要重点呈现的特定交互或动画？”

根据反馈进行迭代： 如果用户提出修改：

更新提示词中的相关部分
确保各部分保持一致
根据质量检查清单重新核验
展示更新后的提示词

保存或导出： 提供将提示词保存为文件的选项：

用于文档的 Markdown 文件
便于复制的文本文件
将提示词放入代码块中，以便立即使用

最佳实践

1. 默认提供高质量内容： 即使用户只提供了最低限度的需求，也要生成全面的提示词。删减细节比之后补充细节更容易。请包含：

完整的调色板（至少 8–12 种颜色）
所有常见 UI 组件（按钮、卡片、列表、输入框）
多种组件状态（常规、激活、禁用）
响应式设计注意事项
无障碍基础要求（对比度、触控目标）

2. 明智地使用设计系统默认值： 当用户需求含糊时：

始终一致地应用完整设计系统
使用设计系统中的标准组件尺寸
遵循既定模式（例如，企业微信的 64px 列表项）
包含适用于该平台的典型交互模式

3. 清晰优先于简洁： 较长且详细的提示词比简短、含糊的提示词更能生成出色的原型。请包含：

使用精确的十六进制代码，而非颜色名称
使用精确的尺寸，而非相对描述
指定具体的组件布局，而非泛泛描述
提供实际内容，而非占位文本

4. 移动端优先： 对于移动应用，请务必考虑：

安全区域（iOS 刘海屏、Android 手势条）
触控目标尺寸（最小 44px × 44px）
拇指可触及区域（优先使用底部导航，而非顶部导航）
以竖屏为主（横屏为辅）
尽可能支持单手操作

5. 兼顾灵活性与具体性：

明确核心设计元素（颜色、字体排印、关键组件）
在实现细节上保留灵活性（具体动画时长、细微间距调整）
清楚注明“必需项”，并将“锦上添花项”标记为可选

6. 考虑完整的用户旅程： 请包含以下方面的规范：

入口（启动屏幕、适用时的引导流程）
主要工作流（贯穿关键功能的顺畅路径）
边缘情况（空状态、错误状态、加载状态）
退出点（登出、返回导航、完成状态）

7. 提供背景，而不只是规范： 解释设计决策背后的“原因”：

“科技蓝（#3478F6）适用于企业场景，传递信任感和专业感”
“列表项高度为 64px，便于在移动端用拇指舒适地点按”
“固定的底部标签栏便于快速访问主要功能”

8. 验证技术可行性： 确定提示词之前：

确保 CSS/Tailwind 类能够实现所描述的设计
验证布局模式与所述的 grid/flexbox 方法兼容
确认指定的视口能够容纳所有内容
检查 CDN 链接和版本是否正确且可用

9. 让提示词切实可用： 提示词应支持立即开始实现：

包含所有必需的 CDN 链接和导入项
提供完整的 Tailwind 配置（不要写“……按需添加”）
指定文件结构和组织方式
明确定义交付物（HTML 文件、React 组件等）

10. 预先解答常见疑问： 在提示词中说明常见的不确定事项：

字体回退方案（例如，“sans-serif”系统字体栈）
图片尺寸和宽高比
图标用法（何时使用 FontAwesome、SVG 或 emoji）
Z-index 层级（哪些元素位于上层）
溢出行为（滚动、截断、换行）

常见模式

模式 1：企业工作台仪表盘（企业微信风格）

典型结构：

顶部导航栏（44px，标题 + 搜索/菜单图标）
快捷入口网格（4 列图标网格）
数据摘要卡片（横向排列的关键指标）
功能列表（图标 + 文本行，每项高度 64px）
底部标签栏（5 个标签，高度 50px）

关键元素：

使用科技蓝（#3478F6）表示主要操作和激活状态
浅灰色背景上的白色卡片，并带有柔和阴影
在圆角-lg 容器中使用 48px 图标
使用右箭头指示导航

模式 2：iOS 消费类应用（iOS 原生风格）

典型结构：

大标题导航栏（展开时为 96px）
基于卡片的内容区块
系统标准列表（行高至少为 44px）
使用 SF Symbols 图标的标签栏

关键元素：

交互元素使用系统蓝色（#007AFF）
留白充足（20px 边距、16px 内边距）
带左侧缩进的细微分隔线
导航栏采用半透明模糊效果

模式 3：Android 应用（Material Design 风格）

典型结构：

顶部应用栏（移动设备上为 56px，平板上为 64px）
使用 FAB（浮动操作按钮）作为主要操作
带阴影的卡片式内容
底部导航栏或导航抽屉

关键元素：

使用醒目的主色（#6200EE）和阴影
点击时显示涟漪效果
16dp 网格系统
Material 图标（24px）

模式 4：企业表单应用（Ant Design Mobile）

典型结构：

简洁的导航栏（45px）
分组输入的表单区块
展示详细信息的列表视图
带主按钮的固定底部操作栏

关键元素：

操作使用专业蓝色（#108EE9）
信息布局紧凑
表单字段标签和验证清晰明了
多步流程使用面包屑或步骤指示器

故障排除

问题：用户需求过于模糊
解决方案： 提出有针对性的问题，提供类似应用的示例，建议用户选择设计系统，或创建默认提示词并提供迭代优化。

问题：用户想要混合多种设计风格
解决方案： 选择一种主要设计系统，确保整体结构和一致性，再将其他系统的特定元素作为点缀融入其中。说明其中的权衡。

问题：用户提出了无法实现或相互冲突的需求
解决方案： 指出冲突，解释问题所在（例如，“64px 的图标无法放入 44px 的导航栏”），提出替代方案并寻求澄清。

问题：一个提示词包含的功能过多
解决方案： 先聚焦主要页面或工作流，生成该提示词，再为其他功能创建单独的提示词。保持提示词之间的一致性。

问题：用户缺乏技术知识
解决方案： 避免使用行话，用通俗语言解释设计决策，使用视觉描述而非技术术语，并在提示词中加入实用注释。

问题：原型提示词生成的结果不理想
解决方案： 对照质量检查清单进行检查，确保所有颜色都标注十六进制代码、所有尺寸都已明确指定，并添加更具体的内容示例、检查是否存在含糊的表述。

资源

此技能包含用于辅助生成提示词的参考文档：

references/design-systems.md

主要设计系统的完整规范：

WeChat Work Style：企业应用
iOS Native Style：Apple 生态系统应用
Material Design：Google/Android 应用
Ant Design Mobile：企业移动应用

每种设计系统均包含：

完整的十六进制颜色代码色板
组件规范（尺寸、间距、状态）
字体排版比例（字号、字重、行高）
交互模式（动画、手势、反馈）
布局指南（网格、间距、安全区域）
代码示例（Tailwind 类、CSS 片段）

何时参考： 生成提示词时始终加载此文件，以确保设计系统规范准确。使用该文件中的颜色值、组件尺寸和交互模式。

references/prompt-structure.md

提示词构建的详细模板和指南：

标准提示词结构（9 个部分）
带占位符的模板语法
每个部分的示例
质量检查清单（完整性、清晰度、具体性）
工作流指南（需求 → 提示词 → 迭代）
编写有效提示词的技巧
需要避免的常见问题

何时参考： 将此文档作为每个生成的提示词的框架，确保创建的所有提示词保持一致且完整。

注意： 此技能用于生成原型创建提示词，并不实际创建原型。输出是一段全面的文本提示词，可提供给其他 AI 工具、开发者或设计工具，用于生成实际的 HTML/CSS/React 代码。

支持 Markdown

登录后评论