wordle/.claude/skills/wds-4-ux-design/workflow-visual.md

---

name: 'workflow-visual'

description: 'Create visual representations of page designs using external tools and integrate results back into specifications.'

[W] Visual Design — Work with Visual Tools

Goal: Create visual representations of page designs using external tools and integrate results back into specifications.

When to use: When the user wants to create or review visual mockups, prototypes, or design artifacts using tools like Figma, Nano Banana, Stitch, or Pencil.io.

---

INITIALIZATION

Read design log at {output_folder}/_progress/00-design-log.md before starting.

Entry

Load page specification from {output_folder}/C-UX-Scenarios/.

Steps

Execute steps in ./steps-w/:

Step	File	Purpose
01	step-01-visual-approach.md	Choose visual tool and approach
02	step-02-generate-visual.md	Create visual representation
03	step-03-review-integrate.md	Review result and integrate into spec

Supported tools:

• Nano Banana — AI image generation for mockups
• Figma — Professional design tool integration
• Stitch — Component-based design
• Pencil.io — Quick wireframing
• HTML prototype — Code-based visual design

Reference data:

• ./data/guides/HTML-VS-VISUAL-STYLES.md — choosing between approaches
• ./data/guides/NANO-BANANA-PROMPT-GUIDE.md — prompt composition for AI image generation

---

AFTER COMPLETION

1. Append a progress entry to {output_folder}/_progress/00-design-log.md under ## Progress: ### [date] — Visual Design: [what was generated]
2. Suggest next action based on the adaptive dashboard (read Design Loop Status to find what needs attention next)