网页设计师

📌 Skill 基础信息

技能名称：Web Designer Knowledge Base

技能简称：web-designer

来源：社区第三方（FurlanLuka/crew）

运行宿主：只能在与 crew 框架兼容的 Agent 工具中运行

核心定位：为网页设计生成提供设计系统知识库，包含通用组件定义、布局技术、设计原则和 CSS 变量规范，支持生成独特且获奖级别的网站设计。

🧩 内部核心组成

该技能是一个设计参考数据知识库，包含以下核心组件：

参考文件集合

• references/design-definitions.md：通用设计工具包，包含UI组件池、页面区块、布局技术和设计原则
• references/design-techniques.md：设计思维原则和技术，包含视觉叙事、空间构成、色彩心理学等
• references/css-variables-spec.md：完整的CSS变量规范，包含颜色尺度、表面颜色、语义颜色等
• references/structured-markup-rules.md：结构化标记规则，包含数据属性使用和CSS组织约定

模板文件

• assets/theme-template.html：主题预览基础HTML模板，包含CSS注入占位符和预览区块

注意：此技能为支持型技能（user-invocable: false），不包含用户可调用的命令或工具表格，主要为其他设计Agent提供知识参考。

🛠 安装与启用方式

安装命令：

skills install --user FurlanLuka/crew

前置依赖：

• 需要运行在支持 crew 框架的 Agent 环境中
• 需要具备 Playwright 截图能力（用于实时视觉研究）

启用方式：作为设计Agent的知识库依赖自动加载，无需单独启用。

📋 标准工作流

1. 研究阶段：设计Agent在生成设计前读取 design-definitions.md 和 design-techniques.md 获取设计词汇和原则
2. 实时视觉研究：Agent使用Playwright对真实获奖网站进行截图分析（Awwwards等平台）
3. 主题生成前：读取 css-variables-spec.md 获取完整的CSS变量规范
4. 模型生成前：参考 structured-markup-rules.md 中的结构化标记规则
5. 主题生成阶段：使用 theme-template.html 作为基础模板进行CSS注入和预览

⚠️ 关键限制、缺陷、注意事项

平台限制：

• 只能在与 crew 框架兼容的 Agent 环境中运行
• 依赖 Playwright 进行实时网站截图和分析

适用项目：

• 需要生成高质量、获奖级别网站设计的项目
• 追求设计独特性和视觉冲击力的项目

不适用项目：

• 简单模板化网站项目
• 对设计创新性要求不高的基础项目

生产环境适用性：可作为设计生成系统的知识库组件，但需要配合完整的设计生成Agent使用。

✅ 适用场景 & ❌ 不适合场景

✅ 适用场景：

• 设计团队需要参考获奖设计标准和原则
• 自动化网站设计生成系统开发
• 需要保持设计一致性和高质量标准的企业项目
• 追求视觉创新和独特性的设计项目

❌ 不适合场景：

• 只需要基础模板化设计的简单项目
• 无需设计创新性的标准化业务系统
• 缺乏配套设计生成Agent的孤立环境
• 对设计多样性要求不高的基础网站建设

skills install --user FurlanLuka/crew