weiguo-long/lwg-haibao-design

Poster-Style Presentation HTML Pages

Design poster-style presentation/slide single-page HTML, and extract reusable rules from user-provided design images. Two workflows:

• Workflow A · Digest: User provides design images → Analyze color/layout/typography/decorations → Write to references/rules.md using the analysis template
• Workflow B · Generate: User provides requirements (content + tone + aspect ratio) → Score and rank via references/selection.md → Generate a self-contained HTML with the specified ratio → Validate against references/checklist.md

Most important discipline: Never invent a layout from scratch. Almost all rejected versions came from "inventing a style on my own." The library has 24 samples and 9 color schemes; only fall back to baseline.md if none are suitable. When the user explicitly specifies an S-number or C-number, follow it exactly.

Workflow A: Provide Design Images, Digest Rules

Two analysis modes:

• Full analysis (default): Analyze all fields according to the template and persist as a sample entry (S-Number).
• Color-only analysis: When the user indicates "only need colors" / "analyze colors only," or when the image is clearly a color swatch/palette inspiration (solid blocks, a color board), extract only the palette, define color role assignments, and persist as a color scheme entry (C-Number). Skip layout, typography, and decorations.

1. Read images: Use an image viewing tool (e.g., ViewImage) to examine each image one by one. If text is too small or details are unclear, crop and enlarge the relevant area before re-examining. When there are multiple images, view all of them before deciding on the unified rules. Analyze only the design itself: ignore watermarks, platform/account logos, and extraneous parts from mobile screenshots such as status bar at top, navigation bar at bottom, etc. If the screenshot content is cropped or compressed, infer the original design intent from the visible main body.
2. Analyze each image: Following the fields in references/analysis-template.md (for color-only mode, use the fields specified in that file's "Color-only mode" section). Focus on producing directly reusable implementation points:
   • Color palette: hex values of primary/secondary/accent/neutral colors, area proportions, light/dark relationships. Prefer using python3 scripts/extract_palette.py <image_path> to obtain precise color values; if Pillow is missing or the script fails, use approximate visual values and mark the entry as "approximate."
   • Layout: division method of the canvas, focal point position, white space ratio, grid, symmetry, reading hierarchy.
   • Typography: title style, font size hierarchy (as percentage of the canvas short side), font weight, alignment, tracking.
   • Decoration and texture: graphic elements, textures, borders, gradients/noise/color blocks, etc.
   • Content density and suitable ratios: amount of information suitable and aspect ratio compatibility.
   • Applicable scenarios: what theme and mood requirements this design fits.
3. Digest: Append the analysis result as one entry in references/rules.md – full analysis as a sample entry (S-Number), color-only analysis as a color scheme entry (C-Number). Register each in the index table (the number is taken from the placeholder line at the end of the index table; after use, add a new placeholder line. Rules are in analysis-template.md). If very similar to an existing entry, merge or mark as a variant; do not accumulate duplicates. Also save the original image to references/samples/ (single image S-XX.jpg, variant S-XXa.jpg / S-XXb.jpg) and update the README for that directory – only textual descriptions lose the "why it looks good" technique (e.g., S-13's three-row white background blocks were once missed and later added).
4. Synchronize the selection table: Add one line in the sample-tag table of references/selection.md (tone / brightness / texture / density / signature element / ratio compatibility). Then insert the new sample into the "C × S Compatibility Matrix" (section 4) based on its brightness; otherwise, the new sample becomes "invisible" during selection.
5. Report: Tell the user which rule was added and what scenarios it fits, so they can directly request it next time.

Workflow B: Provide Requirements, Generate Page

1. Parse requirements: Topic content, emotional tone (serious/neutral/playful/artsy/fresh), content density (single sentence vs bullet points vs data vs image+text), target page aspect ratio (any value), whether real photos are needed.
2. Score and rank selection (never skip): Read references/selection.md, perform hard filtering and scoring using the five-dimension tags, select the top 3; explain in one sentence why the chosen sample is suitable (link between signature element and content semantics), then proceed to the next step. At the same time, use the "C × S Compatibility Matrix" (section 4) to determine the color scheme, filling all five color roles (bg / text / mid / accent / decor) with hex values. After selection, check the file list in references/samples/README.md; if the corresponding original image exists, view it (variant images are named S-XXa / S-XXb, do not guess the path as S-XX.jpg). Compare the actual form of the signature elements before creating the output. Fall back to baseline.md only if the library is empty or all entries miss.
3. Structure content: Organize user content into a poster-style single-page structure (main title, subtitle, bullet points, data, timeline, etc.). One screen fully contained, clear hierarchy, single focus point.
4. Aspect ratio adaptation: Set the page canvas according to the specified ratio (see "Aspect ratio adaptation specification" and "Unit conventions" in baseline.md). Font sizes and spacing are calculated based on the short side of the canvas – declare .stage { container-type: inline-size }, use cqw for vertical layouts and cqh for horizontal layouts; change one value to scale globally.
5. Generate HTML: The html skill is an optional enhancement dependency: if installed, first fully read its SKILL.md and references/design/frontend-design.md for supplementary guidelines; if not installed, skip it directly and follow references/baseline.md (design principles, typography hierarchy, aspect ratio adaptation, unit conventions) and references/checklist.md (12-item validation) – do not block or stop output. The output is a single self-contained .html file: inline CSS/JS, semantic filename (not index.html), mobile-first, no dead buttons, no emoji, with a favicon. Use local relative paths or data URIs for image assets; download external images first. Before making revisions, cp the current version to _backup/ (create the directory first with mkdir -p if it doesn't exist).
6. Validate: Go through each of the 12 items in references/checklist.md (manually calculate cqw / cqh to px). If possible, take a rendered screenshot to verify (text overflow / elements overlapping text / color contrast). If it doesn't pass, fix it; then deliver (present_files with files: [absolute HTML path]). In the delivery description, clearly state the selection rationale, parameter changes, and actual verification method.
7. Log rejections: When the user rejects a version, append one line to section 5 of references/selection.md (sample/color-scheme, user's exact words, problem diagnosis). In the next selection, actively avoid the same combination.

Rule Library Maintenance

• references/rules.md: Incremental rule library, the core asset of this skill. One entry is deposited per image analysis; selection for generation is made from this library. Before reading its CSS snippets, first read the "Unit conventions" at the top.
• references/selection.md: Selection decision maker. Five-dimension sample tags, scoring rules, C×S Compatibility Matrix (covering all 24 samples), five color roles, and rejection log. New samples must be registered in both the tag table and the matrix.
• references/checklist.md: Pre-delivery validation checklist. 12 verifiable criteria + two hard rules.
• references/baseline.md: General baseline. Fallback when the rule library is empty or none match. Contains poster design principles, typography hierarchy, aspect ratio adaptation specification, unit conventions, and prohibitions.
• references/analysis-template.md: Field template and numbering rules for image analysis; entries are written following this structure.
• references/samples/: Original image archive and file inventory.

External Dependencies (Optional, Non-Blocking)

1. Required: scripts/extract_palette.py (depends on Pillow). If Pillow is missing, fall back to visual color estimation and mark the entry as "approximate."
2. Optional: html skill. The skill root directory depends on the environment (user-level: ~/.workbuddy/skills/). Use Glob to search for **/html/SKILL.md to locate it. If found, sequentially read <html-skill>/SKILL.md and <html-skill>/references/design/frontend-design.md for supplementary design guidelines. The built-in screenshot script (shot.py) usually does not exist; do not force it.
3. If the html skill / screenshot script is not found: Proceed to generate and validate using baseline.md + checklist.md, and honestly state in the delivery description that "no rendered screenshot was made" or describe the alternative verification method used. It is forbidden to interrupt Workflow B due to missing external skills.