AgentSkillsCN

demo-assistant

根据UI风格与产品逻辑，生成交互式产品演示。当用户请求产品演示界面，或使用“演示助手”命令时，即可调用此功能。

SKILL.md
--- frontmatter
name: "demo-assistant"
description: "Generates interactive product demos based on UI styles and product logic. Invoke when user requests a product demo interface or uses 'demo assistant' command."

Demo Assistant

This skill specializes in UI design and frontend interaction, generating interactive product demo interfaces based on existing UI styles and new product logic.

Core Functionality

1. UI Style Processing

Strict Style Adherence:

  • •Follow user-provided UI style specifications strictly
  • •CRITICAL: Only extract UI styles (colors, fonts, layout, components) from Figma/Images.
  • •CRITICAL: Do NOT implement content or logic from Figma unless explicitly requested.
  • •CRITICAL: When PRD or user requirements exist, they override ANY content found in Figma.
  • •Support Figma links as UI style references
  • •Support user-uploaded images (screenshots, design drafts) as UI references
  • •Use codin-d2c MCP tool to convert Figma links to frontend code automatically
  • •If no UI style is provided, ask: "请提供UI样式参考(Figma链接、截图或其他形式)"
  • •When UI style matches product logic below 70%, warn: "检测到UI样式与产品逻辑匹配度较低，请确认是否需要调整"

codin-d2c MCP Tool Integration:

  • •When user provides Figma link, use codin-d2c tool to extract UI styles and generate initial frontend code
  • •codin-d2c converts Figma designs to HTML/CSS/JS with pixel-perfect accuracy
  • •Store converted code in ui-library/ for future reference and reuse
  • •Use generated code as base, then customize according to product logic requirements

Image-Based Style Extraction:

  • •When user provides an image, analyze it visually to extract:
    • •Color palette (primary, secondary, background, text colors)
    • •Typography (font families, sizes, weights)
    • •Layout structure (grid, spacing, alignment)
    • •Component styles (buttons, cards, inputs, border-radius, shadows)
  • •Use these extracted styles to generate CSS variables and component structures
  • •Store extracted style specifications in ui-library/image-styles/

UI Library Integration:

  • •Check ui-library/ directory first for existing UI styles
  • •Store user-provided styles in appropriate subdirectories:
    • •ui-library/figma-styles/ - Figma links and exported assets
    • •ui-library/image-styles/ - Uploaded images and extracted specs
    • •ui-library/css-styles/ - CSS files and component styles
    • •ui-library/design-specs/ - Design specifications and style guides
  • •Reuse stored styles for consistent demo generation across projects

2. Product Logic Processing

Logic Implementation:

  • •Implement demo exactly according to user's product interaction logic
  • •Pause generation for any unclear logic points and ask for confirmation
  • •Use confirmation template: "关于[具体功能点]，请确认是否按以下方式实现：[简要描述理解]"

3. Usage Scenarios

Auto-trigger when:

  • •User expresses "需要画一个产品demo界面"
  • •User explicitly uses "demo assistant" command

Priority Rule:

  • •PRD/User Requirements > Figma Content.
  • •Use Figma ONLY for visual style (CSS, layout structure).
  • •Use PRD/User Input for actual content (text, labels, data fields) and interaction logic.
  • •Do NOT blindly copy text or fields from Figma if they conflict with or are absent from the PRD.

4. Interaction Flow

  1. •Receive user request
  2. •Check UI library for existing styles matching the project
  3. •Obtain UI style reference (or ask if missing)
  4. •Store new UI styles in the UI library for future reuse
  5. •Confirm product logic details (when necessary)
  6. •Generate interactive demo prototype
  7. •Provide preview and support iterative modifications

5. Output Requirements

Deliverables:

  • •Generate fully interactive HTML/CSS/JS demo
  • •Maintain pixel-level consistency with original UI style
  • •Implement all specified interaction logic
  • •Ensure smooth operation in mainstream browsers

6. Exception Handling

Limitations and Solutions:

  • •Clearly inform users of unimplementable interaction effects
  • •Provide progressive enhancement suggestions
  • •Record all user confirmation steps for traceability

UI Library Management

Directory Structure

code
ui-library/
├── figma-styles/       # Figma design links and exported assets
│   └── converted-code/ # Code generated by codin-d2c MCP tool
├── image-styles/       # Uploaded images and extracted specs
├── css-styles/         # CSS style files and component libraries
├── design-specs/       # Design specifications and style guides
└── README.md           # Usage documentation

Storing UI Styles

When user provides Figma link:

  1. •Save link to ui-library/figma-styles/project-name-link.txt
  2. •Use codin-d2c MCP tool to convert Figma design to frontend code
  3. •Save generated HTML/CSS/JS to ui-library/figma-styles/converted-code/
  4. •Export design assets to ui-library/figma-styles/exported-assets/
  5. •Extract and document style specifications from converted code

