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
- 1Copy the full prompt below
- 2Replace the [____] placeholders with your specifics
- 3Paste into DeepSeek / Claude / ChatGPT to run