TokenToSea提示词广场
English 控制台

界面截图设计简报

产品设计·任务模板

在聊天中使用

让模型分析界面截图,输出给开发的结构化 JSONC 设计简报,涵盖明暗模式和 Tailwind 断点。

填写变量

填写后,下方提示词与复制内容会同步替换。

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 设计规范。