/start-13-3.en

description: "Lesson command"
chapter: "courses/aiagent/lesson03-core/module13-lp/chapter.yaml"
prerequisites: ["start-13-2", "setup-pencil"]
duration: "~30 min"
level: "intermediate"
tags: ["lp", "pencil", "design", "mockup"]
nonInteractiveMode: deferred

🎓 Lesson 13-3: Create Design File (Pencil MCP)

📍 What You'll Do

Welcome to **Lesson 13-3: Create Design File**!

| Item | Details | |------|---------| | Goal | Create a Landing Page/Website design file (.pen) using Pencil MCP | | Duration | ~30 min | | Skills Used | lp-designer, Pencil MCP (user-pencil) | | Prerequisites | Lesson 13-2 complete (output/lp-wireframe.txt exists), Pencil MCP set up (/setup-pencil) | | Course Page | Refer to [Module 13: Landing Page/Website Design](https://ai-agent.camp/en/course/module-13) in parallel |

> **💡 Tool Info**: This lesson uses Pencil MCP. It is available in the current workspace and in Claude Code (CLI/Desktop). In some environments like Codex CLI, you may see a `request_user_input is not supported` error. In that case, refer to the "Alternative Workflow" section.

**Session flow:** 1. Create design file at `output/lp/lp-design.pen` with Pencil 2. Retrieve Landing Page design guidelines 3. Apply style guide 4. Create design for each section 5. Review design and export screenshots

By the end of this session, a professional-quality design file will be complete.

> **💡 Hint**: If the AI response stops midway, type "please continue" or "it stopped" to resume. Responses may pause depending on the tool, but this is not a malfunction.

---

🎯 Readiness Check

First, let's confirm everything is ready.

**AskQuestion settings:**

{
  "title": "🎯 Pre-Session Check",
  "questions": [{
    "id": "readiness",
    "prompt": "Are you ready?",
    "options": [
      {"id": "ready", "label": "Ready! Let's start"},
      {"id": "check_prereq", "label": "I want to check the prerequisites"},
      {"id": "view_html", "label": "I want to see the course page first"},
      {"id": "different_lesson", "label": "I want to go to a different lesson"}
    ]
  }]
}

(ready → Proceed to Step 1) (check_prereq → Check Pencil MCP connection) (view_html → Show course page path) (different_lesson → Display module list)

---

🚀 Step 1: Create New Pencil Document

Create a new .pen file with Pencil MCP.

**AskQuestion settings example:**

{
  "title": "🚀 Step 1: Create Pencil Document",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Continue"},
      {"id": "review", "label": "Just review examples"},
      {"id": "skip", "label": "Skip"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Create a new document for Landing Page design with Pencil MCP.

Steps:
1. Create destination directory with mkdir -p output/lp
2. Check current state with get_editor_state()
3. Create .pen file with open_document("output/lp/lp-design.pen")
4. Confirm the file is open

Destination: output/lp/lp-design.pen

**Expected result**: A design file is created and opened at `output/lp/lp-design.pen`.

---

🚀 Step 2: Retrieve Landing Page Design Guidelines

Retrieve Pencil's Landing Page design guidelines.

**AskQuestion settings example:**

{
  "title": "🚀 Step 2: Design Guidelines",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Continue"},
      {"id": "review", "label": "Just review examples"},
      {"id": "skip", "label": "Skip"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Retrieve Landing Page design guidelines from Pencil MCP.

Steps:
1. Get Landing Page design rules with get_guidelines(topic="landing-page")
2. Summarize key points of the guidelines
3. Highlight especially important rules (layout, typography, color)

We will follow these guidelines for the design.

**Expected result**: Landing Page design rules and best practices are displayed.

---

🚀 Step 3: Apply Style Guide

Select and apply a style guide matching the design tone.

**AskQuestion settings example:**

{
  "title": "🚀 Step 3: Style Guide Selection",
  "questions": [{
    "id": "step_action",
    "prompt": "What would you like to do with this step?",
    "options": [
      {"id": "practice", "label": "Continue"},
      {"id": "review", "label": "Just review examples"},
      {"id": "skip", "label": "Skip"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Read the design tone from output/lp-brief.md and apply a style guide
using Pencil MCP.

Steps:
1. Get tag list with get_style_guide_tags
2. Select tags matching the brief's design tone
3. Get style with get_style_guide(tags=["landing-page", "{tone}", "{category}"])
4. Review the style's color scheme, fonts, and layout patterns

Summarize the selected style overview.

**Expected result**: A style guide matching the design tone is applied.

---

🚀 Step 4: Create Section Designs

Create each section using batch_design.

**AskQuestion settings example:**

{
  "title": "🚀 Step 4: Section Design",
  "questions": [{
    "id": "design_approach",
    "prompt": "Select the design approach",
    "options": [
      {"id": "all_at_once", "label": "Create all sections at once"},
      {"id": "step_by_step", "label": "Create one section at a time with review"},
      {"id": "hero_first", "label": "Create only the Hero section first"}
    ]
  }]
}

**Post-selection instructions (example)**: Input:

Reference output/lp-brief.md and output/lp-wireframe.txt,
and create the Landing Page design using Pencil MCP's batch_design.

Create the following sections in order:

1. **Hero Section**
   - Background: gradient or image
   - Headline (H1): Use copy from the brief
   - Subheadline
   - CTA button (prominent color, rounded corners)
   - Hero image or mockup