When user provides Image (Screenshot/Design):

  1. •Save original image to ui-library/image-styles/original/
  2. •Extract visual specs (colors, fonts, layout)
  3. •Generate CSS variables and component definitions
  4. •Save extracted styles to ui-library/image-styles/extracted/

When user provides CSS files:

  1. •Copy to ui-library/css-styles/ with descriptive names
  2. •Organize by component or feature
  3. •Document usage patterns

When user provides design specs:

  1. •Save to ui-library/design-specs/
  2. •Include color palettes, typography, spacing rules
  3. •Document component specifications

Reusing UI Styles

Before generating new demo:

  1. •Check ui-library/ for matching project styles
  2. •Reference existing styles to maintain consistency
  3. •Ask user if they want to reuse existing styles or provide new ones

Benefits of UI Library:

  • •Maintain consistency across multiple demos
  • •Reduce repetitive style extraction work
  • •Enable quick iteration on design systems
  • •Support team collaboration on design assets

Implementation Guidelines

Phase 1: Requirements Gathering

  • •Check UI library for existing project styles
  • •Ask for UI style reference if not found in library
  • •Clarify all ambiguous product logic points
  • •Document all user confirmations

Phase 2: Style Analysis

  • •Check ui-library/ for matching styles first
  • •Analyze provided UI styles (Figma or other formats)
  • •If Figma link provided:
    • •Use codin-d2c MCP tool to convert design to frontend code
    • •Review generated code for accuracy and completeness
    • •Extract reusable components and styles
  • •If Image provided:
    • •Analyze image for visual properties (colors, typography, spacing)
    • •Identify UI components and layout patterns
    • •Generate CSS variables and component specifications
    • •Save extracted specs to ui-library/image-styles/
  • •Store new styles in appropriate library subdirectory
  • •Evaluate style-logic compatibility
  • •Warn user if compatibility < 70%

Phase 3: Demo Generation

  • •If using codin-d2c generated code:
    • •Use converted HTML/CSS/JS as starting point
    • •Customize components according to product logic
    • •Add interactive behaviors and state management
    • •Ensure all user interactions are implemented
  • •If using other style sources:
    • •Create HTML structure matching UI layout
    • •Implement CSS with pixel-perfect styling
    • •Add JavaScript for all interactive behaviors
  • •Ensure cross-browser compatibility

Phase 4: Validation and Iteration

  • •Verify all interactions work as specified
  • •Provide preview to user
  • •Support iterative modifications based on feedback
  • •Update UI library with any style refinements

Technical Stack

  • •HTML5: Semantic markup
  • •CSS3: Modern styling with flexbox/grid
  • •JavaScript (ES6+): Interactive functionality
  • •codin-d2c MCP Tool: Figma to frontend code conversion
  • •Browser Support: Chrome, Firefox, Safari, Edge (latest versions)

Best Practices

  1. •Always check UI library first before asking for new styles
  2. •Always ask for UI style reference before starting (if not in library)
  3. •Never assume unclear logic - always confirm with user
  4. •Maintain strict adherence to provided UI styles
  5. •Store all user-provided styles in the UI library
  6. •Document all user confirmations and decisions
  7. •Provide clear warnings when style-logic mismatch detected
  8. •Ensure generated demo is fully functional and testable
  9. •Reuse existing styles from UI library when appropriate
  10. •Organize UI library by project for easy retrieval

Example Usage

User Request: "需要画一个产品demo界面"

Assistant Response:

  1. •Check ui-library/ for existing project styles
  2. •If found: "在UI库中找到[项目名]的样式，是否使用这些样式？"
  3. •If not found: "请提供UI样式参考(Figma链接或其他形式)"
  4. •If Figma link provided:
    • •Use codin-d2c MCP tool to convert Figma design to frontend code
    • •Save generated code to ui-library/figma-styles/converted-code/
    • •Review and validate converted code
  5. •Confirm logic details with user
  6. •Generate interactive demo (customize codin-d2c code or create from scratch)
  7. •Provide preview and ask for feedback

User Request: "demo assistant 创建一个登录页面demo"

Assistant Response:

  1. •Check UI library for existing login page styles
  2. •Ask about specific login logic (validation, error handling, etc.)
  3. •If user provides Figma link:
    • •Use codin-d2c to convert design to HTML/CSS/JS
    • •Save converted code to UI library
    • •Customize with login logic and interactions
  4. •Generate demo with all interactions using stored or new styles
  5. •Deliver fully functional HTML/CSS/JS files
  6. •Save styles to UI library for future reuse

UI Library File Naming Conventions

  • •Figma Links: project-name-link.txt
  • •CSS Files: component-name.css or style-name.css
  • •Specs: aspect-name.md (e.g., color-palette.md)
  • •Assets: asset-name.extension (e.g., logo.png, icon.svg)
  • •Project Organization: Use subdirectories for different projects