前端设计工具包

## 概述

一个设计到页面的工作流：从设计方向开始，制作视觉稿，然后构建落地页 —— 三个互补工具集成在一个插件中。

- **frontend-design** —— 定义视觉标识：风格、配色、字体和生产级组件代码
- **canvas-design** —— 创建视觉稿：海报、首屏图像和布局艺术，输出为 PNG/PDF
- **page-builder** —— 使用 Tailark 组件组装落地页，包含结构化区块

## 快速开始

1. 安装插件：`npx skillstore add @frontend-design-toolkit`
2. 向 **frontend-design** 描述你的项目和目标受众 → 获得风格方向、配色方案和组件代码
3. 使用 **canvas-design** 制作与风格匹配的首屏图像、横幅或视觉素材
4. 将设计规范和内容交给 **page-builder** → 获得完整的落地页

## 完整示例：构建产品发布页

**第 1 步 —— 设计方向**
> "为开发者工具 SaaS 创建一个设计系统。现代风格，深色主题，使用蓝色和紫色点缀。"

frontend-design 返回：配色方案、字体比例、生产就绪的按钮/卡片组件代码。

**第 2 步 —— 视觉素材**
> "为落地页创建首屏横幅。抽象几何形状，深色背景，蓝色渐变。"

canvas-design 生成与既定配色匹配的 PNG 首屏图像。

**第 3 步 —— 页面组装**
> "构建一个落地页，包含：首屏区块、三列功能网格、价格表、CTA 页脚。"

page-builder 使用 Tailark 组件生成完整页面，整合第 1 步的设计规范。

## 适用范围与边界

**此工具包适用于：**
- 新落地页、营销页、活动页
- 产品发布页和推广微站点
- 原型和设计探索
- 作品集页和个人站点

**不适用于：**
- 接管现有的复杂 Web 应用
- 替换已在生产环境使用的完整设计系统
- 电商结账流程或多步表单
- 服务端渲染或后端集成

## 失败处理

- **设计与品牌不匹配** → 返回第 1 步（frontend-design）并优化风格方向。在重新生成下游素材之前调整配色、字体或氛围
- **视觉稿偏离目标** → 使用更具体的约束重新运行 canvas-design。明确引用第 1 步的设计规范
- **页面结构错误** → 使用区块级别的说明修改 page-builder 提示。输出是标准 HTML/Tailwind —— 可以随时手动编辑
- **绝不自动部署到生产环境** —— 所有输出都是本地文件。你需要审核并手动部署
- **对生成素材进行版本管理** —— 保存每次迭代，以便你可以比较并回滚到之前的设计方向

## 提示

- 从 frontend-design 开始时先从宏观入手，再逐步细化。清晰的风格方向会让其他两个工具更加有效
- canvas-design 创建原创艺术作品 —— 它从不复制现有艺术家的作品
- page-builder 使用具体的区块描述效果最好，而不是模糊的请求
- 三个工具都生成静态输出（代码、图像、HTML）—— 无运行时依赖