moai-designer| Design system → generation prompt (generation execution:moai-media)
Overview
In projects with a design system, the point where AI images fail is not quality but alignment. Even a well-made hero image is unusable if it falls outside the brand palette.
This skill, before generation, first reads the project's design tokens and brand rules, turns those values into prompt constraints, and then hands off to generation.
What it does not do
- Does not execute image generation, select models, or report credits —
moai-media:media-higgsfield-core— delegates to the contract (§4 generation execution). - Does not define design tokens — the source of truth for tokens is the project's design system. This skill only reads and uses them; it does not create new ones.
- Does not ask the user directly — if a slot is empty, it returns a blocker and the orchestrator checks.
Trigger keywords
hero image, landing visual, key visual, brand image, OG image, social share image, mockup, mascot, illustration, empty state, empty state, banner image, brand tone image
Workflow
Step 1 — Read the design system
Before writing the generation prompt , find and read the project's source of truth. Priority:
- Design system handoff directory (token CSS, screen design source, brand rules document)
DESIGN.mdor an equivalent design decision document- Token files (DTCG / CSS variables / shadcn config)
- Brand identity document (voice, prohibitions, mascot usage rules)
If none exists, proceed without it, but do not invent colors without token evidence. State in the result that there is no evidence.
Step 2 — Convert into constraints
Turn the values read into prompt constraints. This conversion is the core output of this skill.
| Design system item | Prompt constraint |
|---|---|
| Palette | Specify exact colors (hex if possible), prohibit other hues |
| Typography | Whether to include text in the image. If so, the character of the font |
| Radius · spacing | Form language (angular/rounded), spacing density |
| Brand voice | Mood vocabulary (calm/bold/warm) |
| Prohibition rules | Not as a negation but Positive descriptionconvert to (→ Core R1) |
| Mascot rules | Permitted use, allowed range of poses and expressions |
Note on converting prohibitions: If you put "don't use orange" as is, the model focuses on orange. Describe what you want, like "compose using only green and achromatic colors."
Step 3 — Finalize usage specifications
| Usage | Aspect ratio | Notes |
|---|---|---|
| Hero / top of landing page | 16:9 or wider |
leave space for text to be overlaid |
| OG / social sharing | 16:9 approximation |
a form that remains legible even when scaled down small |
| Card thumbnail | 1:1 or 4:3 |
centered composition |
| Mockup | fit to the product form | without contradicting the actual UI |
| Empty state illustration | 1:1 |
simple, low saturation, without interfering with the body text |
| Mascot | post-process if a transparent background is needed | same design as the existing mascot |
Step 4 — Delegate generation
Pass the assembled prompt and constraints to the moai-media:media-higgsfield-core contract. Model selection, live parameter lookup, cost preflight, and polling are all handled on that side.
If a mascot or a specific person needs to appear consistently across multiple shots , first moai-media:media-higgsfield-identitycreate a reference with (including Soul / Element determination).
If moai-media is not installed: output the completed prompt and constraints as text and guide the user to generate directly on the Higgsfield web (https://higgsfield.ai)에서 ).
Step 5 — Consistency verification
Check the received image against the design system criteria.
- Are there any colors that stand out as outside the palette
- Does the form language (angular/rounded) match the system
- If text was included, are there no typos or broken characters
- If it's a hero, is there actually space for the copy to be overlaid
If it doesn't match, strengthen the constraints and regenerate. Do not let a mismatched image pass as "mostly right" — the design system is the kind of standard that does not allow approximations.
Output format
## 브랜드 비주얼 결과
- 용도: [히어로 | OG | 목업 | ...] · 비율: [aspect]
- 참조한 디자인 시스템: [읽은 파일 경로] (없으면 "근거 없음" 명시)
- 적용 제약: [팔레트 / 형태 언어 / 무드 / 마스코트 규칙]
- 생성 위임: moai-media:media-higgsfield-core
- 결과 URL: [생성 결과]
- 정합 점검: [통과 | 어긋난 항목과 조치]
Precautions
- Do not invent colors or fonts without token evidence. If there is no evidence, state that there is none.
- Convert prohibitions into positive descriptions.
- Do not bake body text into the image — it blocks multilingual support, editing, and accessibility alike. Overlay text as markup.
- The mascot follows the project's mascot usage rules. If rules exist, do not modify it arbitrarily.
- Generation cost and model are not decided by this skill — follow the delegation destination's prior notification procedure as is.
- Accessibility: Whether text contrast is secured on the final screen is determined not by the image but by the combination. Images used as backgrounds leave room for contrast.
Related Skills
| Skills | Timing |
|---|---|
moai-media:media-higgsfield-core |
Delegation: generation execution, cost, model |
moai-media:media-higgsfield-identity |
Prerequisite: mascot, model consistency reference |
moai-media:media-higgsfield-product |
Adjacent: product-focused visual 10 modes |
moai-designer:design-brand-system |
Prerequisite: brand design system definition |
moai-designer:design-tokens-transformer |
Prerequisite: token pipeline |
moai-designer:design-slop-check |
Follow-up: AI slop check |
Source
- Higgsfield MCP — generation execution path.
- Higgsfield Skills (official agent documentation) (MIT) — reference for distinguishing brand visual purposes.
- Generation contract, cost, model selection:
moai-media:media-higgsfield-corelive contract. - The source of truth for design tokens is the project's design system, and this skill only consumes it.