visual-assets
Make website imagery look art-directed instead of basic — choose one visual style, source or generate images (photos, AI images, 3D renders, illustrations), unify them with consistent crops and color treatment, and present them with masks, layering, image effects and textured backgrounds; export optimized responsive images. Use whenever the user's site has images, photos, illustrations, icons, backgrounds, hero visuals or galleries, says images look plain/stock/"gambarnya biasa", needs images for a section, or wants AI image prompts.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Visual Assets — imagery with art direction
- 1. Define the image direction (write it down first)
- 2. Source or generate
- 3. Unify with the treatment script
- 4. Present images with intent (CSS)
- 5. Image motion (pair with scroll-animation)
- 6. Technical quality (non-negotiable)
- 7. Check it
Basic sites drop raw stock photos into rectangles. Premium sites treat imagery as a system: one style, consistent treatment, composed with the type and motion. One short spec the whole site follows: Derive it from the brand: a law firm ≠ a coffee shop ≠ a creative studio. If the user has real photos, they win over stock — build the direction around them. Priority: user's own photos → custom 3D renders/illustrations → AI-generated set → curated stock (Unsplash/Pexels — check license; credit if required). AI image prompts — generate a set, not one-offs. Use one fixed style block appended to every prompt so the series matches: Ask for the composition you need for the layout (empty space where the headline goes, subject facing into the page). Generate 3–4 variants, pick, then treat with the script below so they match exactly. Never generate images of real identifiable people or copyrighted characters/brands. Illustrations / icons: one family only (same stroke width, corner style, palette). For icons use one set (Lucide, Phosphor, Tabler) at one stroke weight. Looks: warm-film, cool-film, duotone (--dark --light), mono, fade. It crops to one ratio (with --focus x,y), grades, adds grain,
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- KILN-skills/kiln
- Source file
- skills/visual-assets/SKILL.md
- Fixed revision
- 555d7ea59d05910b4ef6fb39780da5f906be832b
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: KILN-skills/kiln · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T04:00:15.476Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.