design-screenshot-spec

# Design Screenshot Spec ## Purpose Convert user-supplied Figma screenshots, copied visual inspect panels, exported assets, and design notes into a strict `Design Implementation Spec` for a frontend implementer. ## When To Use - The user sends screenshots of Figma frames, components, screens, or inspect panels. - The user asks to analyze a visual design before implementation. - The next step is frontend layout work and the implementer needs a structured spec. ## When Not To Use - The user asks for live Figma inspection, canvas editing, file creation, Figma whiteboard workflows, design-system generation, or Code Connect. - The user supplies only a Figma URL, file key, or node id without screenshots or copied design material. - The user already provides a complete `Design Implementation Spec` and asks to implement it. Use `frontend-layout-implementer`. ## Required Context 1. Read `AGENTS.md`. 2. Confirm the classified task is `design-spec` or design intake for later frontend implementation. 3. Read `common/approved-patterns.md`. 4. Read `common/anti-patterns.md`. 5. Read `project/design-reference-profile.md` when present. 6. Read `references/spec-extraction-checklist.md`. ## Tool Contract - Do not use Figma MCP. - Use Visual Reference MCP when available for user-supplied image references. - Use Design Spec MCP when available to store or read structured specs. - If those MCP servers are unavailable, work from attached images, local image files, copied in...