9Design Kit

Purpose

Turn approved reference images into a structured asset kit that a developer can use to build a faithful website implementation. Treat the provided images as the design source of truth and use image generation as the primary production method for every visual asset.

This skill is an optional expanded kit stage after a visual direction exists. If the user only has a raw inspiration image and has not approved a landing-page direction, use 9image-design first.

Use frontend-grade design-system discipline:

• Convert the approved visuals into tokens, component families, icon rules, container rules, typography rules, asset treatment rules, and responsive rules.
• Preserve the accepted concept exactly; do not introduce a new palette, new icon style, new card system, or new typography direction.
• Document whether sections use full-bleed, bands, rails, cards, open whitespace, masks, overlays, or panels.
• Include control typography for buttons, forms, navigation, tabs, labels, and captions, not just hero headings.
• Include interaction/motion guidance only where it supports hierarchy, state, or atmosphere.

Non-Negotiable Imagegen Rule

Use the image generation tool for every visual asset category. Do not replace image generation with hand-authored SVGs, rough CSS shapes, ASCII diagrams, or placeholder files.

Required visual output must be generated as images first:

• Logo sheets and logo variants
• Wordmark explorations
• Favicon/app icon sheets
• Icon library sheets
• Social media/community icon sheets when the approved design includes them
• Individual icon images when possible
• Hero and section imagery
• Gallery/product/scene images
• Background textures, overlays, patterns, masks, and dividers
• UI component library sheets
• Individual component visual references
• Full asset overview boards

SVGs are optional secondary implementation traces only after an imagegen output exists and only when the generated visual is clear enough to trace. Never provide SVG-only logos or SVG-only icons as the main deliverable.

If only one pass is feasible, prioritize imagegen boards over SVG/vector files. A generated, visually faithful image asset is better than a hand-built vector approximation.

Output Folder

Create a dedicated asset kit folder in the current workspace unless the user gives another path:

asset-kits/<project-slug>-YYYYMMDD-HHMM/

Use scripts/create_asset_kit.py to scaffold the folder:

python <skill-dir>/scripts/create_asset_kit.py --name "<project name>" --root "<workspace>"

The scaffold creates a Phase 2 manifest shell plus starter tokens.css, optional tokens.json, and manifest guidance notes. Keep those files updated as assets, fonts, tokens, accessibility rules, and QA notes become known.

Save all generated and authored assets into this structure:

00-reference/          Original supplied reference images
01-logo/               Imagegen logo sheets, logo PNGs, optional traced SVGs
02-icons/              Imagegen icon sheets, individual icon PNGs, optional traced SVGs
03-imagery/            Hero, section, gallery, texture, and background assets
04-ui-components/      Button, card, form, nav, footer, and CTA component images
05-fonts/              Font files when legally available, font notes, fallback stack
06-design-tokens/      Colors, typography, spacing, radii, shadows, CSS variables
07-export-sheets/      Visual boards: assets sheet, logo sheet, icon sheet, UI kit
08-ready-for-build/    Optimized assets and web-ready naming
notes/                 Implementation notes and asset manifest updates

Workflow

1. Inventory the references.

   • Identify each screen/page and its role.
   • Note shared brand elements, recurring motifs, color system, typography, image masks, borders, shadows, lighting, and layout rhythm.
   • Copy available local reference files into 00-reference/. If images are only attached in chat or generated by the image tool, save or reference the generated file paths when available.

2. Create the asset plan.

   • List every asset needed to rebuild the website: logo, wordmark, favicon, icons, social media/community icons, hero images, background textures, section illustrations, gallery images, component states, decorative motifs, and design tokens.
   • Prefer reusable atomic assets over screenshots of whole sections.
   • Preserve visual fidelity: do not simplify away distinctive atmosphere, texture, lighting, masks, or ornamental details.

3. Generate visual assets with imagegen.

   • Call the image generation tool for each required visual group. Do not skip image generation and do not substitute handmade SVGs.
   • Generate logo sheets, wordmark sheets, favicon/app icon sheets, icon library sheets, hero imagery, section imagery, texture/pattern sheets, UI component sheets, and full asset overview boards.
   • Generate individual visual assets as separate images when the user needs direct implementation files, such as hero-home, texture-mist, button-states, gallery-card, social-icon-set, or icon-set.
   • After each generation, save or copy the generated image file into the correct asset-kit folder using a clear lowercase kebab-case filename.
   • Create UI elements as imagegen visual reference images first, then write implementation-ready tokens separately.
   • Keep all assets consistent with the reference images, not with unrelated previous projects.

