AgentSkillsCN

landing

为用户故事生成HTML界面原型。在用户想要创建UI原型、制作产品原型，或提及“/mockups”命令时使用此功能。

SKILL.md
--- frontmatter
name: landing
description: Create landing page iterations with 3 variants. Use when user wants to create new landing page versions, improve the landing, or mentions /landing command.

Create Landing Page Iteration

Create a new landing page iteration with 3 variants based on provided improvements.

Usage

code
/landing [improvement description or prompt file path]

Workflow

Phase 1: Context Gathering

Before making any changes, read and understand:

  1. •Current landing: index.html
  2. •Product description: ProductSpecification/BriefProductDescription.txt
  3. •User stories: ProductSpecification/MvpStories.txt
  4. •Story specifications: ProductSpecification/stories/*/NN_StoryName.md
  5. •UI Mockups: ProductSpecification/stories/*/mockups/
  6. •Previous prompts: ProductSpecification/Archived/prompts/ (if archived landing prompts exist)
  7. •Latest version folder: Check ProductSpecification/Landing-UI/LandingVersions/ to determine next version number (if Landing-UI exists)

Phase 2: Analyze Requirements

If user provided a prompt file path (e.g., Draft/LandingPrompt#5.txt):

  • •Read the file and extract improvement requirements
  • •Summarize what needs to change

If user provided inline description:

  • •Parse the improvement requirements from their message

Phase 3: Create Variants

  1. •Determine next version number (vN+1)
  2. •Create folder: ProductSpecification/Landing-UI/LandingVersions/vN+1/

Phase 4: Design Constraints (MUST follow)

  • •Color scheme: Light theme with neon green accent #00e87b
  • •Language: English
  • •Responsive: Mobile/tablet/desktop
  • •Animations: Scroll-triggered fade animations
  • •Phone input: International format
  • •Never modify: Original index.html and sections that are not supposed to be changed
  • •Never modify: Sections that are not the topic of the prompt

Phase 6: Output Summary

After creating variants, provide:

  1. •List of created files with paths
  2. •Brief description of each variant's approach
  3. •Key differences between variants
  4. •Recommendation on which to review first

Example Invocations

code
/landing Draft/LandingPrompt#5.txt
code
/landing Improve the "how it works" section with product mockups and add a profits highlight before pricing

Notes

  • •Always create 3 variants so user can compare approaches
  • •Variants should be meaningfully different, not minor tweaks
  • •Stay consistent with design decisions from previous prompts