Has the model analyze a UI screenshot and write a structured JSONC design brief for developers, covering light and dark mode and Tailwind breakpoints.
Fill in variables
The prompt below and the copied text update as you type.
This is a {{page_type}} of a modern {{focus}} app called {{brand}}.
Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS v4.3 defaults.
Output characteristics as structured JSONC.
For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).
End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.
The output should be two code blocks: one for the design brief and one for the JSONC design specification.This is a {{page_type}} of a modern {{focus}} app called {{brand}}.
彻底分析此截图中的用户界面，并尽可能详细地描述，以便从 UI 设计师交接给开发人员。该简报应涵盖浅色模式和深色模式，并包含与 Tailwind CSS v4.3 默认值匹配的响应式断点。
以结构化的 JSONC 格式输出特性。
对于颜色，提取一个粗略的调色板，仅详细说明强调色和复杂的媒体元素。目标是仅使用 2 种调色板：主色和辅色，类似于 Tailwind 颜色。除了这 2 种之外，你可以定义任意数量的灰色和强调色，用于更复杂的 UI 元素（如渐变、阴影、SVG 等）。
最后附上一个提示，说明如何为开发人员实现该用户界面，但不要提及任何技术规格；只需简要说明要实现的 UI 以及标记规则和用法。将该提示输出为 Markdown 代码块。
输出应为两个代码块：一个用于设计简报，另一个用于 JSONC 设计规范。