brand-to-design-md-skill
将品牌官网URL自动转换为结构化设计文档的本地技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：brand-to-design-md-skill。 它的用途是：将品牌官网URL自动转换为结构化设计文档的本地技能 完整的 Skill 内容见：https://321skill.com/skills/brand-to-design-md-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘使用brand-to-design-md技能，分析 https://tailwindcss.com 并生成一份DESIGN.md文档，同时创建一个响应式演示HTML。’ 它会自动访问该URL，提取颜色、字体、按钮、卡片等视觉元素，生成一份结构化的设计指南，并附上一个可以预览这些设计令牌实际效果的HTML页面供你验证。
介绍
这个技能解决了设计师和前端开发者在接手新项目或进行品牌设计审计时，需要手动从零收集、整理品牌视觉规范的繁琐问题。它通过分析公开的品牌官网URL，自动抓取页面中的颜色、字体、布局、组件、图标和图片等视觉证据，并将其系统化地整理成一份标准的DESIGN.md文档，包含设计令牌、组件使用指南、使用边界和注意事项。
使用时，你只需将品牌官网的公开URL提供给搭载此技能的AI助手（如Claude、Cursor等），它就会自动运行分析，生成一份包含颜色色板、字体阶梯、间距系统、组件示例、Logo使用规范以及“该做/不该做”指导的完整设计文档。你还可以要求它生成一个响应式的HTML演示文件，用于视觉验证。
该技能非常适合UI/UX设计师、前端开发者、产品经理以及需要进行品牌一致性检查或设计系统构建的团队。它尤其能帮助快速理解第三方品牌的设计语言，或在团队内部建立统一的设计文档起点。
与单纯的CSS提取器或颜色拾取工具不同，Brand to DESIGN.md的核心在于“理解与翻译”。它不仅仅是抓取代码，而是试图理解视觉元素在设计系统中的作用，并将其转化为可供人类阅读和执行的“设计指南”。它生成的DESIGN.md文件结构清晰，可直接作为项目设计文档的基础，而不仅仅是原始数据的堆砌。
核心特点
核心区别在于它不仅提取原始CSS变量或颜色值，更致力于“理解”视觉元素并生成具有指导意义的“设计指南”（DESIGN.md），包含组件用法、使用边界和“该做/不该做”等实用建议，而非简单的数据抓取。
注意事项
不适合分析需要登录或具有复杂动态渲染的网站，也无法解读非公开或未在页面上明确展示的品牌内部设计决策。
常见问题
这个技能能分析任何网站吗？
只能分析公开可访问的URL，无法处理需要登录、有反爬机制或重度依赖JavaScript动态渲染的页面。
生成的DESIGN.md可以直接用吗？
可以作为优秀的设计文档起点和审计参考，但可能仍需人工根据项目具体上下文进行复核和调整。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/brand-to-design-md-skill/raw/index.md 读取 brand-to-design-md-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/brand-to-design-md-skill/raw/index.md（查看排版版本）