From magic-ui-ux
Generates comprehensive JSON visual specifications from text descriptions, reference images, or both. Translates photography/cinematography parameters into rich natural-language image guidance that dramatically improves Stitch's image rendering in generated screens.
How this skill is triggered — by the user, by Claude, or both
Slash command
/magic-ui-ux:image-generationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Transform minimal image input (text description, reference image, or both) into comprehensive JSON visual specifications covering photography and cinematography parameters. The critical output is a **pre-translated natural-language guidance text** that Stitch consumes as "Image style:" content -- converting technical photography specs into mood/feel language that produces superior image rendering.
Transform minimal image input (text description, reference image, or both) into comprehensive JSON visual specifications covering photography and cinematography parameters. The critical output is a pre-translated natural-language guidance text that Stitch consumes as "Image style:" content -- converting technical photography specs into mood/feel language that produces superior image rendering.
Image specs are both a standalone deliverable (via /image command) and an auto-integrated pipeline step in /design. In pipeline mode, the skill reads the UX brief to determine photography needs per section without user prompting.
| Parameter | Type | Required | Description |
|---|---|---|---|
page | string | Yes (pipeline) | Page name from state.json |
description | string | Yes (standalone) | Text description of desired imagery |
referenceImage | file | No | Reference image path for reverse-engineering |
tokens | object | Yes | Design tokens from .ui-ux/tokens.json |
uxBrief | file | Yes (pipeline) | UX brief from .ui-ux/briefs/{page}-ux-brief.md |
.ui-ux/briefs/{page}-image-spec.jsonstate.json.imageSpecs[] with new entry including guidanceText.ui-ux/state.json -- verify the target page exists (pipeline mode) or that the project is initialized..ui-ux/tokens.json -- extract color palette, UI style, and niche to inform photography mood.
tokens.json does not exist, HALT: "Run /magic-ui-ux:branding first. Image specs require a design system for mood coherence."skills/image-generation/references/visual-spec-schema.md -- reference for JSON structure, inference rules, and translation dictionary.Detect the operating mode and gather context:
Mode Detection:
description provided, no referenceImage -- extract explicit info, infer gapsreferenceImage provided, no description -- reverse-engineer all visual elementsPipeline Mode (when uxBrief is provided):
Read the UX brief to identify sections needing imagery
Map section types to photography contexts:
| Section Type | Photography Context | Style |
|---|---|---|
| hero | lifestyle / product | Wide, aspirational, brand-defining |
| about | portrait / team | Warm, authentic, approachable |
| testimonials | headshot | Professional, trustworthy, clean |
| services | documentary / process | Action-oriented, real-world context |
| portfolio | editorial / showcase | High-quality, detailed, curated |
| features | product / abstract | Clean, focused, explanatory |
| contact | environmental | Welcoming, accessible, human |
Skip sections that don't need imagery: pricing tables, FAQ, forms, footer
Use panel_specifications to handle per-section variations within a unified style
Declare Assumptions: Before generating, state key creative decisions:
Generate the complete JSON specification covering all 11 top-level keys from the visual-spec-schema reference. Apply inference rules per photography context.
The 11 required keys:
Rules:
The critical step. Transform the technical JSON specification into 2-5 sentences of rich descriptive image guidance that Stitch interprets effectively.
Translation principles:
Translation examples:
| JSON Parameter | Technical Value | Translated Language |
|---|---|---|
| lighting.key | softbox 45-degrees-left | soft directional lighting from the left |
| camera.lens | 85mm | intimate, portrait-style framing |
| camera.aperture | f/2 | beautifully blurred background |
| post_processing.color | warm tone +15 | warm, golden color palette |
| environment.atmosphere | morning haze | dreamy, ethereal atmosphere |
| lighting.color_temperature | 5600K | natural daylight feel |
| camera.perspective | slightly low angle | empowering, aspirational perspective |
Output format:
Generate a guidanceText string of 2-5 sentences that weaves together:
Example output:
"Warm lifestyle photography with soft directional lighting and a golden color palette. Intimate portrait-style framing with beautifully blurred backgrounds creates depth and focus. Dreamy, ethereal atmosphere with natural daylight tones. Empowering perspective that feels aspirational and authentic."
.ui-ux/briefs/{page}-image-spec.jsonstate.json.imageSpecs[]:
{
"page": "{page}",
"specPath": ".ui-ux/briefs/{page}-image-spec.json",
"guidanceText": "{pre-translated natural language text}"
}
state.json.updatedAt to current ISO timestampguidanceText is the consumable output.panel_specifications for per-section variations within the unified style.The /design command auto-invokes this skill between copy generation and UI Agent screen generation (Step 3.5). In pipeline mode:
guidanceText to the UI Agent for the "Image style:" fieldSee references/visual-spec-schema.md for the full JSON schema, inference rules, section-to-photography mappings, niche-to-mood mappings, and the translation dictionary.
npx claudepluginhub flyingwebie/skills --plugin magic-ui-uxCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.