中文译文
这是一张名为 ${brand:AuditFlow} 的现代 ${focus:government audit} 应用的 ${page_type:dashboard}。
彻底分析此截图中的 UI,并尽可能详细地描述它,以便从 UI 设计师移交给开发者。该简报应涵盖浅色和深色模式,并包含与 Tailwind CSS v4.3 默认值匹配的响应式断点。
以结构化 JSONC 输出各项特征。
对于颜色,提取一个粗略的调色板,并且只详细说明强调色和复杂媒体。目标是只使用 2 个调色板:与 Tailwind 颜色类似的主色和辅助色。除了这 2 个之外,你还可以为更复杂的 UI(渐变、阴影、SVG 等)定义任意数量的灰色和强调色。
最后以一段提示词结尾,向开发者说明如何实现该 UI,但不要提及任何技术规格;只包含待实现 UI 的简报以及 token 规则 + 用法。将该提示词输出为 Markdown 代码块。
输出应为两个代码块:一个用于设计简报,一个用于 JSONC 设计规范。
English original
This is a ${page_type:dashboard} of a modern ${focus:government audit} app called ${brand:AuditFlow}.
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.
