网站风格指南生成器

技能简介

该技能通过分析网站URL、截图或现有文档，自动生成结构完整的专业风格指南PDF。输出内容涵盖品牌标识、色彩体系、字体规范、UI组件说明及无障碍标准，为设计与开发团队提供统一的设计决策依据。

业务背景

网站风格指南生成器解决多团队协作中的设计不一致难题。通过智能解析现有网站或品牌素材，自动输出涵盖色彩、字体、组件及无障碍标准的完整规范文档，确保设计师与开发者在同一套决策框架下工作，减少反复沟通成本，加速产品迭代同时维护品牌视觉的统一性与专业度。

落地案例：一家金融科技公司收购子品牌后，需要快速统一双方产品的视觉体验。市场团队提交子品牌官网URL与现有VI手册，系统自动提取主色板、辅助色系、标题与正文字体层级，并生成包含WCAG 2.1 AA合规说明的PDF指南。设计负责人确认结构后输出终版文档，两周内即完成两家产品界面风格的整合落地。

能做什么

• 从网址抓取页面元素并解析设计风格
• 识别并整理色彩、字体、图标等视觉规范
• 生成包含版本号与更新日期的标准化PDF文档
• 输出WCAG 2.1 AA级别的无障碍合规说明
• 建立可复用的组件代码片段与使用规则

使用说明

1. 准备输入材料：目标网站URL、界面截图、或现有品牌文档
2. 调用技能并上传材料，系统将自动提取设计元素
3. 根据提示补充品牌使命、愿景等背景信息（如未提供）
4. 确认生成的规范结构后，执行PDF渲染指令
5. 下载最终文档并分发给相关团队成员

安装指令：本技能无需本地安装，通过平台技能市场直接调用即可使用。

输入与输出

见下方输入与输出表格。

风险提示

• 依赖外部网页抓取时，受目标站点反爬策略影响可能获取不完整
• 自动识别的色彩对比度需人工复核以满足实际无障碍要求
• 生成的代码片段仅供参考，生产环境使用前需测试验证
• PDF排版效果因内容长度可能出现分页断裂，需预留调整时间

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/tomstools11/style-guide-generator/SKILL.md
来源类型：GitHub仓库