Claude MarketplacesSubmit
zinohome avatar

Ui Prompt Generator

zinohome/cozyengine

Takes your Product-Spec.md and generates detailed UI prompts ready for Midjourney, DALL-E, or Stable Diffusion. It reads your PRD, extracts core features, picks a visual style (Material Design, iOS, Neumorphism, etc.), suggests color schemes based on your industry, then outputs 2-3 prompt variations per feature. The prompts include all the specifics: layout structure, aspect ratios, quality keywords, interaction states. Honestly most useful if you're prototyping quickly and want to skip the "translate requirements into design language" step. It's opinionated about what makes a good prompt, which saves time but means you're trusting its style recommendations. Works best when your PRD already has clear priority levels and target user definitions.

skills.sh installs
238
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add zinohome/cozyengine --skill ui-prompt-generator --agent claude-code

Installs into .claude/skills of the current project.

Files

UI 提示词设计师技能包（UI Prompt Generator）

角色定义

你是 UI 提示词设计师，负责根据产品需求文档（Product-Spec.md）自动生成原型图提示词。你的核心职责是：

  1. 理解需求：深度理解产品文档，提炼核心功能
  2. 视觉转换：将功能需求转化为视觉设计描述
  3. 风格适配：根据产品特点选择合适的视觉风格
  4. 细节描述：提供清晰、具体的界面元素描述
  5. 多方案生成：为每个核心功能生成多个设计方案的提示词

前置条件

  • ✅ 必须存在 Product-Spec.md
  • ✅ 产品文档必须包含：
    • 项目概述
    • 目标用户
    • 核心功能列表（至少 3 个）
    • 功能描述、输入输出、业务规则

工作流程

步骤 1：读取产品文档

  • 读取 Product-Spec.md
  • 理解项目概述和目标用户
  • 提取核心功能列表

步骤 2：确定设计风格

根据产品特点和目标用户，选择合适的视觉风格：

Web应用：Modern Minimalist, Material Design, Neumorphism 移动应用：iOS Human Interface, Google Material, Flat Design 管理后台：Clean Professional, Corporate, Data Dashboard 创意工具：Creative, Playful, Experimental

步骤 3：选择配色方案

根据行业特性和用户偏好选择：

科技类：蓝色系、深色模式、霓虹色 金融类：深蓝、金色、灰色 教育类：暖色调、绿色、蓝色 娱乐类：鲜艳色、渐变色、活泼色 工具类：中性色、简洁色、专业色

步骤 4：为每个核心功能生成提示词

按照 templates/ui-prompt-template.md 的格式，为每个核心功能生成：

  • 首页/主界面提示词
  • 核心功能页面提示词（每个高优先级功能）
  • 交互流程提示词（关键用户路径）

步骤 5：生成输出文件

  • 严格按照模板格式生成 UI-Prompts.md
  • 确保提示词与产品文档对应
  • 提供多版本方案（至少 2-3 个方案）

视觉风格选项

Modern Minimalist（现代极简）

  • 特点：干净、简洁、留白多
  • 适用场景：Web应用、工具类产品
  • 关键词：clean, minimalist, whitespace, subtle, elegant
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/zinohome/cozyengine
Categories
Frontend Development, AI & Agent Building, Automation & Workflows
First seen
Jun 3, 2026

Recommended

More Frontend Development
1akillness avatarvercel-react-best-practicesakillness/oh-my-skillsvercel react best practices230skills.sh installs
2sergiodxa avatarfrontend-async-best-practicessergiodxa/agent-skillsAsync/await and Promise optimization guidelines. Use when writing, reviewing, or refactoring asynchronous code to eliminate waterfalls and maximize parallelism.225skills.sh installs
3opentiny avatartiny-vue-skillopentiny/agent-skills当使用 TinyVue 组件库(@opentiny/vue)进行开发时或者配置 TinyVue 工程的国际化，主题配置，表单校验说明，自动导入组件等，一定要阅读本技能。本技能提供严格的 API 文档和示例，以及如何查找流程以及代码规范。221skills.sh installs
4marmelab avatarreact-adminmarmelab/react-adminThis skill should be used when building, modifying, or debugging a react-admin application — including creating resources, lists, forms, data fetching, authenti218skills.sh installs
5hairyf avatarreact-nativehairyf/skillsReact Native framework for building native mobile apps with React. Use when building iOS/Android apps, working with native components, handling touch interactio217skills.sh installs
6akillness avatarfrontend-design-systemakillness/oh-my-skillsfrontend design system216skills.sh installs