AgentSkillsCN

prototype

快速UI原型设计——根据文本提示生成3个视觉上截然不同的HTML/CSS组件，每个都由独特的物理/材料隐喻驱动。当用户运行/prototype、要求“为UI做原型”、“模拟一个组件”、“生成HTML原型”、“创建UI变体”、“设计探索”、“快速UI概念”或希望看到组件的多种视觉方案时，就使用此技能。此外，当用户说“给我看不同的构建方式……”、“探索不同的设计……”或希望快速可视化探索UI创意时——即使未明确说出“原型”——也触发该技能。

SKILL.md
--- frontmatter
name: prototype
description: Rapid UI prototyping — generates 3 visually distinct HTML/CSS components from a text prompt, each driven by a unique physical/material metaphor. Use when user runs /prototype, asks to "prototype a UI", "mock up a component", "generate HTML mockups", "create UI variations", "design exploration", "quick UI concept", or wants to see multiple visual approaches to a component. Also trigger when user says "show me different ways to build...", "explore different designs for...", or wants rapid visual exploration of a UI idea — even without saying "prototype" explicitly.
argument-hint: "<component description> [--vary <1|2|3>] [--dir <output-dir>]"

Prototype

Generate 3 visually distinct, high-fidelity HTML/CSS UI components from a single text prompt. Each component adopts a unique design persona based on physical/material metaphors — producing genuinely different visual approaches, not just color swaps.

Quick Start

Parse $ARGUMENTS for the component description, optional --vary N flag, and optional --dir <path>.

If --vary N is present, skip to the Variation Workflow section.

If the description is vague (e.g., "button", "form"), just generate — don't ask clarifying questions. The value of this skill is speed. Interpret vague prompts generously and produce something interesting.

Follow these 3 phases in order for new generation. Do not pause between phases or ask for confirmation — generate everything in one pass.

Phase 1: Style Direction

Think of 3 distinct design direction names for the user's prompt. Each name uses a physical/material metaphor — never artist names, brands, or copyrighted references.

Name pattern: [Adjective] + [Material/Process] + [Form/Action]

Tone guide (invent your own, do not copy these):

  • •"Asymmetrical Rectilinear Blockwork" (Grid-heavy, primary pigments, thick structural strokes)
  • •"Grainy Risograph Layering" (Tactile paper texture, overprinted translucent inks, dithered gradients)
  • •"Kinetic Wireframe Suspension" (Floating silhouettes, thin balancing lines, organic primary shapes)
  • •"Spectral Prismatic Diffusion" (Glassmorphism, caustic refraction, soft-focus morphing gradients)

Each metaphor should imply fundamentally different CSS techniques — not just different colors. See the materiality-to-CSS mapping in WORKFLOW.md.

Phase 2: Artifact Generation

For each of the 3 style directions, generate a complete, self-contained HTML page.

Scope: Each artifact is a focused, single-screen component — typically 100-300 lines of HTML. Enough structure to demonstrate the design direction clearly, but limited to one viewport. Not a full multi-section website.

Visual execution rules:

  1. •Materiality: The style metaphor drives every CSS choice (e.g., Risograph → feTurbulence for grain, mix-blend-mode: multiply for ink layering)
  2. •Typography: Use Google Fonts via <link>. Pair a bold sans-serif with a refined monospace for data
  3. •Motion: Include subtle CSS animations — hover transitions, entry reveals, micro-interactions
  4. •IP Safeguard: No artist names, brand names, or trademarks anywhere in the output
  5. •Layout: Be bold with negative space and visual hierarchy. Avoid generic card grids
  6. •Content: Use realistic placeholder content (names, dates, numbers) — not lorem ipsum

Output format: Each artifact is a complete <!DOCTYPE html> page with:

  • •Inline <style> block (no external CSS files except Google Fonts)
  • •Complete HTML structure with realistic placeholder content
  • •Optional <script> for interactions
  • •No markdown fences — raw HTML only

Phase 3: Output

  1. •Create output directory (default: .prototype/, or --dir value)
  2. •Write each artifact with position prefix: 01-{slug}-{style-slug}.html, 02-..., 03-...
  3. •Write manifest.json mapping positions to filenames and style names
  4. •Generate index.html with all 3 artifacts displayed in iframes side-by-side
  5. •Print file paths and suggest: open .prototype/index.html

See WORKFLOW.md for the index page template, manifest format, and file naming details.

Variation Workflow

When --vary N is passed (where N is 1, 2, or 3):

  1. •Read manifest.json from the output directory to find the Nth artifact
  2. •Read the existing artifact HTML file to understand the current design
  3. •Generate 3 radical conceptual variations using different physical metaphors
  4. •Each variation gets a unique persona name and complete HTML/CSS rewrite
  5. •Write variation files as {original-slug}-var-1.html, -var-2.html, -var-3.html
  6. •Update index.html to show variations

See WORKFLOW.md for the full variation workflow.

References