{"enrichment":{"faq":[{"a":"Product Design is a skill that streamlines the design-to-code workflow by connecting directly to Figma, extracting design tokens and component patterns, then auditing your codebase for alignment. It generates phased implementation plans with task breakdowns and acceptance criteria, cutting handoff time from hours to minutes.","q":"What is Product Design and what does it cover?"},{"a":"Product Design guides you through a structured workflow that bridges design and development. The skill connects to your Figma files, extracts design tokens and component patterns, audits your codebase for alignment, and creates phased implementation plans with clear task breakdowns and acceptance criteria.","q":"How does the product design process work in this skill?"},{"a":"Product Design emphasizes design-to-code alignment and systematic implementation. It focuses on extracting and applying design tokens, identifying component patterns, and establishing frameworks that ensure your codebase matches your design specifications throughout the product development lifecycle.","q":"What product design principles and methodologies does this cover?"},{"a":"Product Design guides you from concept through execution by connecting to Figma to extract design patterns, auditing your existing codebase, and generating phased implementation plans. Each plan includes task breakdowns and acceptance criteria, enabling you to move from design concept to coded product efficiently.","q":"How to design products using this skill from concept to execution?"},{"a":"Product Design incorporates best practices centered on design token extraction, component pattern identification, and codebase alignment auditing. It uses phased implementation frameworks with detailed task breakdowns and acceptance criteria to ensure consistent, efficient product delivery from design through development.","q":"What best practices and frameworks does Product Design provide?"},{"a":"Product Design integrates directly with Figma for design extraction and includes codebase auditing capabilities. It provides implementation planning tools that generate task breakdowns and acceptance criteria, enabling teams to reduce handoff time from hours to minutes and maintain design-to-code fidelity.","q":"What tools and resources are included in Product Design?"}],"shadow_tags":["design-methodology","user-centered-design","product-development","design-process","prototyping-workflow","design-strategy","feature-planning","design-thinking"],"summary_rewrite":"This skill streamlines the design-to-code workflow by connecting directly to Figma, extracting design tokens and component patterns, then auditing your codebase for alignment. It generates phased implementation plans with task breakdowns and acceptance criteria, cutting handoff time from hours to minutes."},"gist":{"api_url":"https://skillfed.io/api/skills/alekspetrov/navigator/product-design.json","as_of":"2026-07-15","description":"Product Design automates design handoff from Figma to code by extracting tokens, mapping components. npx skillfed install alekspetrov/navigator/product-design","install":{"manual":["git clone https://github.com/alekspetrov/navigator","cp -r navigator ~/.claude/skills/product-design"],"primary":"npx skillfed install alekspetrov/navigator/product-design","version":"f482da30"},"kind":"skill","mirror_url":"https://skillfed.io/alekspetrov/navigator/product-design.md","similar":[{"id":"TheQtCompanyRnD/agent-skills/qt-figma-token-extraction","name":"Qt Figma Token Extraction","publisher":"TheQtCompanyRnD/agent-skills","url":"https://skillfed.io/TheQtCompanyRnD/agent-skills/qt-figma-token-extraction"},{"id":"TheQtCompanyRnD/agent-skills/qt-figma-component-generation","name":"Qt Figma Component Generation","publisher":"TheQtCompanyRnD/agent-skills","url":"https://skillfed.io/TheQtCompanyRnD/agent-skills/qt-figma-component-generation"},{"id":"yonatangross/orchestkit/design-system-tokens","name":"design-system-tokens","publisher":"yonatangross/orchestkit","url":"https://skillfed.io/yonatangross/orchestkit/design-system-tokens"},{"id":"yonatangross/orchestkit/design-context-extract","name":"design-context-extract","publisher":"yonatangross/orchestkit","url":"https://skillfed.io/yonatangross/orchestkit/design-context-extract"},{"id":"yonatangross/orchestkit/figma-design-handoff","name":"figma-design-handoff","publisher":"yonatangross/orchestkit","url":"https://skillfed.io/yonatangross/orchestkit/figma-design-handoff"}],"title":"Product Design by alekspetrov: Learn product design principles and methodologies \u2014 SkillFed","use":{"when":["Product Design guides you through a structured workflow that bridges design and development.","Product Design emphasizes design-to-code alignment and systematic implementation."]},"what":{"lead":"Product Design automates design handoff from Figma to code by extracting tokens, mapping components, and generating implementation plans.","rest":"This skill streamlines the design-to-code workflow by connecting directly to Figma, extracting design tokens and component patterns, then auditing your codebase for alignment. It generates phased implementation plans with task breakdowns and acceptance criteria, cutting handoff time from hours to minutes."}},"id":"alekspetrov/navigator/product-design","install":{"mode":"external","repo":"https://github.com/alekspetrov/navigator"},"links":{"html":"https://skillfed.io/alekspetrov/navigator/product-design","md":"https://skillfed.io/alekspetrov/navigator/product-design.md","repo":"https://github.com/alekspetrov/navigator"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":11,"language":"Python","last_updated":"2026-07-15","license":null,"name":"Product Design","publisher":"alekspetrov","stars":196},"relations":{"similar":[{"id":"alekspetrov/navigator/nav-upgrade"},{"id":"TheQtCompanyRnD/agent-skills/qt-figma-token-extraction"},{"id":"TheQtCompanyRnD/agent-skills/qt-figma-component-generation"},{"id":"yonatangross/orchestkit/design-system-tokens"},{"id":"alekspetrov/navigator/social-media-post"},{"id":"dembrandt/dembrandt-skills/extract-design"},{"id":"yonatangross/orchestkit/design-context-extract"},{"id":"alekspetrov/navigator/nav-task"},{"id":"yonatangross/orchestkit/figma-design-handoff"},{"id":"nostrband/ServiceGraph/find-design-agency"}]},"slug":{"owner":"alekspetrov","repo":"navigator","skill":"product-design"},"version":"f482da30"}