https://github.com/mocchalera/web-visual-section-mock
Agent Skill for section-based WEB/LP visual mock art direction
https://github.com/mocchalera/web-visual-section-mock
agent-skill art-direction codex-skill japanese-typography landing-page web-design
Last synced: 2 days ago
JSON representation
Agent Skill for section-based WEB/LP visual mock art direction
- Host: GitHub
- URL: https://github.com/mocchalera/web-visual-section-mock
- Owner: mocchalera
- Created: 2026-07-09T03:33:04.000Z (9 days ago)
- Default Branch: main
- Last Pushed: 2026-07-15T06:02:58.000Z (3 days ago)
- Last Synced: 2026-07-15T08:08:16.536Z (3 days ago)
- Topics: agent-skill, art-direction, codex-skill, japanese-typography, landing-page, web-design
- Size: 164 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# web-visual-section-mock
Agent Skill for high-quality WEB / LP visual mock art direction with section-by-section image generation, Japanese typography, intentional main visual archetype selection, and clean implementation asset regeneration. It freezes whether art owns the section field, floats on the Web background, or lives inside a real content frame before generation, then separates real text/CSS/SVG from full-field scenes, transparent scenes, clean backgrounds, and card artwork plates.
## Package structure
```text
web-visual-section-mock/
SKILL.md
references/
00_reference_index.md
01_web_section_patterns.md
02_web_layout_patterns.md
03_graphic_composition_patterns.md
04_japanese_typography_patterns.md
05_color_lighting_fashion_patterns.md
06_industry_tone_patterns.md
07_negative_examples.md
08_prompt_templates.md
09_main_visual_archetypes.md
10_visual_decomposition_for_web_build.md
11_layered_asset_generation_and_reconstruction.md
web_visual_agent_references_all.md
assets/
brief_template.md
output_examples.md
```
## Install
Download this repository as a ZIP, or create a ZIP from the `web-visual-section-mock/` folder, then upload it as an Agent Skill.
The package must contain a single top-level folder with one `SKILL.md` manifest and its supporting `references/` and `assets/` files.
## Main use cases
- Create image generation prompts for WEB / LP visual mockups
- Split a full landing page into section-by-section images
- Design hero, problem, benefit, features, pricing, FAQ, CTA, and footer visuals
- Use person-led visuals as a strong default while intentionally switching to other motifs when stronger
- Decompose reference comps into layer stack, full-bleed/container elements, alignment bases, and asset strategy before prompt writing
- Regenerate only raster-required parts as copy-space-aware full-field scene plates, clean background plates, transparent foreground/scenes, or contained card artwork; keep readable text and CSS/SVG-rebuildable parts out of raster output
- Apply Japanese typography patterns
- Avoid cropped section screenshots and overstuffed page images
- Diagnose weak or cheap-looking image prompts
## Core principle
```text
1 image = 1 section = 1 clear message.
Never compress a whole WEB page into one image.
Choose one main visual archetype per section.
Use person-led visuals as a strong default hook; switch to another motif only when it is more intentional.
When uncertain, choose whitespace or split the section.
When layered output is requested, use the composite as reference only, classify every element before generation, and reject cropped, masked, contaminated, or multi-part raster outputs.
```
## Validation
This is an instruction-only skill: no scripts, runtime dependencies, binaries, or generated assets are required.
See `PACKAGE_VALIDATION.md` for the current package check summary.