Html Prompt Generator
Use when the user wants to generate reusable Chinese HTML prompt templates from a rough requirement brief, especially for web pages, slide-like presentations, teaching demos, landing pages, dashboards, or interactive prototypes; trigger even when the user says “帮我整理成可直接投喂的提示词” without mentioning skill names.
Design Extract
Extract a complete DESIGN.md design-system style guide from any live website URL or local screenshots. Captures screenshots and samples DOM/computed CSS via browser MCP, then uses Claude's own multimodal vision to analyze visual style and produce a structured DESIGN.md with design tokens ({colors.*}, {typography.*}, {spacing.*}, {rounded.*}, {component.*}), full component specs, do's/don'ts, resp…
Website Cloner
Clone a live website into a complete, self-contained static site (pure HTML/CSS/JS, no framework). Produces a portable static site with all assets downloaded locally — CSS, JS, fonts, images, favicon. The output can be migrated to any framework later. Use when the user says "clone this site", "make a static copy", "download this website", "save this page offline", or provides a URL to replicate a…
Plan And Apply
Use this skill whenever the user asks to first analyze, first plan, not directly modify code, work in small slices, or complete a non-trivial implementation with clear scope and verification. Also use it whenever the task obviously spans multiple steps, multiple files, migration work, refactoring, page closure work, or requires strong validation and clean handoff. This skill enforces a workflow o…