Convert a website into a design system with tokens, typography, and CSS artifacts.
npx skills add https://github.com/ricocc/rico-skills --skill rico-design-md
Please help me install this Agent Skill. Skill: rico-design-md Source: https://github.com/ricocc/rico-skills/tree/main/skills/rico-design-md Command: npx skills add https://github.com/ricocc/rico-skills --skill rico-design-md
Convert website visuals into a ready-to-use design system: DESIGN.md, tokens, and CSS artifacts, reducing manual design-system toil.
Provide a website URL to generate DESIGN.md and the full set of design-system artifacts for your brand.
High-intent search queries and answers about installing and using this skill.
Yes, you can generate a comprehensive DESIGN.md file directly from a website URL. The file enforces structure and style conventions using reference templates to document brand guidelines and design decisions for your project.
Converting website visuals into CSS variables involves extracting design tokens and exporting them into variables.css and theme.css files. This approach reduces manual design-system toil by automatically mapping visual styles into reusable CSS variables.
Yes, the workflow supports bidirectional format conversions between DESIGN.md and design token files like tokens.json, variables.css, and theme.css. You can transform brand documentation into code assets or reverse the process as needed.
No dependencies or components are required to generate a design system from a website. You simply provide the target website URL to produce the full set of design-system artifacts, including a preview.html file for visual validation.
yonetim258852Extract design tokens from live websites using Dembrandt.
Adelie-SquadCreate and apply design tokens for color, typography, and spacing.
shawn-sandyExtract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.
DITEKmaxExtracts a semantic design system from websites or screenshots into a .design/DESIGN.md file.
