Afjal Hussein7
Create an evidence-backed DESIGN.md for any public website URL. Use when asked to extract a site's design system, colors, typography, spacing, radii, shadows, components, or to generate a design.md compatible with Google's design.md format. Composes the awwwards MCP inspection and capture tools.
Use when building a site that needs design references (for example "make it feel premium" or "dark 3D portfolio vibes"), when the user asks for standalone inspiration research from award-winning sites, or when setting up the awwwards-mcp local index or live-capture tooling.
Use when building a site whose reference has animation, before writing motion code and again when verifying a build. Teaches what to record from a live site, how to study the recordings frame by frame, how to turn the study into a motion inventory, and how to verify the build's motion against the reference.
Use when recreating or rebuilding a multi-section page from a reference site, section by section. Teaches the loop from page structure to per-section capture, build, geometry gate, and lock, including when a page must be treated as one unit because it shares a WebGL canvas.
Use when a converted project needs its motion authored: turning a motion manifest and inert skeletons into real per-section motion with a parity check. Covers timeline topology, intent mapping, reduced motion, and the verification gate.
Recreate a website from a link with the awwwards MCP. Use when the user says to recreate a site, clone a page, rebuild a URL, or gives a URL and asks to build it. Produces a hand-built implementation, checks it against the live site, then can convert it into a Vite, Astro, or Next project.