shaom/brand-to-design-md-skill
GitHub: shaom/brand-to-design-md-skill
将公开品牌 URL 自动转化为具备来源溯源的设计规范文档（DESIGN.md），提取 design tokens、组件指南并可选生成响应式 demo。
Stars: 136 | Forks: 10
# Brand 到 DESIGN.md Skill
一款便携的本地 Skill，能够将公开的品牌 URL 转化为具备来源溯源的 `DESIGN.md`，将视觉证据提取为 design tokens、组件指南、使用边界以及可选的响应式 demo 验证。
## 在线体验
[](https://socialistic.ai/zh/skill/brand-to-design-md-skill-961624?utm_source=github&utm_medium=readme&utm_campaign=20260524-x-claude-skill-builders&utm_content=badge)
粘贴公开的品牌 URL，无需在本地安装该 Skill 即可生成 `DESIGN.md`。
## 功能简介
- 从官方页面、新闻素材包、CSS、SVG、图像和设计案例研究中收集公开的品牌证据。
- 将品牌证据转化为 design tokens 和实用的组件指南。
- 生成具备来源溯源的 `DESIGN.md`，包含颜色、排版、布局、组件、图像、logo 使用边界以及建议/禁忌指南。
- 可选地创建并验证响应式 HTML demo。
## Skill 位置
该 Skill 位于：
```
skills/brand-to-design-md/SKILL.md
```
本仓库特意排除了特定于 agent 的元数据，以保持该 Skill 的可移植性。
## 用法
将 `skills/brand-to-design-md` 文件夹安装或复制到任何支持本地 Skill 的 agent 环境中，包括 Codex、Claude Code、Cursor 和 OpenClaw。
如果您的环境支持 `skills` CLI，可以直接从 GitHub 安装：
```
npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md
```
示例 prompt：
```
Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.
```
标签：AI Agent技能, CSS提取, 后端开发, 多模态安全, 文档结构分析, 设计代币, 设计系统, 设计规范, 防御加固