design-system-showcase

Generate design system documentation by processing real project artifacts to output comprehensive guidelines, tokens, and code snippets. This Skill automates the extraction of your visual language and documentation from existing project assets.

Create a web showcase by automating the generation of an interactive website that demonstrates your design system in real-world scenarios. The Skill processes your project artifacts to build a professional-looking showcase package.

Yes, you can build a design system from an existing product or brand. The Skill requires a clear understanding of the project's visual language and artifacts to automate the construction of cohesive design packages.

You need to prepare your project's real design artifacts, documentation, and a clear understanding of its visual language. These inputs are required for the Skill to accurately process and generate code, documentation, and the web showcase.

Yes, the generated documentation includes code snippets alongside design tokens and guidelines. The Skill outputs comprehensive documentation by processing your real project artifacts to ensure accurate implementation details.