design-md

The 'design-md' skill is designed to facilitate the creation of 'DESIGN.md' files, which serve as a central source of truth for generating consistent and visually aligned screens within Stitch projects. This skill analyzes technical assets within a project, synthesizing a semantic design system from the provided design language. By translating these elements into a 'DESIGN.md' file, it ensures that new screens generated by Stitch adhere to the same aesthetic and functional principles as the original designs. It bridges the gap between design and technical execution by making sure that new screens align perfectly with the established design language, reducing inconsistencies and improving design coherence across a project.

The skill enables users to extract metadata, design assets, and project-level design guidelines from Stitch projects. By pulling visual references, HTML/CSS code, and project metadata, it allows for the synthesis of a detailed design description, including color palettes, geometry, and shape descriptions. It also supports mapping colors with descriptive names and their roles, ensuring that new designs match the mood and style of the existing project. The overall atmosphere of a design, including its mood and layout, is also captured and documented for precise replication.

This skill is particularly useful for design system leads, UI/UX designers, and developers working with Stitch projects. It ensures the creation of highly consistent and reproducible design outputs, which is critical when maintaining design systems over time. Target users include those who need to automate the creation of design files that guide screen generation, ensuring design integrity across various teams and stages of a project.