4. Identify fonts.

   • Inspect visible text in the references and infer likely font families using visual traits: serif/sans/script/display class, x-height, contrast, terminals, width, weight, tracking, and distinctive letterforms.
   • If the font is a known public font, verify availability from an official source before naming it as exact.
   • If exact identification is uncertain, document a ranked list: Exact candidate, Nearest free alternative, Fallback stack, and confidence.
   • Only download or store font files when licensing permits it. Otherwise save links and CSS import guidance in 05-fonts/font-notes.md.
   • Document typography tuning values needed to match the prototype: size, weight, line-height, letter spacing, text transform, and responsive scale behavior.

5. Write design tokens.

   • Extract colors from the references and create named tokens, not just raw swatches.
   • Include CSS variables for colors, typography, spacing, radii, shadows, borders, overlays, gradients, and motion hints.
   • Save tokens in 06-design-tokens/tokens.css and optionally tokens.json.
   • Treat tokens.css as the primary implementation handoff and tokens.json as an optional machine-readable companion.

6. Build handoff sheets with imagegen.

   • Generate clean image boards for logo variants, icon library, UI components, and full asset overview using the image generation tool.
   • Save these boards in 07-export-sheets/.
   • Ensure labels are readable and asset names match files in the folders.

7. Optimize for build.

   • Put final web-ready copies in 08-ready-for-build/.
   • Use predictable lowercase kebab-case names, such as logo-sheet.png, logo-primary.png, icon-library.png, icon-orbit.png, hero-home.webp, texture-mist.png, ui-components.png, tokens.css.
   • Preserve source files in earlier folders; do not overwrite originals.

8. Update the manifest.

   • Keep asset-manifest.json current with file paths, asset roles, source reference, generation notes, font decisions, and implementation notes.
   • In the final response, report the asset kit folder, major assets created, verification performed, and any exact-font uncertainty.

Required Asset Coverage

Produce as much of this set as the references justify:

• Imagegen logo sheet: primary logo, wordmark, stacked logo, icon mark, favicon/app icon
• Imagegen icon library sheet with 6-12 motif icons in a consistent style
• Imagegen social icon treatment sheet when social/community links appear in the prototype
• Imagegen hero image and key section imagery
• Imagegen background textures, gradients, overlays, dividers, masks, and decorative patterns
• Imagegen UI component sheet: buttons, links, nav, mobile nav, cards, image frames, forms, search, dropdowns, tags, CTA banner, quote block, footer module
• Individual image exports for major reusable assets whenever practical
• Typography notes, font files or official links, fallback stacks
• Color palette and CSS variables
• Shadows, borders, radii, spacing, and layout tokens
• Web-ready asset copies with implementation-oriented names

Required Imagegen Passes

At minimum, run image generation for these boards or asset groups unless the user explicitly narrows the scope:

1. logo-system-sheet: logo, wordmark, icon mark, favicon, light/dark versions
2. icon-library-sheet: 6-12 icons derived from the reference motifs
3. imagery-pack: hero image, section backgrounds, gallery/scene images
4. texture-overlay-pack: patterns, grain, glow, masks, dividers, atmospheric overlays
5. ui-component-library-sheet: nav, buttons, cards, forms, filters, tags, CTA, footer
6. asset-overview-board: all core assets presented together for handoff

For a large prototype, generate additional images for each major page or reusable component family.

Image Generation Prompt Pattern

For each generated board or asset, include:

• The reference screen names or source images being followed
• The exact asset type being generated
• The established brand colors, lighting, typography mood, motifs, icon style, and UI styling
• The required file purpose, such as logo sheet, icon library, hero background, or UI component sheet
• A request for clean, developer-handoff presentation when generating boards
• Clear instruction that the output itself must be an image asset, not SVG code or a placeholder

Example:

Create a developer handoff icon library sheet as an image, derived only from the supplied prototype reference images. Preserve the approved brand palette, line weight, corner radius, glow treatment, and motif language. Include 10 individual icons with readable labels, shown on light and dark backgrounds, arranged cleanly for developer handoff. Do not output SVG code; generate the icon sheet as a visual image asset.

Quality Bar

• Build from the current reference images only.
• Do not create generic icon packs, generic UI kits, stock-looking backgrounds, or unrelated brand elements.
• Do not replace social icons with generic placeholders. Match the approved platform glyph, container, optical size, color, padding, and hover/active state.
• Do not hand-author SVG files as the primary visual deliverable.
• Do not skip image generation for logos, icons, UI components, textures, or visual boards.
• Do not claim an exact font when it is only an approximation.
• Do not save only full-page screenshots; create reusable assets and tokens.
• Keep generated boards readable, spacious, and named for developer handoff.
• Make the final folder usable as the starting point for a real website implementation.