prototype-prompt-generator by cexll/myclaude
npx skills add https://github.com/cexll/myclaude --skill prototype-prompt-generator为 UI/UX 原型创建生成全面、可用于生产的提示词。将用户需求转化为详细的技术规范,包括设计系统、配色方案、组件规格、布局结构和实施指南。输出的提示词经过结构化处理,便于构建 HTML/CSS/React 原型的 AI 工具或人类开发者最佳使用。
首先从用户处收集基本信息。提出有针对性的问题以了解:
应用类型与目的:
平台与上下文:
设计偏好:
功能需求:
内容与数据:
技术限制:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
逐步提问(每次 2-3 个问题),避免让用户不知所措。许多细节可以从上下文中推断或用合理的默认值填充。
根据收集到的需求,从 references/design-systems.md 中选择合适的设计系统:
企业微信风格:
iOS 原生风格:
Material Design 风格:
Ant Design Mobile 风格:
如果用户未指定设计系统,则根据以下因素推荐一个:
从 references/design-systems.md 加载完整的设计系统规范,以确保准确的颜色代码、组件尺寸和交互模式。
使用 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. 技术栈规范 列出所有技术、框架和资源:
4. 视觉设计要求 提供详细的规格说明:
(a) 配色方案: 包含所有颜色的十六进制代码:
(b) UI 样式特征: 为每种组件类型指定:
(c) 布局结构: 描述每个主要部分:
(d) 特定页面内容: 提供实际内容,而非占位符:
5. 实施细节 涵盖技术细节:
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. 特殊要求 突出显示独特的注意事项:
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].
用具体值替换所有模板占位符:
用精确的规格说明替换模糊术语:
使用真实内容,而非占位符:
指定所有尺寸:
定义所有状态:
包含所有颜色: 提到的每种颜色都必须有十六进制代码。参考 references/design-systems.md 中选定的设计系统以获取准确值。
在呈现最终提示词之前,根据 references/prompt-structure.md 中的检查清单进行验证:
完整性检查:
清晰度检查:
具体性检查:
真实性检查:
技术准确性检查:
如果有任何检查未通过,请在继续之前优化提示词。
向用户呈现生成的提示词,并附上简要说明:
提供优化选项:
根据反馈进行迭代: 如果用户要求更改:
保存或导出: 提供将提示词保存到文件的选项:
1. 默认高质量: 即使用户提供最少的需求,也要生成全面的提示词。删除细节比后期添加更容易。包括:
2. 智能使用设计系统默认值: 当用户需求模糊时:
3. 清晰度优先于简洁性: 更长、更详细的提示词比简短、模糊的提示词能产生更好的原型。包括:
4. 移动优先思维: 对于移动应用,始终考虑:
5. 平衡灵活性与具体性:
6. 考虑完整的用户旅程: 包含以下规格说明:
7. 提供上下文,而不仅仅是规格: 解释设计决策背后的 "原因":
8. 验证技术可行性: 在最终确定提示词之前:
9. 使其可操作: 提示词应支持立即实施:
10. 预见问题: 在提示词中解决常见的不确定性:
典型结构:
关键元素:
典型结构:
关键元素:
典型结构:
关键元素:
典型结构:
关键元素:
问题:用户需求太模糊 解决方案: 提出有针对性的问题,提供类似应用的示例,建议可供选择的设计系统,或者创建一个默认提示词并提供迭代选项。
问题:用户想要混合多种设计风格 解决方案: 选择一个主要设计系统作为整体结构和一致性基础,然后将其他系统的特定元素作为点缀功能融入。解释权衡。
问题:用户指定了不可能或冲突的需求 解决方案: 识别冲突,解释为什么有问题(例如:"64px 图标无法放入 44px 的导航栏"),建议替代方案,并寻求澄清。
问题:一个提示词中功能太多 解决方案: 首先关注主要页面/工作流程,生成该提示词,然后为附加功能创建单独的提示词。保持所有提示词之间的一致性。
问题:用户缺乏技术知识 解决方案: 避免行话,用通俗语言解释设计决策,提供视觉描述而非技术术语,并在提示词中包含有用的注释。
问题:原型提示词未能产生良好结果 解决方案: 根据质量检查清单进行审查,确保所有颜色都有十六进制代码,验证所有尺寸都已指定,添加更多具体的内容示例,检查是否存在模糊语言。
此技能包含支持提示词生成的参考文档:
主要设计系统的全面规范:
每个设计系统包括:
何时参考: 生成提示词时始终加载此文件,以确保准确的设计系统规范。使用它来填充颜色值、组件尺寸和交互模式。
提示词构建的详细模板和指南:
何时参考: 将其用作每个生成的提示词的骨架。确保您创建的所有提示词之间的一致性和完整性。
注意: 此技能生成用于原型创建的提示词——它本身不创建原型。输出是一个全面的文本提示词,可以提供给另一个 AI 工具、开发者或设计工具来生成实际的 HTML/CSS/React 代码。
每周安装数
264
仓库
GitHub 星标数
2.5K
首次出现
Jan 22, 2026
安全审计
安装于
claude-code200
opencode145
codex133
gemini-cli132
cursor127
github-copilot122
Generate comprehensive, production-ready prompts for UI/UX prototype creation. Transform user requirements into detailed technical specifications that include design systems, color palettes, component specifications, layout structures, and implementation guidelines. Output prompts are structured for optimal consumption by AI tools or human developers building HTML/CSS/React prototypes.
Begin by collecting essential information from the user. Ask targeted questions to understand:
Application Type & Purpose:
Platform & Context:
Design Preferences:
Feature Requirements:
Content & Data:
Technical Constraints:
Ask questions incrementally (2-3 at a time) to avoid overwhelming the user. Many details can be inferred from context or filled with sensible defaults.
Based on the gathered requirements, choose the appropriate design system from references/design-systems.md:
WeChat Work Style:
iOS Native Style:
Material Design Style:
Ant Design Mobile Style:
If the user hasn't specified a design system , recommend one based on:
Load the complete design system specifications from references/design-systems.md to ensure accurate color codes, component dimensions, and interaction patterns.
Using the template from references/prompt-structure.md, construct a comprehensive prompt with these sections:
1. Role Definition Define expertise relevant to the prototype:
# Role
You are a world-class UI/UX engineer and frontend developer, specializing in [specific domain] using [technologies].
2. Task Description State clearly what to build and the design style:
# Task
Create a [type] prototype for [application description].
Design style must strictly follow [design system], with core keywords: [3-5 key attributes].
3. Tech Stack Specifications List all technologies, frameworks, and resources:
4. Visual Design Requirements Provide detailed specifications:
(a) Color Palette: Include all colors with hex codes:
(b) UI Style Characteristics: Specify for each component type:
(c) Layout Structure: Describe each major section:
(d) Specific Page Content: Provide actual content, not placeholders:
5. Implementation Details Cover technical specifics:
6. Tailwind Configuration If using Tailwind CSS, provide custom config:
tailwind.config = {
theme: {
extend: {
colors: {
'brand-primary': '#3478F6',
// ... all custom colors
}
}
}
}
7. Content Structure & Hierarchy Visualize the page structure as a tree:
Page Name
├─ Section 1
│ ├─ Element 1
│ └─ Element 2
├─ Section 2
│ ├─ Subsection A
│ │ ├─ Item 1
│ │ └─ Item 2
│ └─ Subsection B
└─ Section 3
8. Special Requirements Highlight unique considerations:
9. Output Format Specify the exact deliverable:
# 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].
Replace all template placeholders with concrete values:
Replace vague terms with precise specifications:
Use real content, not placeholders:
Specify all measurements:
Define all states:
Include all colors: Every color mentioned must have a hex code. Reference the chosen design system from references/design-systems.md for accurate values.
Before presenting the final prompt, verify against the checklist in references/prompt-structure.md:
Completeness Check:
Clarity Check:
Specificity Check:
Realism Check:
Technical Accuracy Check:
If any checks fail, refine the prompt before proceeding.
Present the generated prompt to the user with a brief explanation:
Offer refinement options:
Iterate based on feedback: If the user requests changes:
Save or Export: Offer to save the prompt to a file:
1. Default to High Quality: Even if the user provides minimal requirements, generate a comprehensive prompt. It's easier to remove details than to add them later. Include:
2. Use Design System Defaults Intelligently: When user requirements are vague:
3. Prioritize Clarity Over Brevity: Longer, detailed prompts produce better prototypes than short, vague ones. Include:
4. Think Mobile-First: For mobile applications, always consider:
5. Balance Flexibility and Specificity:
6. Consider the Full User Journey: Include specifications for:
7. Provide Context, Not Just Specs: Explain the "why" behind design decisions:
8. Validate Technical Feasibility: Before finalizing the prompt:
9. Make It Actionable: The prompt should enable immediate implementation:
10. Anticipate Questions: Address common uncertainties in the prompt:
Typical Structure:
Key Elements:
Typical Structure:
Key Elements:
Typical Structure:
Key Elements:
Typical Structure:
Key Elements:
Issue: User requirements are too vague Solution: Ask focused questions, provide examples of similar apps, suggest design systems to choose from, or create a default prompt and offer iteration.
Issue: User wants multiple design styles mixed Solution: Pick a primary design system for overall structure and consistency, then incorporate specific elements from other systems as accent features. Explain trade-offs.
Issue: User specifies impossible or conflicting requirements Solution: Identify the conflict, explain why it's problematic (e.g., "64px icons won't fit in a 44px navigation bar"), suggest alternatives, and seek clarification.
Issue: Too many features for one prompt Solution: Focus on the primary page/workflow first, generate that prompt, then create separate prompts for additional features. Maintain consistency across prompts.
Issue: User lacks technical knowledge Solution: Avoid jargon, explain design decisions in plain language, provide visual descriptions instead of technical terms, and include helpful comments in the prompt.
Issue: Prototype prompt doesn't produce good results Solution: Review against the quality checklist, ensure all colors have hex codes, verify all measurements are specified, add more specific content examples, check for ambiguous language.
This skill includes reference documentation to support prompt generation:
Comprehensive specifications for major design systems:
Each design system includes:
When to reference: Always load this file when generating a prompt to ensure accurate design system specifications. Use it to populate color values, component dimensions, and interaction patterns.
Detailed template and guidelines for prompt construction:
When to reference: Use this as the skeleton for every generated prompt. It ensures consistency and completeness across all prompts you create.
Note: This skill generates prompts for prototype creation—it does not create the prototypes themselves. The output is a comprehensive text prompt that can be provided to another AI tool, developer, or design tool to generate the actual HTML/CSS/React code.
Weekly Installs
264
Repository
GitHub Stars
2.5K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code200
opencode145
codex133
gemini-cli132
cursor127
github-copilot122
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装