Design Brief prompt

Image42.7K

分析UI截图,输出含明暗模式的开发设计简报

Turn a UI screenshot into a developer design brief and spec.

Full prompt
这是一个名为 ${brand:AuditFlow} 的现代 ${focus:government audit} 应用的 ${page_type:dashboard}。

彻底分析此截图中的UI,并尽可能详细地描述它,以便从UI设计师交接给开发者。该简报应同时涵盖浅色与深色模式,并包含与Tailwind CSS v4.3默认值匹配的响应式断点。

以结构化的JSONC输出各项特征。

对于颜色,提取一个大致的调色板,仅详细说明强调色与复杂的媒体元素。目标是仅使用2套调色板:primary和secondary,类似于Tailwind的颜色。在这两者之外,你可以为更复杂的UI(渐变、阴影、SVG等)定义任意数量的灰色与强调色。

以一段提示词结尾,向开发者说明如何实现该UI,但不要提及任何技术规格;仅说明待实现UI的简报以及token规则与用法。将该提示词以Markdown代码块形式输出。

输出应为两个代码块:一个用于设计简报,一个用于JSONC设计规范。
Fill in the blanks, then copy

How to use this prompt

  1. 1Copy the full prompt below
  2. 2Replace the [____] placeholders with your specifics
  3. 3Paste into DeepSeek / Claude / ChatGPT to run

Related Image prompts