design-guide
✓从网站中提取全面的设计语言，包括颜色、排版、动画、交互状态、阴影、渐变、组件模式和用户体验行为。生成像素完美的设计指南，包含响应式屏幕截图和完整的设计系统文档。在分析网站设计、创建设计系统或重建网站时使用。
SKILL.md
Extract the complete design language from any website with automated analysis of colors, typography, animations, interactions, and UX patterns. Goes far beyond basic CSS extraction to capture the full design system.
✅ design-guide.md - Main comprehensive guide ✅ All screenshots - Visual reference ✅ designdata.json - Structured data for programmatic use ✅ Source files - HTML, CSS, computed styles
Optional: ✅ Recreated components - If requested ✅ Comparison analysis - If analyzing multiple sites ✅ Token library - CSS/SCSS variables file
从网站中提取全面的设计语言，包括颜色、排版、动画、交互状态、阴影、渐变、组件模式和用户体验行为。生成像素完美的设计指南，包含响应式屏幕截图和完整的设计系统文档。在分析网站设计、创建设计系统或重建网站时使用。 来源：tyrchen/claude-skills。
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 design-guide？
从网站中提取全面的设计语言，包括颜色、排版、动画、交互状态、阴影、渐变、组件模式和用户体验行为。生成像素完美的设计指南，包含响应式屏幕截图和完整的设计系统文档。在分析网站设计、创建设计系统或重建网站时使用。 来源：tyrchen/claude-skills。
如何安装 design-guide？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/tyrchen/claude-skills --skill design-guide 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/tyrchen/claude-skills
详情
- 分类
- *创意媒体
- 来源
- skills.sh
- 收录时间
- 2026-02-01