catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-12 02:37:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新 generate.md 和 layout-extract.md 文档：添加对参考图像的自动检测和使用说明

Browse Source
This commit is contained in:
catlog22
2025-10-12 10:11:08 +08:00
parent be2d0f24b6
commit 75ec70ad23
52 changed files with 25 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.claude/commands/workflow/ui-design/capture.md
View File

@@ -1,7 +1,6 @@
---
name: capture
description: Batch screenshot capture for UI design workflows using MCP or local fallback
usage: /workflow:ui-design:capture --url-map "<map>" [--base-path <path>] [--session <id>]
argument-hint: --url-map "target:url,..." [--base-path path] [--session id]
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), ListMcpResourcesTool(*), mcp__chrome-devtools__*, mcp__playwright__*
---

1
.claude/commands/workflow/ui-design/explore-layers.md
View File

@@ -1,7 +1,6 @@
---
name: explore-layers
description: Interactive deep UI capture with depth-controlled layer exploration
usage: /workflow:ui-design:explore-layers --url <url> --depth <1-5> [--session <id>] [--base-path <path>]
argument-hint: --url <url> --depth <1-5> [--session id] [--base-path path]
allowed-tools: TodoWrite(*), Read(*), Write(*), Bash(*), Glob(*), mcp__chrome-devtools__*
---

21
.claude/commands/workflow/ui-design/generate.md
View File

@@ -11,10 +11,11 @@ allowed-tools: TodoWrite(*), Read(*), Write(*), Task(ui-design-agent), Bash(*)
Pure assembler that combines pre-extracted layout templates with design tokens to generate UI prototypes (`style × layout × targets`). No layout design logic - purely combines existing components.
**Strategy**: Pure Assembly
- **Input**: `layout-templates.json` + `design-tokens.json`
- **Input**: `layout-templates.json` + `design-tokens.json` (+ reference images if available)
- **Process**: Combine structure (DOM) with style (tokens)
- **Output**: Complete HTML/CSS prototypes
- **No Design Logic**: All layout and style decisions already made
- **Automatic Image Reference**: If source images exist in layout templates, they're automatically used for visual context
**Prerequisite Commands**:
- `/workflow:ui-design:style-extract` → Style tokens
@@ -30,6 +31,8 @@ bash(find .workflow -type d -name "design-*" | head -1) # Auto-detect
# Get style count
bash(ls {base_path}/style-consolidation/style-* -d | wc -l)
# Image reference auto-detected from layout template source_image_path
```
### Step 2: Load Layout Templates
@@ -78,18 +81,29 @@ Task(ui-design-agent): `
1. Layout Template:
Read("{base_path}/layout-extraction/layout-templates.json")
Find template where: target={target} AND variant_id="layout-{layout_id}"
Extract: dom_structure, css_layout_rules, device_type
Extract: dom_structure, css_layout_rules, device_type, source_image_path
2. Design Tokens:
Read("{base_path}/style-consolidation/style-{style_id}/design-tokens.json")
Extract: ALL token values (colors, typography, spacing, borders, shadows, breakpoints)
3. Reference Image (AUTO-DETECTED):
IF template.source_image_path exists:
Read(template.source_image_path)
Purpose: Additional visual context for better placeholder content generation
Note: This is for reference only - layout and style decisions already made
ELSE:
Use generic placeholder content
## Assembly Process
1. Build HTML: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.html
- Recursively build from template.dom_structure
- Add: <!DOCTYPE html>, <head>, <meta viewport>
- CSS link: <link href="{target}-style-{style_id}-layout-{layout_id}.css">
- Inject placeholder content (Lorem ipsum, sample data)
- Inject placeholder content:
* Default: Use Lorem ipsum, generic sample data
* If reference image available: Generate more contextually appropriate placeholders
(e.g., realistic headings, meaningful text snippets that match the visual context)
- Preserve all attributes from dom_structure
2. Build CSS: {base_path}/prototypes/{target}-style-{style_id}-layout-{layout_id}.css
@@ -169,6 +183,7 @@ Configuration:
- Device Type: {device_type}
- Targets: {targets}
- Total Prototypes: {S × L × T}
- Image Reference: Auto-detected (uses source images when available in layout templates)
Assembly Process:
- Pure assembly: Combined pre-extracted layouts + design tokens

6
.claude/commands/workflow/ui-design/layout-extract.md
View File

@@ -144,6 +144,11 @@ Task(ui-design-agent): `
Each template must include:
- target (string)
- variant_id (string, e.g., "layout-1")
- source_image_path (string, REQUIRED): Path to the primary reference image used for this layout analysis
* For image input: Use the actual image file path from {images_pattern}
* For URL input: Use the screenshot path if available, or empty string
* For text/prompt input: Use empty string
* Example: "{base_path}/screenshots/home.png"
- device_type (string)
- design_philosophy (string)
- dom_structure (JSON object)
@@ -276,6 +281,7 @@ bash(echo '{json}' > {base_path}/layout-extraction/layout-templates.json)
{
"target": "home",
"variant_id": "layout-1",
"source_image_path": "{base_path}/screenshots/home.png",
"device_type": "responsive",
"design_philosophy": "Responsive 3-column holy grail layout with fixed header and footer",
"dom_structure": {