Translates design-engine outputs into production-ready implementation work using native components and design tokens.
This skill bridges the gap between raw design artifacts and production-grade code by translating design-engine results into repo-native implementations. Rather than simply pasting generated markup, it prioritizes the reuse of existing UI primitives, theme tokens, and Flutter widgets to ensure consistency with the established codebase. It maintains high visual standards while preparing the code for testing with integrated QA hooks, making it ideal for developers moving from design approval to active implementation in React, Flutter, or other modern UI frameworks.
主要功能
01Prioritizes existing repository tokens and UI primitives over raw generation
02Integrates QA hooks and semantic labels for automated testing
03Preserves typography, rhythm, and motion rules during handoff
04Maps Flutter widgets and theme extensions for mobile-first development
051 GitHub stars
06Translates design semantics into stack-specific widgets and components
使用场景
01Converting a design screen brief into a functional Flutter or React implementation
02Ensuring design fidelity and quality constraints are met during frontend handoff
03Refactoring AI-generated UI code to use an existing design system's tokens
