wordle/.claude/skills/wds-4-ux-design/data/page-creation-flows/workshop-page-creation.md

Workshop: Page Creation (Discussion-Based)

Purpose: Define a page concept through conversation, create visualization method based on need

---

CONTEXT

This workflow activates when: User needs to define a page concept but doesn't have a visualization yet.

Goal: Define what the page IS, then choose how to visualize it.

Philosophy: The page (concept) comes first. Visualization (method) follows.

---

STEP 1: PAGE CONCEPT

What is this page about?

Tell me in your own words:

• What is this page called?
• What should it accomplish?
• Who uses it and why?

Describe the page concept:

Store page_concept

---

STEP 2: VISUALIZATION PREFERENCE

How would you like to visualize this page?

[A] I'll draw a sketch (physical/digital) and upload it [B] Let's describe it verbally - I'll specify sections through discussion [C] Create a simple ASCII layout together [D] It's similar to another page I can reference [E] Generate HTML prototype - I'll screenshot it for documentation

Choice:

Store visualization_method

---

FLOW ROUTING

Based on user choice, load the appropriate flow:

Choice	Flow	File
A	Sketch Path	flow-a-sketch.md
B	Verbal Specification	flow-b-verbal.md
C	ASCII Layout	flow-c-ascii.md
D	Reference Page	flow-d-reference.md
E	HTML Prototype	flow-e-html.md

Load and execute the selected flow substep

---

COMPLETION

**Page concept defined!** 🎯 **Page:** {{page_name}} **Method:** {{visualization_method_description}} **Status:** Conceptual specification complete **The page is the place where visualization meets specification.** **What would you like to do next?** [A] Create/upload sketch for this page [B] Create another page [C] Review what we've created [D] Back to scenario overview Choice:

---

KEY PHILOSOPHY

✅ Page-Centric Thinking

The page is the conceptual entity:

• Has a purpose
• Serves users
• Contains sections
• Has interactive objects
• Exists in a flow

The visualization is one representation:

• Sketch (preferred)
• Wireframe
• ASCII (last resort)
• Verbal description
• Reference to similar page

The page comes first. Visualization follows.

✅ Flexible Methods

Different projects need different approaches:

• Early concept → Verbal/ASCII → Sketch later
• Clear vision → Sketch directly
• Existing patterns → Reference + differences
• Iterative → Mix of methods

The workshop adapts to YOUR process.

---

INTEGRATION

This workshop creates:

1. Conceptual page specification (always)
2. Placeholder for visualization (always)
3. Guidance for next steps (always)

Next workshops use:

• workshop-page-process.md - When sketch is ready
• page-init-lightweight.md - For quick structure
• 4b-sketch-analysis.md - For detailed analysis

---

Created: December 28, 2025 Purpose: Define page concept, choose visualization method Philosophy: Page first, visualization second Status: Ready for use