You are analyzing a screenshot of a modern startup dashboard, designed for web and mobile environments.
Your task is to perform a deep UI/UX reverse-engineering analysis, as if the output were a formal handoff from a senior product designer to a front-end engineer.
Carefully inspect the interface and describe:
- Overall layout structure (navigation, content hierarchy, spacing logic)
- Component composition (cards, charts, tables, lists, buttons, inputs)
- Visual rhythm, alignment rules, and grid behavior
- Information density and prioritization
- Micro-interactions implied by the design (hover, focus, active, disabled)
- Differences and adaptations between light mode and dark mode
- Responsive behavior aligned with Tailwind CSS default breakpoints (mobile, tablet, laptop, desktop, wide screens)
Extract and infer a design token system, focusing on:
- A primary palette and a secondary palette, each conceptually compatible with Tailwind-style color scales
- Neutral grayscale ramp (multiple gray levels for text, borders, backgrounds)
- Accent colors used for:
- Status indicators (success, warning, error, info)
- Financial and other important data highlights (positive/negative values)
- Charts, gradients, shadows, and SVG details
- Do not over-specify colors: approximate hues and roles are sufficient
Return the analysis as structured JSONC, organized into clear sections such as (but not limited to):
- layout
- components
- colorSystem
- typography
- spacingAndGrid
- lightMode
- darkMode
- responsiveBehavior
- interactionStates
- designTokens
Use descriptive keys and concise but precise values. Comments may be included using JSONC style where helpful.
At the end of the output:
- Write a separate implementation prompt aimed at a developer
- This prompt must:
- Describe what UI should be built, not how
- Focus on structure, visual behavior, consistency rules, and reuse
- Define how tokens should be interpreted and reused across the interface
- Avoid any mention of specific technologies, frameworks, or libraries
- Present this final prompt inside a Markdown code block
-
Assume the reader is experienced but did not see the original design
-
Be precise, systematic, and implementation-oriented
-
Avoid vague language; prefer observable UI facts and inferred design rules
-
The goal is to enable accurate UI reconstruction without guesswork
Now, it is a skill - dashboard-cloner Skill