feat: sync full workspace including web modules, docs, and configurations to Gitea
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
王冕
28
axhub-make/skills/screenshot-page-workflow/SKILL.md
Normal file
28
axhub-make/skills/screenshot-page-workflow/SKILL.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
name: screenshot-page-workflow
|
||||
description: 基于网页或 App 截图进行视觉分析与原型还原的流程规范；在需要截图识别、资产提取（功能/交互/业务分析）、页面代码生成与验收时使用。
|
||||
---
|
||||
|
||||
# 截图原型还原规范
|
||||
|
||||
本技能采用渐进披露：先判断用户需求，再只打开相关文档。
|
||||
|
||||
## 快速分流
|
||||
|
||||
- 资产提取（功能/交互/业务分析）：`skills/screenshot-page-workflow/asset-extraction.md`
|
||||
- 原型还原/代码实现：`skills/screenshot-page-workflow/prototype-restoration.md`
|
||||
|
||||
## 通用前置（任何场景都需要）
|
||||
|
||||
1. 视觉能力检测：模型不支持视觉时必须立即告知用户并停止截图流程。
|
||||
2. 接收截图：支持拖拽/粘贴/路径；临时保存到 `temp/screenshots/`。
|
||||
|
||||
## 通用约束
|
||||
|
||||
- 截图分析完全依赖视觉能力，不支持时不得继续。
|
||||
- 未经用户确认不扩展需求。
|
||||
- 及时说明当前进度与限制。
|
||||
|
||||
## 参考资源
|
||||
|
||||
- `development-guide.md`
|
||||
149
axhub-make/skills/screenshot-page-workflow/asset-extraction.md
Normal file
149
axhub-make/skills/screenshot-page-workflow/asset-extraction.md
Normal file
@@ -0,0 +1,149 @@
|
||||
# 截图资产提取流程
|
||||
|
||||
目标：基于截图进行视觉分析，产出设计主题、设计规范文档与数据模型等资产。只描述“做什么”（WHAT），不描述“如何实现”（HOW）。
|
||||
|
||||
## 工作流程
|
||||
|
||||
### 1) 视觉能力检测
|
||||
|
||||
模型不支持视觉时，用户提供截图后立即告知并停止
|
||||
|
||||
### 2) 接收截图
|
||||
|
||||
- 支持拖拽/粘贴/路径提供的截图
|
||||
- 优先收集 3-5 个核心页面（首页/登录/主要功能页）以便识别统一视觉语言
|
||||
- 临时保存到 `temp/screenshots/` 并验证文件格式和大小
|
||||
|
||||
### 3) 本地图片读取能力验证
|
||||
|
||||
- 尝试读取已提供的本地截图文件
|
||||
- **如果无法直接读取本地图片**（工具不支持或返回错误），必须：
|
||||
- 立即停止流程
|
||||
- 告知用户："无法读取本地图片，请将 `[图片绝对路径]` 复制到对话框后提交"
|
||||
- 等待用户提交图片后再继续
|
||||
- 禁止假设或猜测图片内容
|
||||
- 禁止通过 Base64 编码读取图片内容
|
||||
### 4) 视觉分析（截图为最高优先级）
|
||||
|
||||
**文本内容**
|
||||
- 识别可见文本
|
||||
- 判断文本层级（标题、正文、辅助文本）
|
||||
- 理解文本语义与上下文
|
||||
|
||||
**布局结构**
|
||||
- 整体布局方式（栅格、弹性布局）
|
||||
- 区域划分与层级关系
|
||||
- 组件排列与对齐方式
|
||||
|
||||
**组件识别**
|
||||
- 识别 UI 组件类型（按钮、输入框、卡片、导航等）
|
||||
- 组件状态（默认、悬停、禁用等）
|
||||
- 交互元素与功能
|
||||
|
||||
**设计细节**
|
||||
- 字体样式与大小
|
||||
- 间距和留白
|
||||
- 圆角和边框
|
||||
- 阴影和层次
|
||||
- 颜色使用与主题
|
||||
- 设计语言总结（品牌气质、视觉关键词、形状语言、排版节奏、组件风格）
|
||||
|
||||
### 5) 提取设计主题
|
||||
|
||||
基于视觉分析提取设计系统：
|
||||
|
||||
**颜色系统**
|
||||
- 主色/辅助色/中性色
|
||||
- 生成色阶（50-900）
|
||||
- 语义化颜色（成功/警告/错误）
|
||||
|
||||
**排版系统**
|
||||
- 字体家族和权重
|
||||
- 字号层级
|
||||
- 行高和字间距
|
||||
|
||||
**间距系统**
|
||||
- 常用间距值
|
||||
- 间距规范
|
||||
|
||||
**其他 Token**
|
||||
- 圆角规范
|
||||
- 阴影层级
|
||||
- 边框样式
|
||||
|
||||
**输出位置**：`src/themes/<theme-key>/`
|
||||
**必需文件**：
|
||||
- `globals.css` 或 `designToken.json`（`designToken.json` 必须包含 `name` 字段，二选一，遵循 `theme-guide.md`）
|
||||
- `DESIGN.md`（基于多页面截图总结设计规范）
|
||||
- `index.tsx`（主题演示页）
|
||||
|
||||
### 6) 提取数据模型（可选）
|
||||
|
||||
截图包含列表/表格/表单时识别数据结构并生成数据库文件。
|
||||
|
||||
**输出位置**：`src/database/`
|
||||
**文件命名**：英文文件名（如 `users.json`、`products.json`）
|
||||
|
||||
**文件格式**：
|
||||
```json
|
||||
{
|
||||
"tableName": "表名（中文）",
|
||||
"records": [
|
||||
{ "id": 1, "字段1": "值1", "字段2": "值2" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**关键原则**：
|
||||
- 文件名使用英文；`tableName` 使用中文。
|
||||
- 字段名优先中文。
|
||||
- 从截图提取真实数据，不足时生成合理模拟数据。
|
||||
- 每个表生成 10-30 条记录。
|
||||
|
||||
## 默认方案（用户未明确需求时）
|
||||
|
||||
- 提取设计主题并生成设计规范文档
|
||||
- 识别数据模型（如有）
|
||||
|
||||
## 用户交互指南
|
||||
|
||||
### 初始对话
|
||||
|
||||
```
|
||||
您好！我可以帮您基于截图提取资产（设计主题 / 设计规范文档 / 数据模型）。
|
||||
|
||||
请提供截图，我将通过视觉分析提取资产。
|
||||
```
|
||||
|
||||
### 需求确认
|
||||
|
||||
```
|
||||
✓ 已分析截图。
|
||||
|
||||
默认方案：
|
||||
- 提取设计主题并生成设计规范文档
|
||||
- 识别数据模型（如有）
|
||||
|
||||
回复"接受"按默认方案执行，或告诉我您的具体需求。
|
||||
```
|
||||
|
||||
### 进度通知
|
||||
|
||||
```
|
||||
正在分析截图...
|
||||
✓ 已识别文本和布局结构
|
||||
✓ 已分析组件类型和设计细节
|
||||
✓ 已提取设计主题
|
||||
⏳ 正在生成数据模型...
|
||||
```
|
||||
|
||||
### 完成总结
|
||||
|
||||
```
|
||||
✅ 已完成！
|
||||
|
||||
生成的资产：
|
||||
- 设计主题：src/themes/<theme-key>/
|
||||
- 设计规范文档：src/themes/<theme-key>/DESIGN.md
|
||||
- 数据模型：src/database/（如有）
|
||||
```
|
||||
@@ -0,0 +1,85 @@
|
||||
# 截图页面还原与实现
|
||||
|
||||
基于截图生成可维护的页面代码资产。
|
||||
|
||||
**核心方法**：看图 → 写代码 → 交付。
|
||||
|
||||
## 默认目标与可选优化
|
||||
|
||||
- **默认目标**：在用户未提出额外要求时，尽量 1:1 像素级还原截图的视觉与布局（不主动“改版”）。
|
||||
- **可选优化**：如需我同时做“优化设计/交互”（信息结构调整、视觉升级、交互补全、可用性优化等），请在需求里明确说明；否则仅做还原与基础走查修复。
|
||||
|
||||
## 核心流程
|
||||
|
||||
1. **确认前置条件**
|
||||
- 确认模型支持视觉识别（不支持则立即告知用户）
|
||||
- 确认可以直接读取图片内容（不需要转换，不支持则立即告知用户）
|
||||
- 生成页面名称（规范：小写字母、数字、连字符）
|
||||
|
||||
2. **获取截图**
|
||||
- 使用用户提供的截图（本地路径或对话中上传）
|
||||
- 如仅提供外链或不可读路径，需请用户提供可读的本地文件或重新上传
|
||||
|
||||
3. **验证图片读取能力**
|
||||
- 尝试读取已提供的截图文件
|
||||
- **如果无法直接读取本地图片**（工具不支持或返回错误），必须：
|
||||
- 立即停止流程
|
||||
- 告知用户："无法读取本地图片，请将 `[图片绝对路径]` 复制到对话框后提交"
|
||||
- 等待用户提交图片后再继续
|
||||
- 禁止假设或猜测图片内容
|
||||
- 禁止通过 Base64 编码读取图片内容
|
||||
|
||||
4. **生成页面代码**
|
||||
|
||||
- 直接基于截图生成页面代码
|
||||
- 在代码生成过程中内部完成：
|
||||
- 识别布局结构（Header/Sidebar/Content 等）
|
||||
- 识别组件（Button/Input/Table/Card 等）
|
||||
- 提取样式（颜色、字体、间距、圆角、阴影等）
|
||||
- 识别交互（点击、悬停、状态切换等）
|
||||
|
||||
**输出文件**：
|
||||
- `src/prototypes/<page-name>/index.tsx`
|
||||
- `src/prototypes/<page-name>/style.css`（必须包含 `@import "tailwindcss";`）
|
||||
- `src/prototypes/<page-name>/components/`（根据需要）
|
||||
|
||||
**核心代码规范**（必须遵守）：
|
||||
```typescript
|
||||
// index.tsx 结构
|
||||
/**
|
||||
* @name 页面显示名称
|
||||
*/
|
||||
import './style.css';
|
||||
import React from 'react';
|
||||
|
||||
const Component = function PageName() {
|
||||
return <div>...</div>;
|
||||
};
|
||||
|
||||
export default Component;
|
||||
```
|
||||
```css
|
||||
/* style.css 必须以此开头 */
|
||||
@import "tailwindcss";
|
||||
```
|
||||
- 变量名必须是 `Component`，使用 `export default Component`
|
||||
- 详细规范见 `rules/development-guide.md`
|
||||
|
||||
5. **验收页面还原**
|
||||
- 运行验收命令：`node scripts/check-app-ready.mjs /prototypes/[页面名]`
|
||||
- 提供预览 URL
|
||||
- 确认页面基础功能正常（无编译错误、可正常访问）
|
||||
|
||||
6. **生成规格文档**
|
||||
- 基于已验收通过的页面代码生成规格文档
|
||||
- 输出文件：`src/prototypes/<page-name>/spec.md`
|
||||
- 文档内容应包括：
|
||||
- 页面结构说明
|
||||
- 组件清单
|
||||
- 样式规范（颜色、字体、间距等）
|
||||
- 交互说明
|
||||
- 数据需求（如有）
|
||||
|
||||
7. **最终交付**
|
||||
- 告知用户页面还原和规格文档已完成
|
||||
- 说明可进行二次生成（修复问题或优化重构）
|
||||
Reference in New Issue
Block a user